Breng uw formulieren up-to-date met CSS3- en HTML5-validatie

Laten we eens kijken naar hoe we een functionele vorm kunnen maken die de gegevens van gebruikers, client-side, valideert. Als dat klaar is, bespreken we het opmaken met CSS, inclusief CSS3!

Voordat we aan de slag gaan, kunt u overwegen om een ​​van onze HTML5-sjablonen of CSS-thema's te gebruiken voor uw volgende project, dat wil zeggen, als u een snelle, professionele oplossing nodig hebt. Of u kunt hulp krijgen van een expert op Envato Studio.

Anders is het tijd om deze stapsgewijze zelfstudie te starten.

Stap 1: Functionaliteit van conceptualisatie

Eerst willen we conceptualiseren hoe onze vorm er uit gaat zien en hoe deze zal functioneren. Laten we voor dit voorbeeld een eenvoudig contactformulier maken dat de gebruiker om de volgende informatie vraagt:

• Naam
• E-mail
• Website
• Bericht

We willen ervoor zorgen dat de gebruiker de informatie correct invoert. Om dit te bereiken, zullen we HTML5's nieuwe client-side validatietechnieken gebruiken. Hoe zit het met gebruikers die geen HTML5-mogelijkheden hebben? U kunt simpelweg server-side validatie gebruiken, maar dat valt buiten het bestek van dit artikel.

Stap 2: Conceptualiseringsformulier

Laten we een idee krijgen van hoe we onze vorm eruit zien door een ruw mockup.

Zoals u kunt zien, vormen de volgende elementen onze vorm:

• Formulier titel Verplichte velden melding
• Formulierlabels
• Formulier invoer Tijdelijke tekst
• Formulier hints voor het veld
• Verzendknop

Nu we hebben aangegeven welke elementen deel uitmaken van ons formulier, kunnen we de HTML-markup maken.

Stap 3: HTML-startercode

Laten we onze eenvoudige HTML-markeringen maken op basis van het formulierconcept dat we hebben gemaakt.

Tot nu toe zal ons HTML-bestand nog steeds leeg in de browser verschijnen. Dit is eenvoudig een startercode voor een HTML5-pagina.

Stap 4: HTML-formulier

Laten we het HTML-formulier maken (we laten de actiemethode voorlopig leeg, aangezien de validatie aan de server niet wordt behandeld in deze zelfstudie):

Stap 5: HTML-formulierelementen

Om onze formulierinhoud georganiseerd en gestructureerd te houden, verpakken we onze formulierelementen (label, invoer, enz.) in een lijst. Laten we beginnen met het maken van de formulierheader en ons eerste invoerelement:

 
 
Neem contact met ons op
 * Geeft het vereiste veld aan 
 
 Naam:  
 

Formulier Tips

Zoals te zien is in onze mockup, hebben we opmaakhints voor de velden "e-mail" en "website". Dus we zullen onze hints toevoegen onder de invoer velden waar nodig, en geef ze een klas, zodat we ze later kunnen inrichten.

 E-mail:  Correct formaat "[email protected]" 

De overige Invoer Elements

