HTML Formulärelement

Detta kapitel beskriver alla HTML-formulärelement.

<input> element

Den viktigaste formulärelementet är <input> element.

<input> element baserat på olika type egenskaper kan variera i flera former.

Kommentar:Nästa kapitel förklarar alla HTML-inmatningstyper.

<select> element (rullgardin)

<select> Element definierarRullgardin:

Exempel

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Prova själv

<option> Element definierar att välja alternativ.

Listor visar ofta det första alternativet som valt.

Du kan definiera förinställda alternativ genom att lägga till selected-attributet.

Exempel

<option value="fiat" selected>Fiat</option>

Prova själv

<textarea> element

<textarea> Element definierar flerradigt inmatningsfält (Textfält）：

Exempel

<textarea name="message" rows="10" cols="30">
Katten lekte i trädgården.
</textarea>

Prova själv

Ovanstående HTML-kod visas i webbläsaren som:

Katten lekte i trädgården.

<button>-element

<button> Elementet definierar en klickbarKnapp:

Exempel

<button type="button" onclick="alert('Hello World!')">Klicka mig!</button>

Prova själv

Ovanstående HTML-kod visas i webbläsaren som:

HTML5 formulärelement

HTML5 har lagt till följande formulärelement:

  • <datalist>
  • <keygen>
  • <output>

Kommentar:Som standard visar inte webbläsaren okända element. Nya element kommer inte att förstöra din sida.

HTML5 <datalist>-element

<datalist> Elementet definierar en förinställd alternativlista för <input>-elementet.

Användare kommer att se en rullgardinslista med förinställda alternativ när de matar in data.

inmatningselementets list Egenskapen måste referera till <datalist>-elementets id Egenskaper.

Exempel

Genom att använda <datalist> definiera en <input>-elementets förinställda värden:

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">
</datalist> 
</form>

Prova själv