Selv om HTML5-skjemaene har langt flere funksjoner enn sine forgjengere, er de like enkle å definere.
HTML5 tilbyr faktisk veldig mange nye felttyper. Støtten fra moderne nettlesere er allerede relativt god. Uansett vil jeg her bare presentere de felttypene som er praktisk brukbare.
Fargevelger
Du kan gi besøkende muligheten til å velge en farge.
Når du klikker på et slikt felt, åpnes en typisk fargevelger.
Her kan du velge ønsket farge. En slik fargevelger defineres med <input type="color" />.
Velg din favorittfarge: <input type="color" name="lf" />
Det må alltid tildeles en verdi til feltet. Mangler denne eller er ugyldig, blir automatisk #000 (altså svart) antatt.
Dato og klokkeslett
I HTML5 er det mange nye funksjoner når det gjelder datofelt og klokkeslettfelt. Disse felttypene har faktisk mye å by på. Tenk for eksempel på hvor mange skritt som er nødvendige når du vil tilby besøkende et datovelgerfelt. Vanligvis er det ingenting å gjøre uten JavaScript (eller Flash). Takket være HTML5 blir dette mye enklere nå. Her trenger du bare å definere et inntastingsfelt av typen date.
<input type="date" />
For visning og implementering av kalenderen er det kun nettleseren som er ansvarlig. Nettleserne skal vise en passende widget for å vise kalenderen. I Google Chrome ser en applikasjon slik ut:
Ved å bruke date defineres en kalender som brukerne kan velge ønsket dato fra. Etter valget blir datoen automatisk overført til tekstfeltet.
Det er like enkelt å opprette et klokkeslettfelt. Du kan bruke et felt av typen time.
<input type="time" />
Ved å bruke time vil nettleserne vise kontroller for å velge klokkeslett.
Det fungerer tilsvarende enkelt med week. Dette viser et felt for å velge uken.
<input type="week" />
Du kan også vise et månedsfelt.
<input type="month" />
Begge felttypene viser kontroller som lar deg justere ønskede innstillinger.
Mens time og date tillater bare valg av dato eller klokkeslett, tillater datetime og datetime-local en kombinasjon av begge varianter.
Med datetime vises et datofelt og et felt for valg av klokkeslett ved siden av hverandre. (datetime støttes for øyeblikket bare av Safari og Opera).
Det har allerede blitt nevnt at skjemafeltene som er presentert i denne delen for øyeblikket ikke støttes av alle nettlesere. Hvis du likevel ønsker å bruke dem, kan du ty til tilsvarende JavaScript-løsninger. De store JavaScript-rammeverkene som jQuery og Dojo tilbyr passende skript. Med jQuery UI vil det se slik ut:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Da kan du være trygg selv om nettleseren din ikke støtter den klassiske date.
Felter for tall
Med number tilbys et felt som er spesielt ment for inntasting av tall.
I det enkleste tilfellet ser definisjonen av et number-felt ut som følger:
<input type="number" />
Tallene kan skrives inn i slike felt på to måter:
• via tastaturet
• via kontroll-elementer
Ved å spesifisere ekstra attributter kannumber-felt beskrives enda mer detaljert. Først av alt er det de to attributtene min og max, som kan brukes til å bestemme verdiområdene for feltene.
• min – minste mulige verdi
• max – største mulige verdi
Disse to attributtene gjelder imidlertid bare for nettleseren kontroller. Manuelle inndatavalg fra brukere via tastaturet påvirkes ikke av dette.
Både heltall og desimaltall kan tildeles begge attributtene.
Ved hjelp av attributtetstepkan trinnvis angis som skal følges av nettleserkontrollene.
<input type="number" min="0" max="8" step="2" />
I dette tilfellet kan du derfor bare velge verdiene0,2,4, 6 og8 via nettleserkontroller.
Skyvekontroller
Feltene av typenrange tillater valg av en verdi innenfor et definert verdiområde.
Nettleserne tolker områdefeltet via en skyvekontroll.
<input type="range" min="0" max="10" step="2" value="6">
Den minste mulige verdien angis ved hjelp av min-attributtet.maxbeskriver den største verdien. Hvis de to attributtene min og max mangler, antar nettleserne verdiene 0 og100.
Ved å bruke stepkan du definere trinnrekkefølgen.
Søkefelt opprette
search har først og fremst ingen funksjon. Tvert imot, denne felttypen skal sees som et tillegg til det klassiske tekstinndatafeltet. Hensikten med søkefeltene er bare å visuelt skille seg fra vanlige tekstfelt. Vanligvis skal nettleserne ta seg av visningen av søkefeltene.
<input type="search" />
Hvordan dette til slutt implementeres, er opp til produsentene. En god kombinasjon er å legge tilresults-attributtet.
<input type="search" results="5" placeholder="Søk..." />
Ved å bruke results bestemmes hvor mange av de forrige søkeinnleggene som skal vises i feltet.
Men vær forsiktig: results-attributtet er ikke en del av HTML5-spesifikasjonen.
