forms!

vanliga element i html-formulär.

<input type=text value=text> Standard-textfält.
<input type=password value=password>
<input type=submit value=send> Knapp för att skicka formuläret.
<button type=submit>send</button> En knapp precis som ovan för att skicka formuläret. Fungerar inte så bra i Internet Explorer dock.
<input type=checkbox checked>
<input type=checkbox>

<input type=radio name=radio1 checked>
<input type=radio name=radio1>
Radio-button används för att välja ett alternativ. Grupperas med name-attributet.
<input type=file> Välj en fil för uppladdning eller liknande.
<input type=image alt=submit> En bild som submit-knapp.
<input type=reset value=reset> Återställer formuläret till default-värdena.
<input type=button value=button> En knapp. Anropa en funktion i ett script eller liknande, skickar inte formuläret.
<input type=hidden value=invisible> Gömd data som skickas med formuläret.
<select name=select>
<option value=ett>ett
<option value=två>två
<select>
En drop-down lista där man väljer värdet.
<select multiple name=select>
<option value=ett>ett
<option value=två>två
<select>
En lista där man kan välja flera värden.
<textarea></textarea> Ett lite större fält än vanliga text-fältet

html5 forms

några av de nya funktionerna i html5

<input type=text placeholder=text> Text som syns i fältet tills det får fokus.
<input type=text list=kurs>
<datalist id=kurs>
<option value=htmlphp>
<option value=oophp>
<option value=dbwebb1>
<option value=dbwebb2>
</datalist>
En input med autocomplete från en lista som anges.
<input type=text autofocus> Ger fältet focus när sidan renderas.
<input type=color> Välj en färg.
<input type=date> Välj datum. Kan även vara datetime, time, week, month eller year.
<input type=number min=0 max=100> Nummer med max och min-värden.
<input type=range step=5 min=0 max=100 name=range1> En slider för val av värde.
<output onforminput="value=range1.value"></output> Ovanstående ranges värde
<progress value=50 max=100>50</progress> 50 En progress-bar som kan användas för at visa tidsförlopp eller liknande. Bra med JavaScript i vissa fall.
<meter value=80 max=100 min=0>80</meter> 80 Mycket lik progress men används för kända intervaller till exempel betygsättning.
<input type=search> Ett sökfält.
<input type=tel> Skriv in ett telefonnummer.
<input type=email> Skriv in en email-adress.
<input type=url> Ange en url.
<input multiple type=file> Ange flera filer för uppladdning.

html5 forms validation

validera vad som finns i fälten och ange vilka som måste fyllas i

<input pattern="[a-z]{4}[0-9]{2}" name=akronym title="En students akronym består av fyra bokstäver följt av två siffror."> Ett input-fält som har ett pattern som säger att fältet måste innehålla fyra tecken följt av två siffror om det innehåller något.
<input pattern="[a-z]{4}[0-9]{2}" name=akronym title="En students akronym består av fyra bokstäver följt av två siffror." required> Ett input-fält som har ett pattern som säger att fältet måste innehålla fyra tecken följt av två siffror. Notera att det övre exemplet kan skickas iväg utan något innehåll.