HTML-lomakkeen elementit

Tämä luku kuvaa kaikkia HTML-lomakkeen elementtejä.

<input> elementti

Tärkeimmät lomakkeen elementit ovat <input> elementti.

<input> elementti eri type Atribuutit voivat muuttua useaan muotoon.

Huomautus:Seuraavassa luvussa käsitellään kaikkia HTML-syöttötyyppejä.

<select> elementti (lajitteluvalikko)

<select> Elementti määritteleeLajitteluvalikko:

Esimerkki

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

Kokeile itse

<option> Elementti määrittelee valittavat vaihtoehdot.

Luettelo näyttää yleensä ensimmäisen vaihtoehdon valituksi.

Voit määrittää ennakkovalinnan lisäämällä selected-ominaisuuden.

Esimerkki

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

Kokeile itse

<textarea> elementti

<textarea> Elementti määrittelee usearivuisen syöttökentän (Tekstikenttä）：

Esimerkki

<textarea name="message" rows="10" cols="30">
Kissa leikki puutarhassa.
</textarea>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa seuraavasti:

Kissa leikki puutarhassa.

<button>-elementti

<button> Elementti määrittelee klikattavanPainike:

Esimerkki

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Kokeile itse

Yllä oleva HTML-koodi näyttää selaimessa seuraavasti:

HTML5:n lomakkeen elementit

HTML5 lisää seuraavat lomakkeen elementit:

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

Huomautus:Oletusarvoisesti selaimet eivät näytä tuntemattomia elementtejä. Uudet elementit eivät vahingoita sivua.

HTML5:n <datalist>-elementti

<datalist> Elementti määrittelee <input>-elementin etukäteen määritetyt vaihtoehdot.

Käyttäjä näkee etukäteen määritetyt vaihtoehdot pudotuslistana heidän syöttäessään tietoja.

<input>-elementin list Ominaisuus täytyy viitata <datalist>-elementtiin id Ominaisuudet.

Esimerkki

Aseta <input>-elementin etukäteen määritetyt arvot <datalist>-elementin avulla:

<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>

Kokeile itse