<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.
Koden ovenfor giver følgende resultat i din browser

Her ses hvordan <input type="url"> bruges.
Koden ovenfor giver følgende resultat i din browser

Her ses hvordan <input type="tel"> bruges.
Koden ovenfor giver følgende resultat i din browser

Her ses hvordan <input type="search"> bruges.
Koden ovenfor giver følgende resultat i din browser

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).
Koden ovenfor giver følgende resultat i din browser

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 slider 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.
Koden ovenfor giver følgende resultat i din browser
Tal med slider ("range") :



Her ses hvordan <input type="color"> bruges.
Når brugeren har valgt en farve i farvevælgeren sættes værdien til et 6 cifret tal med et #-tegn foran.
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 tal værdi eller bruge systemets indbyggede farvevælger.
Koden ovenfor giver følgende resultat i din browser
Farvevælger ("color") :



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.
Koden ovenfor giver følgende resultat i din browser
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


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.
Koden ovenfor giver følgende resultat i din browser

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>.
Koden ovenfor giver følgende resultat i din browser


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.
Koden ovenfor giver følgende resultat i din browser
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.
Koden ovenfor giver følgende resultat i din browser
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.
Koden ovenfor giver følgende resultat i din browser
Venstre Højre

Her er <datalist> brugt sammen med "date" typen.
Koden ovenfor giver følgende resultat i din browser

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>.
Koden ovenfor giver følgende resultat i din browser

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.
Koden ovenfor giver følgende resultat i din browser

Spellcheck

Hvis browseren har stavekontrol slået til kan der for eksempel ses en prikket rød linie 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.
Koden ovenfor giver følgende resultat i din browser

Next page

Vote
0

Note : I have changed the voting-system, so instead of each page having a rating between 1 and 5, now 1 point is added og removed depending on if its the up-button or down-button that is pressed. I have move the votes from the old system to the new system.
Search
Quick links
Shows the websites menu with images so its easier to understand what the pages are about Show the latest news from the website Write a message to me making the website Introduction to the website Roll the dice and visit a random page on the website Radio streaming TV streaming GetUserMedia (Webcam and microphone) WebGL (3D) <canvas> + WebGL demoer Fullscreen Geolocation CSS multi-column Test your browser for support of the different web technologies i use on the website Links Soundboard Kat adventure ½ Educational videos for making websites HTML5 templates you can use as a starting point when creating HTML5 pages front the scratch
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 Sunday 21. September 2014