Kokie yra HTML input elementų tipai?

Yra šie input elementų tipai:

• text: Vienos eilutės teksto laukas.
• password: Slaptažodžio laukas, simboliai yra paslėpti.
• submit: Mygtukas formos siuntimui.
• reset: Mygtukas formos atstatymui.
• radio: Jungiklis (vienas iš daugelio).
• checkbox: Žymės langelis (vienas arba keli iš daugelio).
• button: Paprastas mygtukas.
• file: Failo pasirinkimo laukas.
• hidden: Paslėptas laukas, nematomas vartotojui, bet siunčiamas kartu su forma.
• image: Paveikslėlio mygtukas formos siuntimui.

HTML5 specifikacija pridėjo naujus tipus:

• email: El. pašto adreso įvedimas.
• url: URL adreso įvedimas.
• number: Skaičiaus įvedimas.
• range: Slankiklis, skirtas pasirinkti skaitmeninę reikšmę nurodytame diapazone.
• date: Datos pasirinkimas.
• month: Mėnesio ir metų pasirinkimas.
• week: Savaitės ir metų pasirinkimas.
• time: Laiko pasirinkimas.
• datetime-local: Datos ir laiko pasirinkimas be laiko zonos.
• search: Paieškos laukas.
• color: Spalvos pasirinkimas.
• tel: Telefono numerio įvedimas.

Pavyzdys:

<!-- Vienos eilutės teksto laukas -->
<input type="text" placeholder="Vardas">

<!-- Slaptažodžio laukas -->
<input type="password" placeholder="Slaptažodis">

<!-- Formos siuntimo mygtukas -->
<input type="submit" value="Siųsti">

<!-- Formos atstatymo mygtukas -->
<input type="reset" value="Atstatyti">

<!-- Jungikliai -->
<input type="radio" name="lytis" value="vyras"> Vyras
<input type="radio" name="lytis" value="moteris"> Moteris

<!-- Žymės langeliai -->
<input type="checkbox" name="pomėgiai" value="muzika"> Muzika
<input type="checkbox" name="pomėgiai" value="sportas"> Sportas

<!-- Paprastas mygtukas -->
<input type="button" value="Paspausk mane">

<!-- Failo pasirinkimo laukas -->
<input type="file">

<!-- Paslėptas laukas -->
<input type="hidden" name="userId" value="123">

<!-- Paveikslėlio mygtukas -->
<input type="image" src="submit.png" alt="Siųsti">

<!-- El. pašto laukas -->
<input type="email" placeholder="El. paštas">

<!-- URL laukas -->
<input type="url" placeholder="Tinklalapis">

<!-- Skaičiaus laukas -->
<input type="number" min="1" max="10">

<!-- Slankiklis -->
<input type="range" min="0" max="100">

<!-- Datos laukas -->
<input type="date">

<!-- Mėnesio pasirinkimas -->
<input type="month">

<!-- Savaitės pasirinkimas -->
<input type="week">

<!-- Laiko pasirinkimas -->
<input type="time">

<!-- Datos ir laiko (vietinis) -->
<input type="datetime-local">

<!-- Paieškos laukas -->
<input type="search" placeholder="Ieškoti">

<!-- Spalvos pasirinkimas -->
<input type="color">

<!-- Telefono numerio laukas -->
<input type="tel" placeholder="+370 (xxx) xxx-xx-xx">