Formulär element

De vanligaste som fungerar i alla webbläsare.

<input type='text' value=''> Vanligt textfält
<input type='password' value=''> Ett textfält för lösenord
<input type='email' value=''> Skriv in en email-adress.
<button type='button'>Gör något</button> En knapp för anrop av javascript som i sin tur utför något.
<input type='submit' value='Skicka'> Knapp för att skicka formuläret.
<button type='submit'>Skicka</button> En bättre knapp för att skicka formuläret. Till exempel kan du lätt placera en bild mellan button's start och stopp tagg.
<button type='reset'>Rensa</button> Rensa formuläret och sätt "default" värden.

<input type='checkbox'><br>
<input type='checkbox' checked>		 Checkbox:ar. Vill du ha en bock i lägg till checked. Alla kan bockas i.
<input type="radio" name="minradio" checked>
<input type="radio" name="minradio">		 "Radiobutton"-knappar används oftast för att välja ett alternativ. Sätt name-attributet till samma värde så bildar de en grupp där det enbart går att klicka i en knapp.
<textarea rows="5" cols="25"></textarea> Större textyta med flera rader. Ange rader och bredd med rows och cols.
<select name="minselect">
<option value="1">Ett</option>
<option value="2">Två</option>
</select>		 En "drop-down" lista där man väljer ett värde. Vill man kunna välja fler (håll ner ctrl+klicka) lägger du till attributet "multiple" i select-taggen.
<input type="file"> Välj en fil för uppladdning eller något annat liknande.
<input type="hidden" value="mittosynliga"> Gömd data som skickas med formuläret.
<input type="range" step="10" min="0" max="100"> En slider för val av värde. Tyvärr syns inte värdet automatiskt.
De två nedan är inte helt kompatibla med alla webbläsare. Men snart förhoppningsvis.
<input type="color"> Välj färg. ( IE, Safari ?)
<input type="number" min="0" max="100"> Nummer med max och min-värden.

attribut (framför allt till "input")

<input type="text"
value="Musse Pigg">		 Sätt ett startvärde i textrutan.
<input type="text"
name="fnamn">		 Det namn vi använder för att plocka ut texten ur textrutan när formuläret skickas.
<input type="text"
name ="fnamn"
placeholder="Förnamn">		 Text som syns i textrutan tills rutan får fokus.
<input type="text" autofocus> Textrutan får focus när sidan laddas in/om.
<input type="text" value="Skitstövel! Hahahaha!" readonly> Textrutan kan inte ändras.
<input type="text" disabled> Ej klickbar. Skickas inte med formuläret. Annat utseende.
<input type="text"
size="30">		 Sätter storlek på textrutan (antal tecken av genomsnittsstorlek i aktuell teckeninställning).
Bättre att använda stilmall och ställ in utseende i en klass.
<input type="text" maxlength="5"> Tar bara emot max 5 tecken i textrutan.
<input type="text" required> Måste fyllas innan formuläret skickas.
<input type="file" multiple> Om man vill välja fler filer. Fungerar även bra på "select"-elementet.
<input type="text"
title="Endast stora bokstäver">		 Allmänt attribut som är användbart.
Användning av reguljära uttryck för att godkänna en inmatning.
<input type="text"
pattern="[a-z]*"
title="Enbart små bokstäver">		 Kravet i det reguljära uttrycket ska vara uppfyllt innan formuläret skickas.
<input type="text"
pattern="[A-Öa-ö]{3}"
title="Endast 3 bokstäver">
<input type="text"
pattern="[0-9]{10}"
title="Endast 10 siffror">