Το στοιχείο <input> της HTML αποτελεί το θεμελιώδες εργαλείο για τη συλλογή δεδομένων χρήστη σε φόρμες ιστού.
Τύποι Input
Κειμενικοί και Σημασιολογικοί Τύποι
| Τύπος | Περιγραφή |
|---|---|
text |
Απλό κείμενο μίας γραμμής |
password |
Απόκρυψη χαρακτήρων για εισαγωγή κωδικού πρόσβασης |
email |
Διεύθυνση email με αυτόματη επικύρωση |
url |
Εισαγωγή απόλυτης διεύθυνσης URL |
tel |
Εισαγωγή τηλεφωνικού αριθμού (ενεργοποιεί αριθμητικό πληκτρολόγιο) |
search |
Πεδίο αναζήτησης με κουμπί εκκαθάρισης |
Αριθμητικοί και Ποσοτικοί Τύποι
| Τύπος | Περιγραφή |
|---|---|
number |
Αριθμητικό πεδίο με βήμα (min, max, step) |
range |
Ρυθμιστικό επιλογής κατά προσέγγιση τιμής |
Τύποι Ημερομηνίας και Ώρας
| Τύπος | Περιγραφή |
|---|---|
date |
Επιλογέας ημερομηνίας ημερολογίου (έτος, μήνας, ημέρα) |
time |
Επιλογέας ώρας (ώρες, λεπτά) |
datetime-local |
Ημερομηνία και ώρα χωρίς ζώνη ώρας |
month |
Επιλογέας έτους και μήνα |
week |
Επιλογέας έτους και αριθμού εβδομάδας κατά ISO |
Επιλογή και Ενέργειες
| Τύπος | Περιγραφή |
|---|---|
checkbox |
Διακόπτης επιλογής ή πολλαπλή επιλογή |
radio |
Μοναδική επιλογή εντός ομάδας επιλογών |
color |
Παλέτα επιλογής χρώματος |
file |
Μεταφόρτωση αρχείου (accept, multiple) |
hidden |
Κρυφή τιμή που αποστέλλεται με τη φόρμα |
submit |
Κουμπί υποβολής φόρμας |
reset |
Επαναφορά πεδίων φόρμας |
button |
Κουμπί γενικής χρήσης |
Βασικά Γνωρίσματα Επικύρωσης
| Γνώρισμα | Συμπεριφορά |
|---|---|
required |
Αποτρέπει την υποβολή εάν το πεδίο είναι κενό |
pattern="[A-Za-z0-9]+" |
Κανονική έκφραση (Regex) που πρέπει να ταιριάζει |
min="1" max="100" |
Ελάχιστα και μέγιστα όρια για αριθμούς ή ημερομηνίες |
step="0.5" |
Έγκυρο διάστημα βήματος για αριθμούς |
minlength="5" maxlength="20" |
Ελάχιστο και μέγιστο μήκος χαρακτήρων |
placeholder="..." |
Επεξηγηματικό κείμενο υπόδειξης |
readonly |
Αποτρέπει την επεξεργασία, η τιμή υποβάλλεται |
disabled |
Απενεργοποιεί το πεδίο, η τιμή δεν υποβάλλεται |
autofocus |
Αυτόματη εστίαση κατά τη φόρτωση της σελίδας |
Ολοκληρωμένο Παράδειγμα Φόρμας
<form action="/api/submit" method="POST">
<label for="user-email">Ηλεκτρονικό Ταχυδρομείο:</label>
<input type="email" id="user-email" name="email" required placeholder="[email protected]" />
<label for="user-password">Κωδικός Πρόσβασης (τουλάχιστον 8 χαρακτήρες):</label>
<input type="password" id="user-password" name="password" required minlength="8" />
<label for="user-age">Ηλικία:</label>
<input type="number" id="user-age" name="age" min="18" max="120" step="1" />
<label>
<input type="checkbox" name="terms" required />
Αποδέχομαι τους όρους χρήσης
</label>
<input type="submit" value="Εγγραφή" />
</form>