Laten we doorgaan en onze resterende formulierelementen maken, denk eraan om elke sectie in een lijstitem te verpakken.

 Website:  Juiste indeling "http://someaddress.com" 
 
 Bericht:  </li> <li> <button type="submit">Formulier verzenden</button> </li></pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_4.png">  <h2>Stap 6: het kenmerk tijdelijke aanduiding toevoegen </h2> <p>Een van de eerste verbeteringen die HTML5 aan webformulieren toevoegt (een die u waarschijnlijk al kent) is de mogelijkheid om de tekst van de tijdelijke aanduiding in te stellen. Tijdelijke tekst wordt weergegeven wanneer het invoerveld leeg is of niet is scherpgesteld.</p> <p>Laten we het kenmerk placeholder toevoegen aan onze <code>invoer</code> elementen. Dit zal de gebruiker helpen begrijpen wat hij in elk veld moet invoeren.</p> <pre><input type="text" name="name" placeholder="John Doe" /> <input type="text" name="email" placeholder="john_doe@example.com" /> <input type="text" name="website" placeholder="http://johndoe.com/" required/></pre> <h3>Snelle tip: style your <code>placeholder</code> Tekst</h3> <p>Hier is een korte tip, als u uw tijdelijke tekst wilt opmaken, zijn er enkele browser-prefixen om u te helpen:</p> <pre>: -moz-placeholder color: blue;  :: - webkit-invoer-placeholder kleur: blauw; </pre> <p>Ondersteuning voor het kenmerk placeholder is vrij goed ingeburgerd in moderne browsers (behalve IE9, sorry). Als je het echt in alle browsers wilt laten ondersteunen, zijn er enkele JavaScript-oplossingen waar je op zou kunnen letten.</p> <h2>Stap 7: Basis CSS</h2> <p>Laten we wat basis-CSS toevoegen om ons formulier wat structuur te geven. Ik zal je door de regels leiden:</p> <h3>Verwijderen <code>:focus</code> Stijl</h3> <p>Webkit voegt automatisch een aantal stijlelementen toe aan invoerelementen wanneer deze in focus zijn. Omdat we onze eigen stijlen toevoegen, willen we deze standaardwaarden overschrijven:</p> <pre>*: focus outline: none;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_5.png">  <h3>Typografische stijlen</h3> <p>Laten we wat typografische stijlen aan onze formulierelementen toevoegen:</p> <pre>body font: 14px / 21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif; .contact_form h2, .contact_form label font-family: Georgia, Times, "Times New Roman", serif; .form_hint, .required_notification font-size: 11px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_6.png">  <h3>Lijststijlen</h3> <p>Laten we onze lijstelementen opmaken om onze vorm wat structuur te geven:</p> <pre>.contact_form ul width: 750px; list-style-type: none; list-style-position: buiten; margin: 0px; padding: 0px; . contact_form li opvulling: 12px; border-bottom: 1px solid #eee; position: relative; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_7.png">  <p>Laten we ook een kleine rand toevoegen aan het bovenste en onderste gedeelte van het formulier. We kunnen dit bereiken door de <code>:eerstgeborene</code> en <code>:laatste kind</code> selectors. Deze selecteren, zoals de namen impliceren, de eerste en laatste elementen in de <code><ul></code> lijst.</p> <p>Dit voegt wat nuttige visuele sectie toe aan ons formulier. Houd er rekening mee dat deze CSS-kiezers niet worden ondersteund in oudere browsers. Omdat dit niet essentieel is voor de belangrijkste functionaliteit, belonen we onze mensen die de huidige browsers gebruiken.</p> <pre>.contact_form li: first-child, .contact_form li: last-child border-bottom: 1px solid # 777; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_8.png">  <h3>Formulierkop</h3> <p>Laten we het kopgedeelte van ons formulier stijlen. Dit omvat de heading-tag en de melding die gebruikers informeert dat de asterisk (*) vereiste velden aangeeft.</p> <pre>.contact_form h2 margin: 0; weergave: inline;  .required_notification color: # d45252; marge: 5px 0 0 0; weergave: inline; float: right; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_9.png">  <h3>Vorminvoerelementen</h3> <p>Laten we al onze kernelementen vormgeven, de elementen die worden gebruikt om gebruikersinformatie te verzamelen.</p> <pre>.contact_form-label width: 150px; margin-top: 3px; weergave: inline-block; float: left; padding: 3px; . contact_form input height: 20px; width: 220px; opvulling: 5px 8px;  .contact_form textarea padding: 8px; width: 300px;. contact_form knop margin-left: 156px;</pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_10.png">  <p>Laten we nu wat extra visuele CSS-stijlen toevoegen. Sommige hiervan zijn CSS3-stijlen die gebruikers belonen die moderne browsers gebruiken.</p> <pre>.contact_form input, .contact_form textarea border: 1px solid #aaa; vakschaduw: 0px 0px 3px #ccc, 0 10px 15px #eee inzet; border-radius: 2px; . contact_form input: focus, .contact_form textarea: focus background: #fff; rand: 1px vast # 555; vakschaduw: 0 0 3px #aaa;  / * Knopstijl * / button.verzenden background-color: # 68b12f; achtergrond: -webkit-gradiënt (lineair, links bovenaan, links onderaan, vanaf (# 68b12f), naar (# 50911e)); achtergrond: -webkit-lineair-gradiënt (boven, # 68b12f, # 50911e); achtergrond: -moz-linear-gradient (bovenaan, # 68b12f, # 50911e); achtergrond: -ms-lineaire gradiënt (boven, # 68b12f, # 50911e); achtergrond: -o-lineaire gradiënt (boven, # 68b12f, # 50911e); achtergrond: lineair verloop (boven, # 68b12f, # 50911e); rand: 1px vast # 509111; border-bottom: 1px solid # 5b992b; grensradius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; vakschaduw: inzet 0 1px 0 0 # 9fd574; -webkit-box-shadow: 0 1px 0 0 # 9fd574 inzet; -moz-box-shadow: 0 1px 0 0 # 9fd574 inzet; -ms-box-shadow: 0 1px 0 0 # 9fd574 inzet; -o-box-shadow: 0 1px 0 0 # 9fd574 inzet; kleur wit; lettertype: vet; opvulling: 6px 20px; text-align: center; tekstschaduw: 0 -1px 0 # 396715;  button.submit: hover opacity: .85; cursor: pointer;  button.submit: active border: 1px solid # 20911e; vakschaduw: 0 0 10px 5px # 356b0b inzet; -webkit-box-shadow: 0 0 10px 5px # 356b0b inzet; -moz-box-shadow: 0 0 10px 5px # 356b0b inzet; -ms-box-shadow: 0 0 10px 5px # 356b0b inzet; -o-box-shadow: 0 0 10px 5px # 356b0b inzet; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_11.png">  <h2>Stap 8: voeg wat interactiviteit toe met CSS3</h2> <p>Laten we een beetje interactiviteit toevoegen. We zullen het veld dat momenteel geselecteerd is, uitbreiden door wat opvulling toe te voegen.</p> <pre>.contact_form invoer: focus, .contact_form textarea: focus / * voeg dit toe aan de reeds bestaande stijl * / opvulling rechts: 70px; </pre> <p>Laten we voor browsers die dit ondersteunen, de uitbreiding van het veld een soepele overgang maken met behulp van CSS3.</p> <pre>.contact_form input, .contact_form textarea / * voeg dit toe aan de reeds bestaande stijl * / -moz-transition: padding .25s; -webkit-overgang: padding .25s; -o-overgang: opvulling .25s; overgang: padding .25s; </pre>  <img src="//accentsconagua.com/img/images_20/bring-your-forms-up-to-date-with-css3-and-html5-validation_12.png">  <h2>Stap 9: De <code>verplicht</code> Kenmerk in HTML5</h2> <p>Nu is het tijd voor waar we allemaal op gewacht hebben: HTML5's tools voor het afhandelen van formulieren.</p> <p>Het toevoegen van de <code>verplicht</code> attribuut aan elk element input / textarea vertelt de browser dat een waarde vereist is voordat het formulier kan worden ingediend. Er kan dus geen formulier worden ingediend als een <code>verplicht</code> veld is niet ingevuld.</p> <p>Dus laten we doorgaan en het toevoegen <code>verplicht</code> attribuut aan al onze formulierelementen (omdat we willen dat ze allemaal worden ingevuld).</p> <pre><input type="text" name="name" required /> <input type="text" name="email" required /> <input type="text" name="website" required /> <textarea name="message" cols="40" rows="6" required >

Stap 10: Styling verplicht Fields

U zult waarschijnlijk merken dat er visueel gesproken niets gebeurde door het toevoegen van de verplicht attribuut. We gaan verplichte velden opmaken met behulp van CSS. Voor dit voorbeeld gaan we een rood asterisk toevoegen als achtergrondafbeelding in elk vereist veld. Om dit te bereiken, willen we eerst wat opvulling toevoegen aan de rechterkant van onze invoer waar de achtergrondafbeelding zal zijn (dit voorkomt overlapping van tekst als het veld een lange reeks is):

.contact-vorminvoer, .contact_form textarea padding-right: 30px; 

Nu zullen we de CSS pseudo-selector gebruiken :verplicht om alle formulierelementen te targeten met een vereist kenmerk. Ik heb een eenvoudig rood sterretje van 16x16 pixels gemaakt in photoshop dat als visuele indicator van een vereist veld zal dienen.

input: required, textarea: required background: #fff url (images / red_asterisk.png) no-repeat 98% center; 

Wat gebeurt er bij indiening?

Op dit moment zullen verschillende browsers verschillende dingen doen wanneer een formulier met HTML5-elementen wordt ingediend. Wanneer het formulier wordt ingediend, zullen de meeste browsers voorkomen dat het formulier wordt ingediend en wordt een "hint" weergegeven voor de gebruiker, waarbij het eerste veld wordt gemarkeerd dat vereist is en geen waarde heeft. Visuele vormgeving en ondersteuning voor deze 'bubbelvelden' is vrij breed. Hopelijk worden deze gedragingen in de toekomst gestandaardiseerd.

U kunt de huidige browserondersteuning voor de bekijken verplicht attribuut bij quirksmode.

Snelle tip:

Je kunt het bubbelbericht eigenlijk een beetje in webkit stijlen met behulp van het volgende:

:: - webkit-validation-bubble-message opvulling: 1em; 

Stap 11: Nieuwe HTML5 begrijpen type Attributen en Client-Side Validation

HTML5-validatie werkt volgens de type kenmerk dat is ingesteld in de formuliervelden. Jarenlang ondersteunde HTML slechts een handvol typekenmerken, zoals type = "tekst" maar met HTML5 zijn er meer dan een dozijn nieuwe invoertypes, waaronder e-mail en url die we in onze vorm gaan gebruiken.

Door onze input te combineren type attributen met de nieuwe verplicht attribuut, kan de browser nu de data-clientzijde van het formulier valideren. Als de browser van een gebruiker het nieuwe niet ondersteunt type attributen, zoals type = "email", het zal gewoon standaard naar type = "tekst". Dit is eigenlijk best verbazingwekkend. In wezen heb je compatibiliteit met eerdere versies in alle browsers op aarde, hoera!

Dus wat als de browser het nieuwe ondersteunt? type attributen? Voor desktopbrowsers is er geen visueel verschil (tenzij gespecificeerd door aangepaste CSS-regels). EEN type = "tekst" veld ziet er hetzelfde uit als a type = "email" veld. Voor mobiele browsers is er echter een verschil als het gaat om de gebruikersinterface.

Een voorbeeld: de iPhone

De iPhone van Apple detecteert de formuliertypen en verandert het schermtoetsenbord dynamisch door contextbewuste tekens aan te bieden. Alle e-mailadressen vereisen bijvoorbeeld de volgende symbolen: "@" en "." Dus de iPhone biedt die karakters wanneer het invoertype gespecificeerd is om te e-mailen.

Stap 12: De. Wijzigen type attributen

We hebben al onze formuliervelden ingesteld op de standaardwaarde type = "tekst". Maar nu willen we het typekenmerk op onze e-mail- en websitevelden wijzigen in hun overeenkomstige HTML5-type.

Stap 13: HTML5-validatie

Zoals eerder vermeld, is HTML5-validatie gebaseerd op uw type kenmerken en is standaard ingeschakeld. Er is geen specifieke markup vereist om formuliervalidatie te activeren. Als u het wilt uitschakelen, kunt u de novalidate kenmerk als dit:

 <-- do not validate this form -->  

Naam veld

Laten we naar ons eerste veld kijken dat de gebruiker naar zijn / haar naam vraagt. Zoals beschreven eariler, hebben we de type = "tekst" attribuut en de verplicht attribuut. Dit informeert de webbrowser dat dit veld verplicht is en dat het veld als gewoon tekst moet worden gevalideerd. Dus zolang de gebruiker ten minste één teken invoert in dat veld, zal het valideren.

Nu zullen we onze eigen CSS-naar-stijlveldinvoer maken die door de browser als geldig en ongeldig wordt beschouwd. Als je het onthoudt, hebben we het gebruikt :verplicht in onze CSS om alle invoerelementen met een vereist kenmerk op te maken. Nu kunnen we onze verplichte velden opmaken die geldig of ongeldig zijn door ze toe te voegen :Geldig of :ongeldig aan onze CSS-regels.

Laten we eerst velden intypen die ongeldig zijn. Voor dit voorbeeld willen we het formulier alleen als ongeldig indelen als het in focus is. We voegen een rode rand, rode schaduw en een rood pictogram toe, gemaakt in photoshop om het ongeldige veld aan te geven.

.contact_formulier invoer: focus: ongeldig, .contact_form textarea: focus: ongeldig / * wanneer een veld door de browser als ongeldig wordt beschouwd * / background: #fff url (images / invalid.png) no-repeat 98% center; vakschaduw: 0 0 5px # d45252; randkleur: # b03535

Laten we nu de regels maken die aangeven dat het veld geldig is. We voegen een pictogram voor groene rand, groene schaduw en hebzucht toe dat is gemaakt in photoshop. Dit wordt toegepast op alle geldige velden, ongeacht of ze in focus zijn of niet.

.contact_form invoer: vereist: geldig, .contact_form textarea: vereist: geldig / * wanneer een veld door de browser als geldig wordt beschouwd * / background: #fff url (images / valid.png) no-repeat 98% center; vakschaduw: 0 0 5px # 5cd053; randkleur: # 28921f; 

Wanneer u nu scherpstelt op een formulierveld, wordt de rode ongeldige stijl weergegeven. Zodra een enkel teken in het veld is ingevoerd, wordt het gevalideerd en worden groene CSS-stijlen getoond om dat feit aan te geven.

E-mail en URL-velden

Onze CSS-stijlen en validatieregels zijn al toegepast op het e-mailveld omdat we de type en verplicht attributen eerder.

Stap 14: Introductie van de HTML5 patroon Attribuut

De ... gebruiken type = "email" attribuut als een voorbeeld, het lijkt erop dat de meeste browsers dat veld valideren als * @ * (elk teken + het "@" -symbool + elk teken). Dit is natuurlijk niet erg beperkend, maar het voorkomt wel dat gebruikers spaties invoeren of waarden die helemaal fout zijn.

In het voorbeeld van de type = "URL" attribuut, lijkt het erop dat de minimumvereiste voor de meeste browsers elk teken is dat wordt gevolgd door een dubbele punt. Dus als u "h:" heeft ingevoerd, zou het veld geldig zijn. Dit is niet erg handig, maar het voorkomt dat gebruikers irrelevante informatie invoeren, zoals hun e-mailadres of thuisadres. Nu zou u kunnen omgaan met specifieker zijn met uw invoerwaarden in uw validatie aan de serverzijde; we gaan het echter hebben over hoe je dat in HTML5 kunt doen.

De patroon Attribuut

Het patroonkenmerk accepteert een javascript reguliere expressie. Deze uitdrukking wordt gebruikt, in plaats van de standaardinstelling van de browser, om de waarde van het veld te valideren. Onze HTML ziet er nu dus als volgt uit:

