Ποιοι τύποι στοιχείων input υπάρχουν στο HTML…

Υπάρχουν οι ακόλουθοι τύποι στοιχείων input:

text: Μονόγραμμο πεδίο κειμένου.
password: Πεδίο εισαγωγής κωδικού πρόσβασης, τα σύμβολα είναι κρυμμένα.
submit: Κουμπί για την αποστολή της φόρμας.
reset: Κουμπί για την επαναφορά της φόρμας.
radio: Ραδιοκουμπί (ένα από πολλά).
checkbox: Πλαίσιο επιλογής (ένα ή περισσότερα από πολλά).
button: Κανονικό κουμπί.
file: Πεδίο επιλογής αρχείου.
hidden: Κρυφό πεδίο, αόρατο στον χρήστη, αλλά αποστέλλεται με τη φόρμα.
image: Κουμπί εικόνας για την αποστολή της φόρμας.

Η προδιαγραφή HTML5 πρόσθεσε νέους τύπους:

email: Πεδίο για την εισαγωγή διεύθυνσης email.
url: Πεδίο για την εισαγωγή URL.
number: Πεδίο για την εισαγωγή αριθμού.
range: Ολισθητής για την επιλογή αριθμητικής τιμής σε μια καθορισμένη περιοχή.
date: Πεδίο για την επιλογή ημερομηνίας.
month: Πεδίο για την επιλογή μήνα και έτους.
week: Πεδίο για την επιλογή εβδομάδας και έτους.
time: Πεδίο για την επιλογή ώρας.
datetime-local: Πεδίο για την επιλογή ημερομηνίας και ώρας χωρίς ζώνη ώρας.
search: Πεδίο αναζήτησης.
color: Πεδίο επιλογής χρώματος.
tel: Πεδίο για την εισαγωγή αριθμού τηλεφώνου.

Παράδειγμα χρήσης:

<!-- Μονόγραμμο πεδίο κειμένου -->
<input type="text" placeholder="Όνομα">

<!-- Πεδίο εισαγωγής κωδικού πρόσβασης -->
<input type="password" placeholder="Κωδικός">

<!-- Κουμπί αποστολής φόρμας -->
<input type="submit" value="Αποστολή">

<!-- Κουμπί επαναφοράς φόρμας -->
<input type="reset" value="Επαναφορά">

<!-- Ραδιοκουμπιά -->
<input type="radio" name="gender" value="male"> Άνδρας
<input type="radio" name="gender" value="female"> Γυναίκα

<!-- Πλαίσια επιλογής -->
<input type="checkbox" name="interests" value="music"> Μουσική
<input type="checkbox" name="interests" value="sports"> Αθλητισμός

<!-- Κανονικό κουμπί -->
<input type="button" value="Κάνε κλικ σε μένα">

<!-- Πεδίο επιλογής αρχείου -->
<input type="file">

<!-- Κρυφό πεδίο -->
<input type="hidden" name="userId" value="123">

<!-- Κουμπί εικόνας -->
<input type="image" src="submit.png" alt="Αποστολή">

<!-- Πεδίο email -->
<input type="email" placeholder="Email">

<!-- Πεδίο URL -->
<input type="url" placeholder="Ιστότοπος">

<!-- Πεδίο αριθμού -->
<input type="number" min="1" max="10">

<!-- Ολισθητής -->
<input type="range" min="0" max="100">

<!-- Ημερομηνία -->
<input type="date">

<!-- Μήνας -->
<input type="month">

<!-- Εβδομάδα -->
<input type="week">

<!-- Ώρα -->
<input type="time">

<!-- Ημερομηνία και ώρα (τοπική) -->
<input type="datetime-local">

<!-- Αναζήτηση -->
<input type="search" placeholder="Αναζήτηση">

<!-- Επιλογή χρώματος -->
<input type="color">

<!-- Αριθμός τηλεφώνου -->
<input type="tel" placeholder="+30 (xxx) xxx-xx-xx">

Ποιοι τύποι στοιχείων input υπάρχουν στο HTML;