HTML formulärelement

Detta kapitel beskriver alla HTML-formulärelement.

<input>-elementet

De viktigaste formulärelementen är <input> element.

<input>-elementet baseras på olika type Egenskaper kan förändras till flera former.

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

<select>-elementet (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 från alternativ.

Listor visar ofta det första alternativet som valt.

Du kan definiera fördefinierade alternativ genom att lägga till selected-egenskapen.

Exempel

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

Prova själv

<textarea>-elementet

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

Exempel

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

Prova själv

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

Katten spelade i trädgården.

<button>-elementet

<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ördefinierad alternativlista för <input>-elementet.

Användare kommer att se en rullgardinslista med fördefinierade 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>-element med fördefinierade 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