Autofullføringsfunksjonen er nå et velkommen funksjon på internett. Når man skriver inn noe i et skjema felt, tilbyr nettleseren - hvis funksjonen er aktivert og støttet av nettleseren - en liste med ordforslag.
Slike applikasjoner kan nå implementeres veldig enkelt. For å gjøre dette, tilordner man attributtet autocomplete til input-elementet.
<input type="text" autocomplete="on" />
Ved å sette verdien on aktiveres autofullføringsfunksjonen for feltet. Nå husker nettleseren verdiene som er skrevet inn i feltet og tilbyr dem senere via en nedtrekksliste. På denne måten kan skjemaer fylles ut mye raskere.
Nå er ikke denne atferden ønsket for hvert felt. I slike tilfeller kan autofullføringen deaktiveres eksplicit. For å gjøre dette, tilordner man verdien off til autocomplete-attributtet.
<input type="text" autocomplete="off" />
Alternativt kan man også legge til autocomplete-attributtet til form-elementet. Avhengig av om verdien on eller off brukes her, aktiveres eller deaktiveres autofullføringsfunksjonen for hele skjemaet.
<form autocomplete="on"> .. </form>
Hvis det gis motstridende instruksjoner innen skjemaet, vil disse imidlertid være gjeldende.
<form autocomplete="on"> Navn: <input type="text" name="vname" autocomplete="off" /><br /> Etternavn: <input type="text" name="nname" /><br /> Postnummer: <input type="text" name="plz" /><br /> Sted: <input type="text" name="ort" /> </form>
I dette eksempelet ville autofullføringen bli brukt på alle skjema feltene, siden verdien av autocomplete i åpnings form-elementet er satt til on. Unntaket her er bare feltet vname. Fordi autofullføringen er eksplicit deaktivert for dette feltet.
For at autofullføringen skal fungere, må denne funksjonen støttes av den aktuelle nettleseren og ikke være deaktivert. I tillegg vises bare verdier i forslagslisten som tidligere har blitt skrevet inn minst en gang.
For å faktisk kunne påvirke verdiene i forslagslisten, ble datalist-elementet introdusert i HTML5. Dette elementet har ingen synlig utgang i nettleseren. Ved hjelp av de underordnede option-elementene kan verdiene for forslagslistene defineres. Et eksempel:
<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>
Ved hjelp av list-attributtet til input-elementet blir en logisk tilknytning opprettet mellom inndatafeltet og datalist-elementet. For å oppnå dette må samme verdier brukes for list og for id-attributtet til datalist-elementet.
Sett fokus
Et skjemafelt kan automatisk få fokus tildelt når siden blir lastet inn. En slik funksjon er kjent for eksempel fra startsiden til Google. Når denne siden lastes, kan man umiddelbart skrive søkeordet uten å måtte sette markøren manuelt i søke-/inntastefeltet først.
I HTML5 finnes det autofocus-attributtet for slike tilfeller. Dette attributtet sørger for at skjemafeltet som er utstyrt med det, automatisk får fokus ved lasting av siden.
Et eksempel:
<form> <input name="suchfeld" autofocus="autofocus" /> <input type="submit" value="Suche" /> </form>
Nettlesere som ikke kjenner igjen autofocus-attributtet, ignorerer det enkelt. Dette ignoreringen har ingen negative konsekvenser. (Selv om feltet da selvfølgelig ikke vil ha fokus).
Valider inndata
Tidligere var det ikke mulig å validere skjemainndata kun med HTML-verktøy. Hvis man for eksempel ville sjekke om en bruker faktisk skrev inn en e-postadresse i et inntastingsfelt, måtte man vanligvis ty til JavaScript eller PHP. Slike "kunster" er ikke lenger nødvendig i HTML5. Fordi fra nå av har HTML en gyldighets-API. Og denne har mye å by på. Med veldig lite innsats kan skjemainndata nå valideres.
HTML5 har noen regler som fastsetter på hvilken måte feltene skal valideres. For eksempel vil inntastingsfelt av typen email bli validert for å sjekke om en syntaktisk korrekt e-postadresse er skrevet inn.
• url – Validerer URL
• email – Validerer e-postadresse
• range – Validerer flyttall
• number – Validerer flyttall
For å markere et felt som obligatorisk, tildeles det required-attributtet.
<input id="vname" name="vname" type="text" required="required" />
Et felt som er merket med dette, må fylles ut og kan derfor ikke være tomt.
Men vær oppmerksom på: For at feltene skal valideres, må visse betingelser være oppfylt.
• Elementet må tildeles attributtet name.
• Elementet må være innenfor et form-element, det vil si det må være i et HTML-skjema. Alternativt kan forbindelsen til skjemaet også etableres via attributtet form.
• Elementet kan ikke ha attributtene readonly eller disabled.
Så en riktig bruk ville se slik ut:
<form action="form.php">
<input id="vname" name="vname" type="text" required="required" />
<input type="submit" />
</form>
Her vil nettleseren sjekke om feltet er fylt ut. Hvis feltet er tomt og du likevel prøver å sende skjemaet, bør nettleseren nå gi en feilmelding.
I løpet av denne rekken er det allerede blitt pekt på formularfelttypene email, range, number, tel og url. Disse feltene blir ikke bare sjekket for om de inneholder en verdi, men også om den angitte verdien er korrekt.
<form action="form.php">
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Ved felt av typen email vil det for eksempel bli sjekket om den angitte verdien faktisk er en syntaktisk korrekt e-postadresse. Hvis ikke, vil nettleseren gi en feilmelding.
Nettleserne er ansvarlige for å vise feilmeldingen.
Felt ikke valideres automatisk
Ikke i alle tilfeller er det ønskelig med automatisk validering av inndataene. Hvis du vil hindre validering av hele skjemaet, kan du tilordne attributtet novalidate til den innledende form-elementet.
<form action="form.php" novalidate>
<input id="email" name="email" type="email" />
<input type="submit" />
</form>
Alternativt kan attributtet formnovalidate legges til en Send-knapp. Dette er for eksempel interessant når du tilbyr en knapp for å midlertidig lagre skjemaet parallelt med en Send-knapp.
<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="Speichern" />
<input type="submit"
formnovalidate="formnovalidate" value="Ausloggen" />
</form>
I dette tilfellet vil skjemaet bare bli validert via den første Send-knappen. De to andre er for lagring og utlogging. Validering er ikke nødvendig i disse tilfellene.
