<form> og <input> Introduktion - HTML

Lær at bruge de nye HTML5 attributter til <form> og <input> til at lave formularer

Introduktion

HTML5 giver nye muligheder til de allerede eksisterende tags <form> og <input> som bruges til at lave formularer.

Det gode ved de nye input typer ("email", "url", "number", osv) er at du kan bruge dem allerede nu uden ulempe i ældre browsere.
Ældre browsere som ikke kender typerne vil vise dem som type "text" og dermed stadig virke.
De er bare mere smarte i nye browsere som forstår de nye typer.

Specifikationerne kan ses hos w3.org og whatwg.org.

<FORM> OG <INPUT> DEMO

Browserunderstøttelse af nye formular koder

Browser Typer og tags Attributter JavaScript
Firefox logo
Firefox 28.0
<input type="email">
<input type="url">
<input type="tel">
<input type="search">
<input type="range">
<input type="color">
8
<datalist>
<input pattern>
<input autofocus>
<input placeholder>
<textarea placeholder>
input.stepUp() 4
input.stepDown() 4
form.checkValidity()
input.setCustomValidity()
input.validity()
input.indeterminate
Opera logo
Opera 12.14
<input type="email">
<input type="url">
<input type="tel">
<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="date">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="month">
<input type="week">
<datalist>
<input pattern>
<input autofocus>
3
<input placeholder>
<textarea placeholder>
input.stepUp()
input.stepDown()
form.checkValidity()
input.setCustomValidity()
input.validity()
input.indeterminate
Safari logo
Safari 5.1.7
<input type="email">
<input type="url">
<input type="tel">
<input type="search">
<input type="number">
<input type="range">
<input type="color">
1
<datalist>
1
2
<input pattern> 1
<input autofocus>
<input placeholder>
<textarea placeholder>
input.stepUp()
input.stepDown()
form.checkValidity()
input.setCustomValidity() 1
input.validity()
input.indeterminate 1
Chrome logo
Chrome 25.0.1364.172 m
<input type="email">
<input type="url">
<input type="tel">
<input type="search">
<input type="number">
<input type="range">
<input type="color">
<input type="date">
<input type="time">
<input type="datetime-local"> (ny)
<input type="month"> (ny)
<input type="week"> (ny)
<datalist>
<input pattern>
<input autofocus>
<input placeholder>
<textarea placeholder>
input.stepUp()
input.stepDown()
form.checkValidity()
input.setCustomValidity()
input.validity()
input.indeterminate (ny) 7
Internet Explorer logo
Internet Explorer 10.0.9200.16521
<input type="email">
<input type="url">
<input type="tel">
<input type="search">
<input type="number">
<input type="range">
<datalist>
<input pattern>
<input autofocus>
<input placeholder>
<textarea placeholder>
input.stepUp() 6
input.stepDown() 6
form.checkValidity()
input.setCustomValidity()
input.validity()
input.indeterminate
Alle tests er udført på Windows 7 (64-bit)


Nogle browsere understøtter kun ting delvist. For eksempel kan en browser delvist understøtte <input type="datetime"> hvilket vil sige at browseren kan vise datoen i feltet men der er ingen pop-op-datovælger som der skal være hvis browseren understøttet det fuldt.

1 Safari 5.1.7 påstår i JavaScript at understøtte disse ting. Men det gør den ikke eller kun delvist. Der kommer for eksempel ingen pop-op-farve/datovælger. Ved "color" er der bare hvad der ligner et "text" felt og ved tid/dato typerne er der en tekst streg og man kan ændre dataene med pil op/ned som ved "number" typen. Browseren ser ikke ud til at ville validere en formular overhovedet. Det er lidt svært at vide helt hvad browseren understøtter da det ene forudsætter det andet.

2 Input typerne date, time, datetime, datetime-local, month, week er kun delvist understøttet. Det vil sige de vise som et number felt. Der er ingen pop-op-datovælger.

3 Virker ikke så godt. Hvis man indlæser siden så får feltet fokus men genindlæses siden så får feltet ikke altid fokus.

4 stepUp() og stepDown() giver fejlen InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable selvom browsertest viser at begge er funktioner.

5 datalist virker delvist. Virker sammen med input type url men ikke input type color.

