Autouppfyllningsfunktionen har blivit en välkommen funktion på internet. Om du skriver något i ett formulärfält, ger webbläsaren - om funktionen har aktiverats och stöds av webbläsaren - en lista med ord förslag.
Sådana applikationer kan nu implementeras mycket enkelt. För detta tilldelar du input-elementet attributet autocomplete.
<input type="text" autocomplete="on" />
Med värdet on aktiveras autouppfyllningen för fältet. Från och med nu kommer webbläsaren att komma ihåg de värden som har fyllts i fältet och senare erbjuda dem via en dropdown-lista. På så sätt kan formulären fyllas i betydligt snabbare.
Ibland önskas dock inte detta beteende för alla fält. I sådana fall kan autouppfyllningen inaktiveras explicit. Då tilldelar man attributet autocomplete värdet off.
<input type="text" autocomplete="off" />
Alternativt kan man också tilldela autocomplete-attributet till form-elementet. Beroende på om värdet on eller off används här, aktiveras eller inaktiveras autouppfyllningsfunktionen för hela formuläret.
<form autocomplete="on"> .. </form>
Om motsägande uppgifter ges inom formuläret, prioriteras dock dessa.
<form autocomplete="on"> Namn: <input type="text" name="vname" autocomplete="off" /><br /> Förnamn: <input type="text" name="nname" /><br /> Postnummer: <input type="text" name="plz" /><br /> Stad: <input type="text" name="ort" /> </form>
I det här exemplet skulle autouppfyllningen tillämpas på alla formulärfält eftersom värdet av autocomplete i det inledande form-elementet har satts till on. Undantaget är endast fältet vname. Eftersom autouppfyllningen har inaktiverats på detta fält.
För att autouppfyllningen ska fungera måste denna funktion stödjas av den aktuella webbläsaren och får inte ha inaktiverats. Dessutom visas endast värden som tidigare har fyllts i i förslagslistan.
För att verkligen kunna påverka värdena i förslagslistan har datalist-elementet introducerats med HTML5. Detta element ger inget synligt utbyte i webbläsaren. Med hjälp av de underordnade option-elementen kan värden för förslagslistorna definieras. Ett exempel:
<div> Språk: <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>
Genom attributet list på input-elementet skapas en logisk koppling mellan inmatningsfältet och datalist-elementet. För att detta ska fungera måste samma värden användas för list och id-attributen för datalist-elementet.
Ställa fokus
Ett formulärfält kan automatiskt tilldelas fokus när sidan laddas. Du känner säkert till den här funktionen från exempelvis Googles startsida. När den sidan laddas kan man direkt börja skriva sökordet utan att först ha manuellt placerat markören i sök-/inmatningsfältet.
I HTML5 finns attributet autofocus för sådana fall. Detta attribut ser till att formulärfältet som är utrustat med det automatiskt får fokus när sidan laddas.
Ett exempel:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Sök" /> </form>
Webbläsare som inte känner till attributet autofocus ignorerar det enkelt. Det har ingen negativ påverkan att ignorera det. (Då blir dock fältet inte skarpt fokuserat).
Validera inmatningar
Hittills har formulärinmatningar inte kunnat valideras enbart med HTML. Om man till exempel ville testa om en användare verkligen hade angett en e-postadress i ett formulärfält var man vanligtvis tvungen att använda JavaScript eller PHP. I HTML5 är sådana "krokar" inte längre nödvändiga. Från och med nu har HTML en inbyggd validerings-API. Och den är ganska kraftfull. Med mycket lite ansträngning kan formulärinmatningar nu valideras.
HTML5 har vissa regler som specificerar hur fält valideras. Till exempel valideras inmatningsfält av typen email för att se om en syntaktiskt korrekt e-postadress har angetts.
• url - Validerar URL
• email - Validerar e-postadress
• range - Validerar decimaltal
• number - Validerar decimaltal
För att markera ett fält som obligatoriskt tilldelas attributet required.
<input id="vname" name="vname" type="text" required="required" />
Ett fält markerat med detta måste fyllas i och får alltså inte vara tomt.
Men var försiktig: För att fälten ska valideras måste vissa krav uppfyllas.
• Elementet måste tilldelas attributet name.
• Elementet måste vara inuti ett form-element, alltså vara en del av ett HTML-formulär. Alternativt kan kopplingen till formuläret också göras via attributet form.
• Elementet får varken ha attributen readonly eller disabled.
Ett korrekt användande skulle se ut på följande sätt:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Här kommer webbläsaren att kontrollera om fältet har fyllts i. Om fältet är tomt och man ändå försöker skicka formuläret bör webbläsaren nu visa ett felmeddelande.
Under denna serie har flera gånger nämnts formulärfältyperna email, range, number, tel och url. Dessa fält valideras inte bara för att se om de innehåller något värde, utan också för att se om det inmatade värdet är korrekt.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
På fälten av typen email kontrolleras till exempel om det inmatade värdet verkligen är en syntaktiskt korrekt e-postadress. Om det inte är fallet visar webbläsaren ett felmeddelande.
Webbläsarna ansvarar för att visa felmeddelandena.
Fälten automatisk validering inaktivera
Ibland är det inte önskvärt med automatisk validering av inmatningarna. Om man vill förhindra validering av hela formuläret, lägger man till attributet novalidate på början av form-elementet.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Som ett alternativ kan attributet formnovalidate läggas till en skicka-knapp. Det är intressant till exempel när man parallellt med en skicka-knapp erbjuder en knapp för att temporärt spara formuläret.
<form action="form.cgi" method="post">
<input id="email" name="email" type="email" />
<input type="submit" name="submit" value="Skicka" />
<input type="submit"
formnovalidate="formnovalidate" value="Spara" />
<input type="submit"
formnovalidate="formnovalidate" value="Logga ut" />
</form>
I det här fallet kommer formuläret endast att valideras via den första skicka-knappen. De andra två knapparna används för att spara och logga ut. Validering är inte nödvändig i dessa fall.
