HTML5 ieviesa daudzus jaunus <input> lauku tipus un atribūtus, kas ļauj veidot interaktīvas formas ar iebūvētu validāciju — bez JavaScript. Pārlūkprogramma pati pārbauda datus, parāda piemērotus ievades rīkus mobilajās ierīcēs un neļauj iesniegt formu ar nepareiziem datiem.

Šajā rakstā apskatīsim visus modernos input tipus, validācijas atribūtus un labāko praksi formu veidošanā.

1. Modernie input tipi

HTML5 pievienoja daudzus specializētus input tipus papildus klasiskajiem text, password un checkbox. Katrs tips mobilajā ierīcē automātiski parāda piemērotu tastatūru.

E-pasts, URL, tālrunis

<label for="epasts">E-pasts</label>
<input type="email" id="epasts" name="epasts" required>
<!-- Automātiski pārbauda, vai ievadīts pareizs e-pasta formāts -->
<!-- Mobilajā ierīcē parādās tastatūra ar @ simbolu -->

<label for="lapa">Mājas lapa</label>
<input type="url" id="lapa" name="lapa" placeholder="https://piemers.lv">
<!-- Pārbauda URL formātu (jāsākas ar http:// vai https://) -->

<label for="talrunis">Tālrunis</label>
<input type="tel" id="talrunis" name="talrunis" pattern="[+]371[0-9]{8}">
<!-- tel tips parāda ciparu tastatūru, bet nepārbauda formātu -->
<!-- Formāta pārbaudei izmantojiet pattern atribūtu -->

Skaitlis, diapazons

<label for="daudzums">Daudzums</label>
<input type="number" id="daudzums" name="daudzums"
min="1" max="100" step="1" value="1">
<!-- Parāda ciparu ievadi ar + un - pogām -->
<!-- min, max un step ierobežo pieļaujamās vērtības -->

<label for="skalojums">Skaļums: <output id="skalojums-vertiba">50</output>%</label>
<input type="range" id="skalojums" name="skalojums"
min="0" max="100" step="5" value="50"
oninput="document.getElementById('skalojums-vertiba').textContent = this.value">
<!-- Parāda slīdni (slider) -->

Datums un laiks

<label for="datums">Datums</label>
<input type="date" id="datums" name="datums"
min="2025-01-01" max="2026-12-31">
<!-- Parāda kalendāra izvēlni -->

<label for="laiks">Laiks</label>
<input type="time" id="laiks" name="laiks">

<label for="datums-laiks">Datums un laiks</label>
<input type="datetime-local" id="datums-laiks" name="datums-laiks">

<label for="menesis">Mēnesis</label>
<input type="month" id="menesis" name="menesis">

<label for="nedela">Nedēļa</label>
<input type="week" id="nedela" name="nedela">

Krāsa, meklēšana, faili

<label for="krasa">Izvēlieties krāsu</label>
<input type="color" id="krasa" name="krasa" value="#4A90D9">
<!-- Parāda krāsu izvēlni -->

<label for="meklesana">Meklēt</label>
<input type="search" id="meklesana" name="q">
<!-- Līdzīgs text, bet parāda dzēšanas pogu un var saglabāt vēsturi -->

<label for="fails">Augšupielādēt failu</label>
<input type="file" id="fails" name="fails"
accept=".pdf,.doc,.docx"
multiple>
<!-- accept ierobežo pieļaujamos failu tipus -->
<!-- multiple ļauj izvēlēties vairākus failus -->

2. Iebūvētā validācija

HTML5 piedāvā vairākus atribūtus datu validācijai bez JavaScript:

Validācijas atribūti

Atribūts Apraksts Piemērs
required Lauks ir obligāts <input required>
minlength / maxlength Minimālais/maksimālais rakstzīmju skaits <input minlength="3" maxlength="50">
min / max Minimālā/maksimālā skaitliskā vērtība <input type="number" min="1" max="100">
pattern Regulārā izteiksme formāta pārbaudei <input pattern="[A-Z]{2}[0-9]{4}">
step Pieļaujamais solis skaitlim vai datumam <input type="number" step="0.01">

Pilns piemērs ar validāciju

<form action="/registracija" method="post">
<label for="lietotajvards">Lietotājvārds</label>
<input type="text" id="lietotajvards" name="lietotajvards"
required minlength="3" maxlength="20"
pattern="[a-zA-Z0-9_]+"
title="Tikai burti, cipari un apakšsvītra">

<label for="epasts">E-pasts</label>
<input type="email" id="epasts" name="epasts" required>

<label for="parole">Parole</label>
<input type="password" id="parole" name="parole"
required minlength="8"
pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}"
title="Vismaz 8 rakstzīmes, ar lielo burtu, mazo burtu un ciparu">

<label for="vecums">Vecums</label>
<input type="number" id="vecums" name="vecums"
min="13" max="120" required>

<label for="lapa">Mājas lapa (nav obligāta)</label>
<input type="url" id="lapa" name="lapa"
placeholder="https://piemers.lv">

<button type="submit">Reģistrēties</button>
</form>

Pārlūkprogramma automātiski pārbaudīs visus nosacījumus un parādīs kļūdas paziņojumu, ja dati neatbilst prasībām.

Title atribūts pattern laukos

