HTML5 tutorial 6 – Formularer

I dette afsnit af min HTML5 tutorial skal vi kigge på formularer. 
Formularer bruges til at indtaste data og sende dem til en server, der så kan behandle dem. I HTML skal du angive udseendet af formularen, men selve funktionaliteten der aktiveres ved anvendelse af formularen må du vente med til du har lært PHP eller lign.
For at lave en formular i HTML, skal du bruge tagget <form>. Hvert element i formularen anvender tagget <input>. Lad os lige se et eksempel:

<form action="action.php" method="get">
  Fornavn:<br />
  <input type="text" name="firstname" /><br />
  Efternavn:<br />
  <input type="text" name="lastname" /><br />
<input type="submit" value="Indsend">
</form>

Dette er altså en formular med to tekstfelter – et til fornavn og et til efternavn. Herudover er der en knap med teksten “Indsend” på. Selve formularen peger på PHP scriptet action.php. Det er altså her dataene sendes hen når der klikkes på submit. I det PHP script skulle der så gerne stå hvad der skal ske med de data.
Under method er der her angivet “get”, men der kunne også have været anvendt “post”. Hvis du anvender GET, vil de data der bliver indtastet blive tilføjet til URL adressen action.php. F.eks.

action.php?firstname=Andreas&lastname=Andersen

Hvis du derimod bruger POST vil de ikke blive tilføjet til URL-adressen

De forskellige input-typer

Der findes mange forskellige input-typer du kan vælge imellem. Du har allerede stiftet bekendtskab med tekstfelt der ser således ud:

<input type="text" name="firstname" />

Og en knap der ser således ud:

<input type="submit" value="Indsend">

Bemærk at alle input-tags skal have en type-attribut der angiver hvilken type der er tale om og for andre end knappen en name-attribut hvor værdien gemmes når formularen sendes.
En valgmulighed kan angives med typen “radio”. I dette eksempel kan du for eksempel vælge kønnet. Bemærk at name skal være det samme, fordi der kun skal være én valgmulighed. Den der skal være krydset af i forvejen skal du skrive checked ved.

 <input type="radio" name="gender" value="male" checked> Mand<br />
 <input type="radio" name="gender" value="female"> Kvinde<br />
 <input type="radio" name="gender" value="other"> Anden

For at have et passwordfelt bruger du koden:

<input type="password" name="psw">

En reset-knap kan laves med koden:

 <input type="reset">

En checkbox kan laves med koden:

<input type="checkbox" name="vehicle1" value="Cykel"> Cykel

En farvevælger laves med:

<input type="color" name="favcolor">

En datovælger laves med:

<input type="date" name="bday">

Her kan du også med max=”” og min=”” angive en mindste- og højeste dato som kan vælges.

<input type="date" name="bday" max="1979-12-31">

Et tekstfelt der skal indeholde en e-mailadresse laves med:

<input type="email" name="email">

Med number kan der indtastes et tal:

<input type="number" name="quantity">

Og med month kan der vælges en måned og et år.

<input type="month" name="bdaymonth">

Med typen tel skal der indtastes et telefonnummer:

<input type="tel" name="usrtel">

Med time skal der indtastes et tidspunkt:

<input type="time" name="usr_time">

Med url skal der indtastes en url-adresse:

<input type="url" name="homepage">

Med week skal der vælges en uge:

<input type="week" name="week_year">

Som du kan se findes der masser af forskellige input-typer du kan vælge imellem. En del af dem er først kommet til med html version 5 (html5), og de er virkelig anvendelig til også at sikre at der kun indtastes lige nøjagtig den type data du ønsker.
I næste afsnit vil vi se nærmere på de tags du skal anvende for at knytte CSS til dine HTML tags.