Formulieren opmaken met CSS: een handleiding voor beginners

Apps verzamelen voornamelijk gegevens via formulieren. Neem bijvoorbeeld een algemeen aanmeldingsformulier: er zijn verschillende velden waar gebruikers informatie kunnen invoeren, zoals hun naam, e-mailadres, enz.

Vroeger hadden websites gewoon saaie HTML-formulieren met geen stijlen. Dat was voordat CSS alles veranderde. Nu kunnen we interessantere, levendigere formulieren maken met behulp van de nieuwste functies van CSS.

Geloof me niet zomaar. Hieronder ziet u hoe een typisch HTML-formulier eruitziet zonder CSS.

Hier is datzelfde formulier opgefrist met een beetje CSS .

In deze tutorial laten we je zien hoe je het bovenstaande formulier opnieuw kunt maken, evenals een paar andere geweldige wijzigingen die u kunt doorvoeren om visueel indrukwekkende, gebruiksvriendelijke formulieren te maken.

We laten zien hoe u formulieren met CSS opmaakt in zes stappen:

1. Instelling box-sizing
2. CSS-selectors voor invoerelementen
3. Basisstijlmethoden voor tekstinvoervelden
4. Styling van andere invoertypen
5. UI pseudo-klassen
6. Niet-aanpasbare invoer

Voordat we erin duiken, is het belangrijk om te begrijpen dat er geen specifieke stijl is voor formulieren. De mogelijkheden worden alleen beperkt door uw verbeeldingskracht. Deze gids is bedoeld om u op weg te helpen op weg naar het maken van uw eigen unieke ontwerpen met CSS.

Laten we beginnen!

Box-sizing instellen

Ik stel * {box-sizing:border-box;} meestal niet alleen in voor formulieren, maar ook voor webpaginas. Als je het instelt, zal de breedte van alle elementen de opvulling bevatten.

Stel bijvoorbeeld de breedte en opvulling als volgt in.

.some-class { width:200px; padding:20px;}

De .some-class zonder box-sizing:border-box zal een breedte hebben van meer dan 200px, die kan een probleem zijn. Daarom gebruiken de meeste ontwikkelaars border-box voor alle elementen.

Hieronder staat een betere versie van de code. Het ondersteunt ook de :before en :after pseudo-elementen.

*, *:before, *:after { box-sizing: border-box;}

Tip: De * selector selecteert alle elementen in het document.

CSS selectors voor invoerelementen

De gemakkelijkste manier om te selecteren invoerelementen is om CSS-attribuutselectors te gebruiken.

Deze selectors zullen alle invoerelementen in het document selecteren. Als je selectors moet specificeren, moet je klassen aan de elementen toevoegen.

<input type="text" class="signup-text-input" />

Dan:

