Knappar för val och skicka


Kryssrutor

Kryssrutor (eller flervalsrutor) används när det ska vara möjligt att markera flera alternativ. Rutorna skapas med elementet <input /> när attributet type får värdet "checkbox". Attributet checked (med värdet "checked") ger förmarkerade kryssrutor.

Tänk på att alla kryssrutor som tillhör samma fråga, måste ha samma värde till name.

<h2>Välj extra tillbehör</h2>
<p>
<input type="checkbox" name="xtra" value="snore" checked="checked" />
Skosnören<br />
<input type="checkbox" name="xtra" value="sulor" /> Sulor<br />
<input type="checkbox" name="xtra" value="skokram" /> Skokräm
</p>

Runda alternativknappar

Runda alternativknappar används när endast ett av flera alternativ ska kunna markeras. De skapas med elementet <input /> när attributet type får värdet "radio". Här ska attributet checked (med värdet "checked") alltid användas i ett av alternativen.

<h2>Välj färg</h2>
<p><input type="radio" name="farg" value="vit" checked="checked" />
Vit<br />
<input type="radio" name="farg" value="beige" /> Beige<br />
<input type="radio" name="farg" value="brun" /> Brun<br />
<input type="radio" name="farg" value="svart" /> Svart</p>

Knappar för att skicka och återställa

Alla formulär har en knapp som användaren trycker på för att skicka eller låta behandla det som fyllts i. Ibland används också knappar för att tömma eller återställa formulär. Då kan den som skrivit i formuläret börja om utan att behöva sudda all text som matats in.

Knappar för att skicka och återställa formulär skapas med elementet <input />. Skicka-knappen ska ha värdet "submit" till attributet type, medan återställningsknappen har värdet "reset".

På knapparna skrivs en standardtext som kan variera i olika webbläsare. Du kan dock bestämma själv vilken etikett knappen ska ha genom att sätta en valfri text till attributet value.

<p>
<input type="submit" value="Skicka" />
<input type="reset" value="Rensa" />
</p>

OBS! Formulärdelarna kan även ställas upp med hjälp av en tabell. Då är det lättare att få snygga och jämna formulär. Kom bara ihåg att formulärelementet ska omsluta tabellelementet.