Nu accepteert ons veld alleen waarden die beginnen met 'http: //' of 'https: //' en één extra teken. Deze reguliere expressiepatronen kunnen in het begin verwarrend zijn, maar als je de tijd neemt om ze te leren, staan ​​je vormen open voor een hele nieuwe wereld..

Stap 15: Form Field Hints (CSS)

Laten we nu onze formulierhints stijlen die de gebruiker het formaat geven dat ze moeten gebruiken bij het invoeren van hun informatie.

.form_hint background: # d45252; grensradius: 3px 3px 3px 3px; kleur wit; margin-left: 8px; opvulling: 1px 6px; z-index: 999; / * hints blijven boven alle andere elementen * / positie: absoluut; / * biedt de juiste opmaak als hint twee regels is * / display: none; 

We gaan zitten Geen weergeven omdat we alleen de hints laten zien wanneer de gebruiker zich op het invoerveld richt. We stellen onze tooltips ook standaard in op onze rode ongeldige kleur, omdat ze altijd als ongeldig worden beschouwd totdat de juiste informatie is ingevoerd.

De ... gebruiken ::voor keuzeschakelaar

Nu willen we een kleine driehoek aan onze hintdozen toevoegen die helpen het oog te richten en te begeleiden. Dit kan gedaan worden met behulp van afbeeldingen, maar in ons geval gaan we het doen met pure CSS.

Omdat het puur een presentatie-element is dat niet van vitaal belang is voor de functionaliteit van de pagina, gaan we een kleine driehoek toevoegen die naar links wijst met behulp van de ::voor pseudo-selector. We kunnen dit doen door een van de unicode geometrische vormen te gebruiken.

Normaal zouden we het HTML Unicode-formaat gebruiken om deze in onze HTML weer te geven (zoals in de bovenstaande afbeelding). Omdat we het echter zullen gebruiken ::voor CSS-selector, we moeten de bijbehorende escaped unicode van de driehoek gebruiken wanneer we de inhoud:"" regel. Vervolgens gebruiken we positionering om het te krijgen waar we het willen hebben.

.form_hint :: before content: "\ 25C0"; / * linkerpunt driehoek in escaped unicode * / color: # d45252; positie: absoluut; top: 1px; left: -6px; 

De ... gebruiken + Aangrenzende selector

Ten slotte gaan we de aangrenzende CSS-kiezer gebruiken om onze formulierveldhints te tonen en te verbergen. De aangrenzende selector (x + y) selecteert het element dat onmiddellijk wordt voorafgegaan door het vorige element. Omdat onze hints voor het vak direct na onze invoervelden in onze HTML komen, kunnen we deze selector gebruiken om de tooltips te tonen / verbergen.

.contact-formulierinvoer: focus + .form_hint display: inline; .contact_form invoer: vereist: geldig + .form_hint background: # 28921f; / * wijzig formulier hint kleur indien geldig * / .contact_form invoer: vereist: geldig + .form_hint :: before color: # 28921f; / * verander vorm hint pijl kleur indien geldig * /

Zoals u kunt zien aan de hand van de CSS, stellen we ook de formulierhints in om de kleuren samen met de invoerrand te wijzigen wanneer een veld geldig of ongeldig is.

Stap 16: leun achterover en bewonder je mooie HTML5-formulier

Ga je gang en bekijk je uiteindelijke product!

Conclusie

Zoals u ziet, zijn de nieuwe HTML5-formulierfuncties best netjes! Alles is compatibel met eerdere versies, dus het opnemen van deze nieuwe functies in uw website zal niets breken.

HTML5-validatie komt dichter bij het vervangen van client-side validatie om gebruikers te helpen bij het correct invullen van hun online formulieren. HTML5-validatie vervangt echter nog steeds geen validatie aan de serverzijde. Voorlopig is het het beste om beide methoden te gebruiken bij het verwerken van door gebruikers verzonden informatie. Bedankt voor het lezen!

Bekijk onze HTML5-sjablonen of CSS-thema's voor uw volgende project - als u een professionele, kant-en-klare oplossing nodig hebt.