HTML formas ļauj lietotājiem ievadīt un nosūtīt datus — piemēram, reģistrācijas veidlapas, meklēšanas lauki, aptaujas, komentāri un citi interaktīvi elementi.

Formas pamati

Formu veido ar <form> tagu, norādot, uz kurieni dati tiks nosūtīti (action) un kādā veidā (method):

<form action="/apstrade.php" method="post">
<label for="vards">Vārds:</label>
<input type="text" id="vards" name="vards">
<button type="submit">Nosūtīt</button>
</form>

Metode GET pievieno datus URL adresei (piemēram, meklēšanai), bet POST nosūta datus slēptā veidā (piemēram, parolēm, veidlapām).

Label — ievades lauku apzīmējumi

<label> elements ir svarīgs gan lietojamībai, gan pieejamībai. Tas saista teksta apzīmējumu ar konkrētu ievades lauku, izmantojot for atribūtu, kas atbilst lauka id. Klikšķinot uz label teksta, tiek aktivizēts atbilstošais lauks.

Input tipi

HTML5 piedāvā daudzus <input> tipus dažādu datu ievadei:

<!-- Teksta lauks -->
<input type="text" name="vards" placeholder="Ievadi vārdu">

<!-- Parole -->
<input type="password" name="parole">

<!-- E-pasts (ar validāciju) -->
<input type="email" name="epasts" required>

<!-- Skaitlis -->
<input type="number" name="vecums" min="1" max="120">

<!-- Datums -->
<input type="date" name="datums">

<!-- Krāsa -->
<input type="color" name="krasa">

<!-- Diapazons (slīdnis) -->
<input type="range" name="skalums" min="0" max="100">

<!-- Faila augšupielāde -->
<input type="file" name="fails" accept="image/*">

<!-- Slēptais lauks -->
<input type="hidden" name="id" value="123">

Izvēles rūtiņas un radiopogas

<!-- Checkbox — var izvēlēties vairākus -->
<label><input type="checkbox" name="piekrītu"> Piekrītu noteikumiem</label>

<!-- Radio — var izvēlēties tikai vienu no grupas -->
<label><input type="radio" name="dzimums" value="v"> Vīrietis</label>
<label><input type="radio" name="dzimums" value="s"> Sieviete</label>

Select — nolaižamais saraksts

<label for="valsts">Valsts:</label>
<select id="valsts" name="valsts">
<option value="">Izvēlies valsti</option>
<option value="lv">Latvija</option>
<option value="lt">Lietuva</option>
<option value="ee">Igaunija</option>
</select>

Textarea — daudzrindu teksta lauks

<label for="komentars">Komentārs:</label>
<textarea id="komentars" name="komentars" rows="5" cols="40" placeholder="Raksti šeit..."></textarea>

Fieldset un legend

Ar <fieldset> un <legend> var grupēt saistītus formas laukus:

<fieldset>
<legend>Personīgā informācija</legend>
<label for="vards2">Vārds:</label>
<input type="text" id="vards2" name="vards">
<label for="epasts2">E-pasts:</label>
<input type="email" id="epasts2" name="epasts">
</fieldset>

Formu validācija

HTML5 piedāvā iebūvētu formu validāciju bez JavaScript:

  • required — lauks ir obligāts
  • minlength un maxlength — minimālais un maksimālais rakstzīmju skaits
  • min un max — skaitliskās vērtības robežas
  • pattern — regulārā izteiksme, kam jāatbilst ievadītajiem datiem
  • placeholder — piemēra teksts, kas redzams tukšā laukā

<input type="text" name="telefons" required
pattern="[0-9]{8}" placeholder="20000000"
title="Ievadi 8 ciparu tālruņa numuru">

Laboja mad, labots 1x