HTML-lomakkeen elementit

Tämä luku kuvaa kaikkia HTML:n lomakkeen elementtejä.

<input> elementti

Tärkein lomakeelementti on <input> elementti.

<input> elementti määrittää eri syöttötyypit type Ominaisuudet voivat muuttua useisiin muotoihin.

Huomautus:Seuraavassa luvussa käsitellään kaikki HTML:n syöttötyypit.

<select> elementti (laskettu lista)

<select> Elementti määrittääLaskettu lista:

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äärittää valittavat vaihtoehdot.

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

Voit määrittää etukäteen valitun vaihtoehdon lisäämällä selected-ominaisuuden.

Esimerkki

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

Kokeile itse!

<textarea> elementti

<textarea> Elementti määrittää 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äkyy 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äkyy selaimessa seuraavasti:

HTML5:n lomakkeen elementit

HTML5 lisää seuraavat lomakkeen elementit:

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

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

HTML5:n <datalist>-elementti

<datalist> Elementti määrittelee <input>-elementin ennalta määritetyn vaihtoehto-listan.

Käyttäjä näkee ennalta määritetyt vaihtoehdot pudotuslistana, kun hän syöttää tietoja.

<input>-elementin list Ominaisuus on pakollinen ja sen on viitattava <datalist>-elementtiin id Ominaisuudet.

Esimerkki

Asetetaan <input>-elementin ennalta 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!