Home-theater-designers
CSS behoort tot een unieke klasse van talen, bekend als stylesheettalen. Het wordt voornamelijk gebruikt om de presentatie van uw webpagina te definiëren. Hoewel u met HTML kunt specificeren hoe uw pagina moet worden gestructureerd, wordt CSS gebruikt om deze op te maken. Anders krijg je een behoorlijk onaantrekkelijke website.
Focussen op CSS is een van de betere manieren om de aantrekkingskracht van uw website te vergroten, vooral als het gaat om het verbeteren van uw gebruikerservaring. Op deze manier kunt u ook uw verkeer vergroten. Om te beginnen kun je een gestapeld formulier gebruiken.
Wat is een gestapeld formulier?
Met een gestapeld formulier kunt u een speciaal formulier maken waarin u uw labels en invoer op elkaar kunt plaatsen, in plaats van ze in een horizontaal patroon te plaatsen.
Hier leest u hoe u het kunt doen.
Codeer de HTML
Gebruik het HTML-element, , om uw gegevens te verwerken. Voeg labels toe voor de relevante velden en wijs de relevante invoervelden toe. In dit voorbeeld vragen we gebruikers om hun volledige naam en e-mailadres op te geven bij het invoertype van het formulier tekst , terwijl een vervolgkeuzemenu wordt gemaakt via selecteer id om hen te helpen bij het kiezen van hun branche.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Als u dit stukje code uitvoert, krijgt u echter alleen een saaie vorm zonder de velden verticaal te stapelen. En dat is waar je CSS moet toevoegen.
waar is de zaklamp op mijn telefoon
Codeer het CSS-gedeelte
Maak nu een apart stijlblad en voeg het toe aan uw HTML vóór de body-tag:
Selecteer vervolgens de hoofdtekst, invoertypen en container van uw HTML en stijl ze via CSS. Dit omvat het experimenteren met verschillende CSS-eigenschappen, zoals lettertypefamilie, breedte, opvulling, marge, weergave, rand, enz., en voeg uw voorkeurswaarden toe. Zo krijg je een gestapeld formulier dat precies bij jouw voorkeuren past. Hier is een voorbeeld.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Controleer de uitvoer hieronder.
Nu kunt u een gestapeld formulier maken in CSS
Met dit artikel heb je geleerd hoe je een gestapeld formulier in CSS kunt maken. Met wat oefening kunt u uw formulieren verfijnen en uw website gebruiksvriendelijker maken.
wat kan een Raspberry Pi doen?
De naam van het programmeerspel is 'practice'. Verbeter je CSS-vaardigheden dag in dag uit met tentoonstellingsprojecten om een stijlvolle webdesigner en efficiëntere webontwikkelaar te worden.
Deel Deel Tweeten E-mail 10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt lerenHulp nodig met CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webontwikkeling
- CSS
Usman is een contentmarketeer die verschillende bedrijven heeft geholpen met organische groei op digitale platforms. Hij houdt van zowel programmeren als schrijven, wat betekent dat technisch schrijven iets is wat hij erg leuk vindt. Als hij niet aan het werk is, besteedt Usman graag tijd aan het kijken naar tv-programma's, het volgen van cricket en lezen over data-analyse.
Meer van Usman GhaniAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren