Automatisk udfyldningsfunktionen er efterhånden en velkommen funktion på internettet. Når man skriver noget i en formularfelt, tilbyder browsere - når funktionen er aktiveret og understøttet af browseren - en liste over ordforslag.
Sådanne anvendelser kan nu implementeres meget nemt. Dertil tildeles input-elementet attributtet autocomplete.
<input type="text" autocomplete="on" />
Ved værdien on aktiveres automatisk udfyldning for feltet. Browseren husker nu værdierne, der er indtastet i feltet, og tilbyder dem senere via en valgliste. På denne måde kan formularer udfyldes meget hurtigere.
Denne adfærd ønskes dog ikke altid for alle felter. I sådanne tilfælde kan automatisk udfyldning deaktiveres eksplicit. Til dette tildeles attributtet autocomplete værdien off.
<input type="text" autocomplete="off" />
Alternativt kan attributtet autocomplete også tilføjes til form-elementet. Afhængigt af om værdien on eller off anvendes, aktiveres eller deaktiveres automatisk udfyldningsfunktionen for hele formularen.
<form autocomplete="on"> .. </form>
Hvis der angives modsatte oplysninger inden for formularen, vil disse dog have forrang.
<form autocomplete="on"> Navn: <input type="text" name="vname" autocomplete="off" /><br /> Fornavn: <input type="text" name="nname" /><br /> Postnummer: <input type="text" name="plz" /><br /> By: <input type="text" name="ort" /> </form>
I dette eksempel ville automatisk udfyldning blive anvendt på alle formularfelter, da værdien af autocomplete i den indledende form-tag blev sat til on. Undtagelsen her er kun feltet vname, hvor automatisk udfyldning er deaktiveret eksplicit.
For at automatisk udfyldning kan fungere, skal denne funktion understøttes af den enkelte browser og må ikke være deaktiveret. Desuden vises kun værdier, der allerede er indtastet, i forslagslisten.
For at kunne påvirke værdierne i forslagslisten blev datalist-elementet introduceret med HTML5. Dette element har ingen synlig output i browseren. Værdierne til forslagslisterne defineres via de underordnede option-elementer. Et eksempel:
<div> Sprog: <br /> <input type="text" autocomplete="on" list="sprache" /> </div> <datalist id="sprache"> <option value="HTML5"></option> <option value="XHTML"></option> <option value="PHP"></option> <option value="JavaScript"></option> </datalist>
Ved hjælp af list-attributtet for input-elementet oprettes en logisk forbindelse mellem inputfeltet og datalist-elementet. For at gøre dette skal de samme værdier bruges til list og id-attributtet for datalist-elementet.
Indstil fokus
Automatisk kan fokus knyttes til et formularfelt, når siden indlæses. En sådan funktion er kendt fra f.eks. Googles startside. Når denne side indlæses, kan man straks indtaste søgeordet uden først manuelt at have flyttet markøren til søge-/inputfeltet.
I HTML5 findes der attributtet autofocus til sådanne tilfælde. Dette attribut sikrer, at formularfeltet, der er udstyret med det, automatisk får tildelt fokus, når siden indlæses.
Et eksempel:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Søg" /> </form>
Browsere, der ikke kender attributtet autofocus, ignorerer det simpelthen. Dette ignoreres har ingen negative virkninger. (Dog vil feltet ikke blive fokuseret).
Validering af indtastninger
Indtil nu kunne formularindtastninger alene ikke valideres med HTML-værktøjer. Hvis man eksempelvis ville teste, om en bruger rent faktisk havde indtastet en e-mail-adresse i et formularfelt, måtte man normalt ty til JavaScript eller PHP. I HTML5 er sådanne "akrobatiske" greb ikke længere nødvendige. HTML har nu en indbygget validerings-API. Og den er meget kraftfuld. Med minimal indsats kan formularindtastninger nu valideres.
HTML5 har visse regler, der definerer, hvordan felter valideres. For eksempel kontrolleres inputfelter af typen email for, om en syntaktisk korrekt e-mail-adresse er indtastet.
• url - Verificerer URL
• email - Verificerer e-mail-adresse
• range - Verificerer flydende tal
• number - Verificerer flydende tal
For at angive et felt som obligatorisk tildeles det attributtet required.
<input id="vname" name="vname" type="text" required="required" />
Et felt, der er markeret på denne måde, skal udfyldes og må derfor ikke være tomt.
Men vær opmærksom: For at felter kan valideres, skal visse betingelser være opfyldt.
• Elementet skal tildeles attributten name.
• Elementet skal være inde i et form-element og derfor befinde sig i et HTML-formular. Alternativt kan forbindelsen til formularet også etableres gennem attributten form.
• Elementet må ikke have attributterne readonly eller disabled.
En korrekt anvendelse ville se sådan ud:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Her vil browseren kontrollere, om feltet er udfyldt. Hvis feltet er tomt, og der stadig forsøges at sende formularen, bør browseren nu give en fejlmeddelelse.
I løbet af denne serie er der allerede blevet gjort opmærksom på formularelementtyperne email, range, number, tel og url. Disse felter valideres ikke kun for at sikre, at de indeholder en værdi, men også for at sikre, at den indtastede værdi er korrekt.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Ved felter af typen email kontrolleres det således eksempelvis, om den indtastede værdi rent faktisk er en syntaktisk korrekt e-mailadresse. Hvis dette ikke er tilfældet, vil browseren give en fejlmeddelelse.
Det er browserne, der er ansvarlige for visningen af fejlmeddelelser.
Felter skal ikke valideres automatisk
Det ønskes ikke altid at validere indtastningerne automatisk. Hvis validering af hele formularen skal forhindres, tildeles det indledende form-element attributten novalidate.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternativt kan attributten formnovalidate tilføjes til en afsendelsesknappen. Dette er interessant, f.eks., når der udover en sendeknap også tilbydes en knap til midlertidig lagring af formularen.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Senden" />
<input type="submit"
formnovalidate="formnovalidate" value="Gem" />
<input type="submit"
formnovalidate="formnovalidate" value="Log ud" />
</form>
I dette tilfælde valideres formularen kun med den første sendeknap. De to andre betjener henholdsvis gemmefunktionen og logud-funktionen. Validering er ikke nødvendig i disse tilfælde.
