Selvom HTML5-formularer har langt flere funktioner end deres forgængere, er de lige så lette at definere.
HTML5 tilbyder faktisk mange nye felttyper. Understøttelsen i de nuværende browsere er allerede relativt god. Ikke desto mindre vil jeg kun præsentere jer for felttyper, der rent faktisk er praktisk anvendelige på dette sted.
Farvevælger
Du kan give dine besøgende mulighed for at vælge en farve.
Når man klikker på sådan et felt, åbnes en typisk farvevælger.
Her kan man vælge den ønskede farve. Sådan defineres en farvevælger: <input type="color" />.
Vælg din yndlingsfarve: <input type="color" name="lf" />
Feltet skal altid tildeles en værdi. Hvis værdien mangler eller er ugyldig, antages automatisk #000 (altså sort).
Dato og tid
Især med hensyn til felttyper til dato- og tidsangivelser er der mange nyheder i HTML5. Og disse felttyper er faktisk ret avancerede. Overvej f.eks., hvilke skridt der normalt er nødvendige, hvis man vil tilbyde sine besøgende et datoindtastningsfelt. Normalt er det umuligt at gøre dette uden JavaScript (eller Flash). Takket være HTML5 er det nu meget nemmere. Her skal man blot definere et indtastningsfelt af typen date.
<input type="date" />
Browseren er udelukkende ansvarlig for visningen og implementeringen af kalenderen. Browserne skal vise en passende widget til visning af kalenderen. Sådan ser det ud i Google Chrome:
Ved brug af date defineres en kalender, hvor brugerne kan vælge den ønskede dato. Datoen overføres automatisk til tekstfeltet efter valget.
Lige så nemt er det at oprette et felt til valg af tid. Hertil bruges et felt af typen time.
<input type="time" />
Med time viser browserne kontrolknapper til valg af klokkeslæt.
Lignende i enkeltheden er week, som viser et felt til valg af ugen.
<input type="week" />
Derudover kan man lade et månedsfelt vise.
<input type="month" />
Begge felttyper viser kontrolknapper, der gør det muligt at indstille de ønskede oplysninger.
Mens time og date kun tillader valg af enten dato eller klokkeslæt, tillader datetime og datetime-local en kombination af begge dele.
Med datetime vises et datoindtastningsfelt og et felt til valg af klokkeslæt ved siden af hinanden. (datetime understøttes i øjeblikket kun af Safari og Opera).
Det blev allerede antydet, at de formularfelter, der præsenteres i dette afsnit, i øjeblikket ikke understøttes af alle browsere. Hvis man likevel ønsker at bruge dem, kan man ty til passende JavaScript-løsninger. De store JavaScript-rammer som jQuery og Dojo tilbyder egnede script. I jQuery UI ser det sådan ud:
<!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>På den måde er man på den sikre side, selv hvis browseren ikke understøtter det klassiske date.
Felter til tal
Med number tilbydes et felt, der specifikt er beregnet til indtastning af tal.
I den mest grundlæggende form ser definitionen af et number-felt sådan ud:
<input type="number" />
Tallene kan indtastes i sådanne felter på to måder:
• via tastaturet
• via kontrollementer
Ved at angive yderligere attributter kan number-felter beskrives endnu mere detaljeret. Først er der de to attributter min og max, hvorved værdiområderne for felterne kan bestemmes.
• min - den mindst mulige værdi
• max - den størst mulige værdi
Dog gælder disse to attributter kun for browserens kontrollementer. Brugernes manuelle indtastninger via tastaturet kan ikke påvirkes af disse.
Både attributter kan tildeles heltal og flydende kommatal.
Attributtet step bruges til at angive trinnet, som skal følges af browserens kontrollementer.
<input type="number" min="0" max="8" step="2" />
I dette tilfælde kunne man kun vælge værdierne 0, 2, 4, 6 og 8 via browserens kontrollementer.
Skydere
Felter af typen range tillader valg af en værdi inden for et defineret værdiområde.
Browsere fortolker range-felterne via en skyder.
<input type="range" min="0" max="10" step="2" value="6">
Den mindst mulige værdi angives via attributten min. max beskriver den størst mulige værdi. Mangler attributterne min og max, antager browserne værdierne 0 og 100.
Trinnet kan defineres via step.
Opret søgefelter
search har indledningsvis ingen funktion. I stedet skal denne felttype ses som et supplement til det klassiske tekstfelt. Formålet med search-felterne er blot at adskille dem visuelt fra almindelige tekstfelter. Normalt skal browserne stå for visningen af search-felterne.
<input type="search" />
Hvordan dette endelig implementeres, er op til producenterne. En god kombination er tilføjelsen af attributten results.
<input type="search" results="5" placeholder="Søg..." />
Med results bestemmes, hvor mange af de foregående søgninger der skal vises i feltet.
Men vær opmærksom: Attributten results er ikke en del af HTML5-specifikationen.
