Milyen típusú input elemek léteznek HTML-ben?

Az alábbi input típusok léteznek:

• text: Egysoros szövegmező.
• password: Jelszóbeviteli mező, a karakterek rejtve vannak.
• submit: Gomb a űrlap elküldéséhez.
• reset: Gomb az űrlap alaphelyzetbe állításához.
• radio: Rádiógomb (egy a sok közül).
• checkbox: Jelölőnégyzet (egy vagy több a sok közül).
• button: Szokásos gomb.
• file: Fájl kiválasztó mező.
• hidden: Rejtett mező, nem látható a felhasználó számára, de elküldésre kerül az űrlappal.
• image: Kép gomb az űrlap elküldéséhez.

A HTML5 specifikáció új típusokat adott hozzá:

• email: E-mail cím beviteli mező.
• url: URL beviteli mező.
• number: Szám beviteli mező.
• range: Csúszka a numerikus érték kiválasztásához adott tartományon belül.
• date: Dátum kiválasztó mező.
• month: Hónap és év kiválasztó mező.
• week: Hét és év kiválasztó mező.
• time: Idő kiválasztó mező.
• datetime-local: Dátum és idő kiválasztó mező időzóna nélkül.
• search: Keresőmező.
• color: Szín kiválasztó mező.
• tel: Telefonszám beviteli mező.

Használati példa:

<!-- Egysoros szövegmező -->
<input type="text" placeholder="Név">

<!-- Jelszó beviteli mező -->
<input type="password" placeholder="Jelszó">

<!-- Űrlap küldése gomb -->
<input type="submit" value="Küldés">

<!-- Űrlap alaphelyzetbe állítása gomb -->
<input type="reset" value="Alaphelyzetbe állítás">

<!-- Rádiógombok -->
<input type="radio" name="gender" value="male"> Férfi
<input type="radio" name="gender" value="female"> Nő

<!-- Jelölőnégyzetek -->
<input type="checkbox" name="interests" value="music"> Zene
<input type="checkbox" name="interests" value="sports"> Sport

<!-- Szokásos gomb -->
<input type="button" value="Kattints rám">

<!-- Fájl kiválasztó mező -->
<input type="file">

<!-- Rejtett mező -->
<input type="hidden" name="userId" value="123">

<!-- Kép gomb -->
<input type="image" src="submit.png" alt="Küldés">

<!-- E-mail mező -->
<input type="email" placeholder="Email">

<!-- URL mező -->
<input type="url" placeholder="Weboldal">

<!-- Szám mező -->
<input type="number" min="1" max="10">

<!-- Csúszka -->
<input type="range" min="0" max="100">

<!-- Dátum -->
<input type="date">

<!-- Hónap -->
<input type="month">

<!-- Hét -->
<input type="week">

<!-- Idő -->
<input type="time">

<!-- Dátum és idő (helyi) -->
<input type="datetime-local">

<!-- Keresés -->
<input type="search" placeholder="Keresés">

<!-- Szín kiválasztása -->
<input type="color">

<!-- Telefonszám -->
<input type="tel" placeholder="+36 (xxx) xxx-xx-xx">