<form> og <input> Tag

Tag og attributter

Opera er bedst til at vise de nye input typer. Så hvis du vil se dem rigtigt så brug Opera.

Her ses hvordan <input type="email"> bruges.

Her ses hvordan <input type="url"> bruges.

Her ses hvordan <input type="tel"> bruges.

Her ses hvordan <input type="search"> bruges.

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).

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 borset 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.

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.

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.

Required

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.


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.

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>.

Autofocus

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



Det kan for eksempel bruges på en login 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.
Opera.

Chrome.

Firefox.

Internet explorer 10.0.9200.16438 Pre-Release.

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.
Når input feltet har fokus og man trykker på feltet dukker en dropdown liste frem med forslag.
Ved at taste ▲ og ▼ på tasteturet 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.

Her er <datalist> brugt sammen med "date" typen.

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>.

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åes 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.

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.

Specifikation

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

Næste side

Din kommentar