<form> og <input> Elementer - HTML

Lær at brug de nye HTML5 <input> typer og attributter til at lave formularer

Element og attributter

Her ses hvordan <input type="email"> bruges.
The result above have been created by the following code


Her ses hvordan <input type="url"> bruges.
The result above have been created by the following code


Her ses hvordan <input type="tel"> bruges.
The result above have been created by the following code


Her ses hvordan <input type="search"> bruges.
The result above have been created by the following code


Her ses hvordan <input type="number"> bruges.
Udover de normale attributter findes også min, max og step som alle er valgfrie.
Værdien kan være et heltal (24) eller kommatal (24.95).
Kommatal skal skrives med punktum (12.34) og ikke med komma (12,34).
The result above have been created by the following code


Her ses hvordan <input type="range"> bruges.
Udover de normale attributter findes også min, max og step som alle er valgfrie.
"range" typen er magen til "number" typen bortset fra den måde feltet vises i browseren.
"range" vises som en forskyderen man kan hive i med markøren for at vælge en værdi.
Værdien (tallet) vises ikke til brugeren.
Hvis man ønsker at vise værdien til brugeren kan man bruge JavaScript.
Tal med forskyder ("range") :


The result above have been created by the following code


Her ses hvordan <input type="color"> bruges.
Når brugeren har valgt en farve i farvevælgeren sættes værdien til et #-tegn efterfulgt af 6 tegn.
For eksempel #aa0000 for rød farve.
Ved at bruge <input type="color" list="x"> med <datalist id="x"> kan man vælge hvilke farver der skal vises i listen.
Brugeren kan også selv indtaste en værdi eller bruge systemets indbyggede farvevælger.
Farvevælger ("color") :


The result above have been created by the following code


Her ses hvordan følgende tid og dato vælgere bruges...
<input type="date">
<input type="time">
<input type="datetime">
<input type="datetime-local">
<input type="month">
<input type="week">
Udover de normale attributter findes også min, max og step som alle er valgfrie.
Vælg dato ("date") :
Eksempel : 2011-12-31



Vælg tid ("time") :
Eksempel : 23:59



Vælg dato og tid i UTC ("datetime") :
Eksempel : 2011-12-31T23:59:00Z


Vælg dato og tid ("datetime-local") :
Eksempel : 2011-12-31T23:59:00


Vælg måned ("month") :
Eksempel : 2011-12


Vælg uge ("week") :
Eksempel : 2011-W52


The result above have been created by the following code

required attribut

required attributten bruges hvis man kun vil tillade at formularen afsendes hvis bestemte felter er udfyldt.

Det kan for eksempel bruges hvis du har en formular på din hjemmeside hvor folk kan spørge dig om noget også har du jo kun mulighed for at svare dem hvis de husker at skrive deres email adresse.

Hvis brugeren forsøger at sende en formular med et tomt required felt kommer browseren med en besked.

Opera.
opera

Chrome.
chrome

required attributten kan bruges på alle <input> typerne undtagen hidden, image og knap typer som submit. Kan også bruges på <select> og <textarea>.

Hvis required attributten bruges på <select> så skal den første <option> have en tom værdi.
The result above have been created by the following code

Placeholder

Med placeholder attributten kan man vise en tekst så længe feltet er tomt og brugeren ikke har valgt det (eller der ikke er skrevet noget).
Det kan bruges til at hjælpe brugeren med at fortælle hvad der skal indtastes i feltet.

Når brugeren vælger feltet (eller skriver noget) går teksten væk.

placeholder attributten kan bruges på <input> og <textarea>.


The result above have been created by the following code

Autofocus

autofocus attributten giver automatisk fokus til et felt når siden indlæses.

INPUT AUTOFOCUS DEMO

Det kan for eksempel bruges på en log ind side hvor det eneste formål med siden er at man kan logge ind.

autofocus attributten kan bruges på alle <input> typer undtagen hidden. Kan også bruges på <select>, <textarea> og <button>.

Pattern og title

pattern attributten angiver hvilke tegn og hvor mange tegn det skal være tilladt at indtaste i et <input> felt ved at angive et regulært udtryk (i JavaScript RegEx format).

title attributten bruges til at informere brugeren om hvad der er tilladt at indtaste.
The result above have been created by the following code

Opera.
opera pattern og title
Chrome.
chrome pattern og title
Firefox.
Firefox pattern og title
Internet Explorer 10.0.9200.16438 Pre-Release.
Internet Explorer 10.0.9200.16438 Pre-Release pattern og title
Formularen kan dog godt sendes hvis feltet et tomt. For at undgå dette kan required attributten tilføjes.

List og datalist

list="x" attributten med <datalist id="x"> bruges til at give brugeren forslag til hvad der skal indtastes.
list attributten kan bruges på diverse <input> typer og forbindes med et <datalist> med en tilsvarende id attribut.
The result above have been created by the following code

Når input feltet har fokus og man trykker på feltet dukker en dropdown liste frem med forslag.
Ved at taste og på tastaturet kan man vælge en label på listen.

Skriver man for eksempel "net" så vises de label der starter med "net".

Her er <datalist> brugt sammen med "range" typen.
Det kunne for eksempel bruges til lettere at finde midten på en kontrol der skifte lyden mellem venstre og højre højtaler.
Venstre Højre
The result above have been created by the following code


Her er <datalist> brugt sammen med "date" typen.
The result above have been created by the following code

Form attributten

Med form attributten kan et element være tilknyttet en <form> selvom elementet står udenfor <form> og </form>.
form attributten kan bruges på <input>, <output>, <select>, <textarea>, <button>, <label>, <object> og <fieldset>.
The result above have been created by the following code

Formaction, formenctype, formmethod, formnovalidate og formtarget attributterne

formaction, formenctype, formmethod, formnovalidate og formtarget attributterne kan bruge i <input> og <button> til at overstyrer værdien der er sat i <form> for det pågældende element.

Her slås validering fra i et af formularens input felter.

Jeg syntes godt nok ikke jeg kan få det til at virke i nogen browsere endnu. Kan være det ikke er understøttet endnu ellers at jeg ikke forstår hvordan det skal bruges.
The result above have been created by the following code

Spellcheck

Hvis browseren har stavekontrol slået til kan der for eksempel ses en prikket rød linje under de ord som stavekontrollen ikke genkender i formularen.

Med spellcheck attributten kan man slå stavekontrol til og fra for hele forumularen eller for enkelte input felter.

Brugeren kan dog have slået stavekontrol helt fra i sin browser så stavekontrol slet ikke bruges ligemeget hvad spellcheck attributten er sat til.
The result above have been created by the following code

Step attributten

Væriden af step kan udover heltal og kommatal også være any.

Det ser ud til at det som standard ikke er tilladt at indtaste kommatal i et <input> element uden step attribut.

Hvis step attributten er sat til any er kommatal tilladt.
The result above have been created by the following code

Next page

Write your comment

Ask me anything
You can also write me directly at
Vote
Search
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.
Page information
Page was last updated Wednesday 29. July 2015