6 Selvom stepUp() og stepDown() er funktioner virker de ikke. stepUp() og stepDown() uden parameter gives fejlen "SCRIPT5022: InvalidStateError". stepUp(4) og stepDown(4) med parameter giver ikke fejl men virker ikke.

7 Jeg kan godt nok ikke se det virker. Checkbox ser bare u-valgte ud når den er sat til indeterminate

8 Kan slås til i about:config?filter=dom.forms.color. Virker ikke så godt endnu.

Screenshots

Her er nogle screenshots så du kan se hvordan de nye <input> typer og andre formular ting ser ud i forskellige browsere.


<input type="email">

Opera.
email opera

Safari.
email safari

Internet Explorer 10.0.9200.16438 Pre-Release.
email Internet Explorer 10.0.9200.16438 Pre-Release

Ligner <input type="text">.
Det smarte kommer først når man skriver noget og forsøger at sende formularen.


<input type="url">

Opera.
url opera

Safari.
url safari

Ligner <input type="text">.
Det smarte kommer først når man skriver noget og forsøger at sende formularen.


<input type="number">

Opera.
number opera

Safari.
number safari

Værdien i feltet kan ændres ved at klikke på pilene, scrolle med musehjulet eller ved at taste og på tastaturet mens feltet har fokus.


<input type="range">

Firefox.
range Firefox

Opera.
range opera

Opera. Ved at ændre højden med CSS kan forskyderen blive lodret.
range safari

Safari.
range safari

Internet Explorer 10.0.9200.16521.
(Total fucked up standard udseende. 60 pixels høj men det grafiske fylder kun 11 pixels)
range Internet Explorer 10.0.9200.16521


<input type="color">

Firefox.
Klikker man på farven vises systemets indbyggede farvevælger.
color Firefox

Opera.
color opera

Chrome.
Klikker man på knappen vises systemets indbyggede farvevælger.
color chrome

Vælges farven eller knappen "Other..." kan man vælge farve med systemets indbyggede farvevælger.

Her ses den indbyggede farvevælger i Windows.
windows farvevælger

Her ses den indbyggede farvevælger i Linux Mint.
Linux mint farvevælger


<input type="date">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="month">
<input type="week">

Opera ("time").
time opera

Opera ("date").
date opera

Safari ("datetime") kun delvist understøttede.
datetime safari

Safari ("week") kun delvist understøttede.
week safari

Chrome ("time").
time chrome

Chrome ("date").
date chrome


<input type="search">

Safari ("search") tomt felt.
search safari

Safari ("search") udfyldt felt.
search safari

Krydset (x) der dukker op når man skriver i feltet rydder feltet hvis man klikker på det.


<input list="x"> med <datalist id="x">

Firefox.
Firefox

Opera.
opera

Opera <input type="color"> med <datalist>.
opera color datalist

Chrome <input type="color"> med <datalist>.
chrome color datalist


<keygen>

Firefox.
Firefox keygen dropdown liste

Firefox når man sender en formular med <keygen>.
generating a private key Firefox screenshot

I Opera kan man vælge mange tal. Jo højere tal jo længere tid tager det at lave nøglen og vælger man de højeste kan det se ud som om browseren er frosset fordi det tager så lang tid at generer nøglen.
opera keygen dropdown liste

Chrome.
chrome keygen dropdown liste

Automatisk tilpasning af skærmtastatur

På håndholdte computere/telefoner med små trykskærme er der måske ikke så meget plads til skærmtastaturet.
Derfor vises et begrænset antal taster.

Med de nye input typer kan browseren automatisk tilpasse skærmtastaturet så relevante taster vises.

Sådan her kan tastaturet normalt se ud.
Firefox OS tastatur

Ved <input type="email"> kan @ . vises som knapper så det er lettere at indtaste en email adresse.
Firefox OS tastatur

Ved <input type="url"> kan : / . .com vises som knapper så det lettere at indtaste en URL adresse.
Firefox OS tastatur

Ved <input type="number"> kan 1 2 3 4 5 6 7 8 9 0 og , . vises som knapper så det er lettere at indtaste tal.
Firefox OS tastatur

Ved dato typer som <input type="date"> kan der vises nogle drejehjul så det er lettere at vælge en dato.
Firefox OS tastatur

Ved tids typer som <input type="time"> kan der vises nogle drejehjul så det er lettere at vælge klokken.
Firefox OS tastatur

Næste side

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.