Ja izmantojat pattern, vienmēr pievienojiet title atribūtu, kas paskaidro formātu cilvēkam saprotamā valodā. Šis teksts tiks parādīts kļūdas paziņojumā.

3. Datalist — ieteikumu saraksti

<datalist> elements ļauj piedāvāt ievades ieteikumus, saglabājot brīvas ievades iespēju:

<label for="valoda">Programmēšanas valoda</label>
<input type="text" id="valoda" name="valoda" list="valodas">
<datalist id="valodas">
<option value="JavaScript">
<option value="Python">
<option value="PHP">
<option value="Java">
<option value="C#">
<option value="Go">
<option value="Rust">
</datalist>

Atšķirība no <select>: <datalist> piedāvā ieteikumus, bet lietotājs var ievadīt jebkuru vērtību. <select> ierobežo izvēli tikai ar dotajām opcijām.

4. Output elements

<output> elements ir paredzēts aprēķinu vai darbību rezultātu attēlošanai:

<form oninput="rezultats.value = parseInt(a.value) + parseInt(b.value)">
<label>A: <input type="number" id="a" name="a" value="10"></label>
+
<label>B: <input type="number" id="b" name="b" value="20"></label>
=
<output name="rezultats" for="a b">30</output>
</form>

5. Formu stili ar CSS pseidoklasēm

CSS piedāvā pseidoklases, kas ļauj stilizēt formu laukus atkarībā no to validācijas statusa:

<style>
/* Derīgs lauks — zaļa apmale */
input:valid {
border-color: #27ae60;
}

/* Nederīgs lauks — sarkana apmale */
input:invalid {
border-color: #e74c3c;
}

/* Tikai pēc lietotāja mijiedarbības (izvairas no sarkanām apmalēm tukšā formā) */
input:user-invalid {
border-color: #e74c3c;
background: #fef0f0;
}

/* Obligāts lauks */
input:required {
border-left: 3px solid #e74c3c;
}

/* Neobligāts lauks */
input:optional {
border-left: 3px solid #95a5a6;
}

/* Atspējots lauks */
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}

/* Tikai lasāms lauks */
input:read-only {
background: #f0f0f0;
}

/* Placeholder redzams */
input:placeholder-shown {
font-style: italic;
}
</style>

Padoms: :user-invalid pseidoklase (atbalsta jaunākās pārlūkprogrammas) ir labāka par :invalid, jo tā aktivizējas tikai pēc lietotāja mijiedarbības — tukša obligāta forma neparādīsies kā kļūdaina.

6. Noderīgi formu atribūti

Atribūts Apraksts
autocomplete Kontrolē pārlūkprogrammas automātisko aizpildīšanu. Vērtības: name, email, tel, address-line1, new-password u.c.
autofocus Automātiski fokusē lauku, kad lapa ielādējas (lietojiet tikai vienam laukam)
placeholder Parāda pelēku tekstu tukšā laukā kā piemēru. Nav label aizstājējs!
disabled Atspējo lauku — dati netiek sūtīti ar formu
readonly Tikai lasāms — lietotājs nevar mainīt, bet dati tiek sūtīti
inputmode Norāda mobilo tastatūras veidu: numeric, decimal, tel, email, url
enterkeyhint Maina Enter taustiņa uzrakstu mobilajā tastatūrā: search, send, go, next

Autocomplete piemērs

<!-- Pārlūkprogramma automātiski piedāvās saglabātos datus -->
<input type="text" name="vards" autocomplete="given-name">
<input type="text" name="uzvards" autocomplete="family-name">
<input type="email" name="epasts" autocomplete="email">
<input type="tel" name="talrunis" autocomplete="tel">

<!-- Jaunai parolei — pārlūkprogramma piedāvās ģenerēt drošu paroli -->
<input type="password" name="parole" autocomplete="new-password">

<!-- Mobilajā ierīcē parādīs ciparu tastatūru -->
<input type="text" name="personas-kods" inputmode="numeric"
pattern="[0-9]{6}-[0-9]{5}">

7. Biežākās kļūdas formu veidošanā

  • Placeholder kā label — placeholder pazūd, kad lietotājs sāk rakstīt, un nav pieejams ekrāna lasītājiem
  • Nav validācijas servera pusē — HTML validāciju var apiet (izslēgt DevTools), tāpēc vienmēr pārbaudiet datus arī serverī
  • Nav <label> — lauki bez label ir nepieejami ekrāna lasītāju lietotājiem
  • Visi lauki ir type="text" — mobilajā ierīcē lietotājs nesaņem piemērotu tastatūru
  • Nav kļūdu paziņojumu — lietotājs nesaprot, kas jālabo
  • Pārāk gara forma vienā lapā — sadaliet ilgas formas vairākos soļos

Kopsavilkums

Modernais HTML piedāvā plašu rīku klāstu formu veidošanai:

  1. Specializēti input tipi — email, url, tel, date, number, range, color — nodrošina piemērotu ievades pieredzi
  2. Iebūvēta validācija — required, pattern, min/max, minlength/maxlength — pārbauda datus bez JavaScript
  3. Datalist — piedāvā ieteikumus, saglabājot ievades brīvību
  4. CSS pseidoklases — stilizē laukus atkarībā no validācijas stāvokļa
  5. Autocomplete un inputmode — uzlabo lietošanas ērtumu mobilajās ierīcēs

Noderīgas saites:

Laboja mad, labots 1x