.signup-text-input { // styles here}

Basisstijlmethoden voor tekstinvoervelden van één regel

Velden met één regel zijn de meest voorkomende invoervelden die in formulieren worden gebruikt. Gewoonlijk is tekstinvoer van één regel een eenvoudig vak met een rand (dit hangt af van de browser).

Hier is de HTML-opmaak voor een veld van één regel met een tijdelijke aanduiding.

<input type="text" placeholder="Name" />

Het zal er als volgt uitzien:

U kunt het volgende gebruiken CSS-eigenschappen om dit invoerveld aantrekkelijker te maken.

• Padding (om binnenafstand toe te voegen)
• Marge (om een marge toe te voegen rond het invoerveld)
• Rand
• Vakschaduw
• Randstraal
• Breedte
• Lettertype

Laten we inzoomen in op elk van deze eigenschappen.

Padding

Door wat innerlijke ruimte aan het invoerveld toe te voegen, kan de duidelijkheid worden verbeterd. U kunt dit bereiken met de eigenschap padding.

input { padding: 10px;}

Marge

Als er andere elementen in de buurt van uw invoerveld zijn, wilt u er misschien een marge omheen toevoegen om clustering te voorkomen.

input { padding:10px; margin:10px 0; // add top and bottom margin}

Rand

In de meeste browsers hebben tekstinvoervelden randen, die u kunt aanpassen.

.border-customized-input { border: 2px solid #eee;}

U kunt ook een rand helemaal verwijderen.

.border-removed-input { border: 0;}

Tip: wees er zeker van om een achtergrondkleur toe te voegen of box-shadow wanneer de rand is verwijderd. Anders zien gebruikers de invoer niet.

Sommige webontwerpers geven er de voorkeur aan om alleen de onderrand weer te geven, omdat het een beetje lijkt op schrijven op een regel in een notitieblok.

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

Box shadow

U kunt de CSS box-shadow eigenschap gebruiken om een slagschaduw toe te voegen. U kunt een scala aan effecten bereiken door te spelen met de vijf waarden van de eigenschap.

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

Randradius

De eigenschap border-radius kan een enorme impact hebben op het gevoel van uw formulieren. Door de randen van de vakken te buigen, kunt u het uiterlijk van uw invoervelden aanzienlijk veranderen.

.rounded-input { padding:10px; border-radius:10px;}

U kunt een geheel andere look en feel krijgen door box-shadow en border-radius samen te gebruiken.

Breedte

Gebruik de width eigenschap om stel de breedte van de invoer in.

input { width:100%;}

Lettertypen

De meeste browsers gebruiken een andere lettertypefamilie en grootte voor formulierelementen. Indien nodig kunnen we het lettertype van het document overnemen.

input, textarea { font-family:inherit; font-size: inherit;}

Styling van andere invoertypen

U kunt andere invoertypes opmaken, zoals tekstgebied, keuzerondje, selectievakje en meer. Laten we het eens nader bekijken.

Tekstgebieden

Tekstgebieden lijken op tekstinvoer, behalve dat ze invoer met meerdere regels mogelijk maken. U gebruikt deze meestal als u gegevens in een langere vorm van gebruikers wilt verzamelen, zoals opmerkingen, berichten, enz. U kunt alle standaard CSS-eigenschappen gebruiken die we eerder hebben besproken om tekstgebieden op te maken.

De resize eigenschap is ook erg handig in tekstgebieden. In de meeste browsers kunnen tekstgebieden standaard langs zowel de x- als de y-as worden aangepast (waarde: both). U kunt het instellen op both, horizontal of vertical.

Bekijk dit tekstgedeelte dat ik heb gestileerd:

Zie de pen
dyomzez door Supun Kavinda (@SupunKavinda)
op CodePen.

In dit voorbeeld heb ik resize:vertical gebruikt om alleen verticale formaatwijziging toe te staan. Deze praktijk wordt in de meeste vormen gebruikt, omdat het vervelende horizontale schuifbalken voorkomt.

Opmerking: als u tekstgebieden met automatische grootte moet maken, moet u een JavaScript-benadering gebruiken, die buiten het bereik van dit artikel.

Selectievakjes en keuzerondjes

Het standaard selectievakje en keuzerondjes zijn moeilijk te stylen en vereisen meer complexe CSS (en HTML).

Stijlen een selectievakje, gebruikt u de volgende HTML-code.

<label>Name <input type="checkbox" /> <span></span></label>

Een paar dingen om op te merken:

• Aangezien we <label> om de <input> te verpakken, als u op een element binnen <``label``> klikt, wordt de <input> zal worden aangeklikt
• We verbergen de <input> omdat browsers ons niet toestaan om het veel te wijzigen
• <span> maakt een aangepast selectievakje aan
• We gebruiken de input:checked pseudo-class selector om de aangevinkte status en stijl het aangepaste selectievakje

Hier is een aangepast selectievakje (zie de opmerkingen in de CSS voor meer uitleg):

Zie de pen
yLNKQBo door Supun Kavinda ( @SupunKavinda)
op CodePen.

Hier is een aangepast keuzerondje:

Bekijk de pen
eYNMQNM door Supun Kavinda (@SupunKavinda)
op CodePen.

We gebruikten hetzelfde concept (input:checked) om in beide voorbeelden aangepaste elementen te maken.

In browsers hebben selectievakjes de vorm van een doos, terwijl keuzerondjes rond zijn. Het is het beste om deze conventie in aangepaste invoer te behouden om verwarring bij de gebruiker te voorkomen.

Selecteer menus

Selecteer menus stellen gebruikers in staat om een item uit meerdere keuzes te selecteren.

U kunt het element <select> een stijl geven om er aantrekkelijker uit te zien.

select { width: 100%; padding:10px; border-radius:10px;}

U kunt de vervolgkeuzelijst (of <option> -elementen) echter niet opmaken omdat ze standaard worden opgemaakt, afhankelijk van het besturingssysteem. De enige manier om deze elementen op te maken, is door aangepaste vervolgkeuzelijsten met JavaScript te gebruiken.

Knoppen

Zoals de meeste elementen hebben knoppen standaardstijlen.

<button>Click Me</button>

Laten we dit een beetje spannender maken.

UI-pseudo-klassen

Hieronder staan enkele UI-pseudo-klassen die vaak worden gebruikt met formulierelementen.

Deze kunnen worden gebruikt om mededelingen weer te geven gebaseerd op de attributen van een element:

• :required
• :valid en :invalid
• :checked (we hebben dit al gebruikt)

Deze kunnen worden gebruikt om effecten op elke staat te creëren:

• :hover
• :focus
• :active

Gegenereerde berichten met: vereist

Om een bericht te tonen dat invoer vereist is:

Als u de -attribuut met JavaScript, wordt het "Required" -bericht automatisch verwijderd.

We kunnen hetzelfde doen met het :valid en :invalid pseudo-klassen.

: hover en: focus

:hover selecteert een element wanneer de muisaanwijzer erover beweegt. :focus selecteert een element wanneer het gefocust is.

Deze pseudo-klassen worden vaak gebruikt om overgangen en kleine visuele veranderingen te creëren. U kunt bijvoorbeeld de breedte, achtergrondkleur, randkleur, schaduwsterkte, etc. wijzigen.Door de eigenschap transition met deze eigenschappen te gebruiken, worden die wijzigingen veel soepeler.

Hier zijn enkele hover-effecten op formulierelementen (probeer over de elementen te zweven).

Zie de pen
yLNKZqg door Supun Kavinda (@SupunKavinda)
op CodePen.

Wanneer gebruikers zien dat elementen subtiel veranderen wanneer ze zweven eroverheen, ze krijgen het gevoel dat het element bruikbaar is. Dit is een belangrijke overweging bij het ontwerpen van formulierelementen.

Is het u opgevallen dat (in sommige browsers) een blauwe omtrek verschijnt wanneer u zich concentreert op formulierelementen? Je kunt de :focus pseudo-class gebruiken om het te verwijderen en meer effecten toe te voegen wanneer het element gefocust is.

De volgende code verwijdert de focuscontour voor alle elementen.

*:focus {outline:none !important}

Om een focusoverzicht toe te voegen:

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

Heeft u zoekopdrachten gezien die schaal wanneer gefocust? Probeer deze invoer.

Bekijk de pen
KKpoJJa door Supun Kavinda (@SupunKavinda)
op CodePen.

Niet-aanpasbare invoer

Vormelementen opmaken is historisch gezien een hele opgave. Er zijn enkele formulierelementen waar we niet veel controle over hebben. Bijvoorbeeld:

• <input type="color">
• <input type="file">
• <progress>
• <option>, <optgroup>, <datalist>

Deze elementen worden geleverd door de browser en opgemaakt op basis van het besturingssysteem. De enige manier om deze elementen op te maken, is door aangepaste bedieningselementen te gebruiken, die zijn gemaakt met HTML-elementen die kunnen worden gestileerd, zoals div, span, enz.

Als we bijvoorbeeld <input type="file"> opmaken, kunnen we de standaardinvoer verbergen en een aangepaste knop gebruiken.

Aangepaste bedieningselementen voor formulierelementen zijn ontwikkeld voor de meeste grote JavaScript-bibliotheken. Je kunt ze vinden op GitHub.

Conclusie

Je zou nu moeten begrijpen hoe je eenvoudige formulierelementen moet opmaken en hoe je aangepaste besturingselementen kunt gebruiken wanneer invoervelden van de browser moeilijk te stylen zijn. Zoals ik aan het begin van dit bericht al zei, zijn dit slechts de basisbouwstenen van CSS-formulierstyling. Gebruik deze tips als basis om uw verbeelding de vrije loop te laten.

Vergeet als afsluitende tip niet om al uw formulieren responsive te maken.

Op zoek naar meer inspiratie voor het ontwerpen van formulieren? Bekijk deze CodePen-verzameling.