Αυτοί είναι οι διάφοροι τύποι εισαγωγής που μπορείτε να χρησιμοποιήσετε στο στοιχείο <input> του HTML:
<input type=”button”>
<input type=”checkbox”>
<input type=”color”>
<input type=”date”>
<input type=”datetime-local”>
<input type=”email”>
<input type=”file”>
<input type=”hidden”>
<input type=”image”>
<input type=”month”>
<input type=”number”>
<input type=”password”>
<input type=”radio”>
<input type=”range”>
<input type=”reset”>
<input type=”search”>
<input type=”submit”>
<input type=”tel”>
<input type=”text”>
<input type=”time”>
<input type=”url”>
<input type=”week”>
Αυτοί οι τύποι σας επιτρέπουν να διαμορφώσετε τον τρόπο εισαγωγής δεδομένων από τους χρήστες, ανάλογα με τις ανάγκες σας.
Ο τύπος εισαγωγής “text” με τη χρήση του στοιχείου <input type=”text”> ορίζει ένα πεδίο εισαγωγής μονής γραμμής για κείμενο:
<input type="text" name="username">
Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “text” με το όνομα “username”. Ο χρήστης μπορεί να εισάγει μονής γραμμής κείμενο σε αυτό το πεδίο.
Ο τύπος εισαγωγής “password” με τη χρήση του στοιχείου <input type=”password”> ορίζει ένα πεδίο εισαγωγής για κωδικό πρόσβασης:
<input type="password" name="password">
Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “password” με το όνομα “password”. Ο χρήστης μπορεί να εισάγει κωδικό πρόσβασης σε αυτό το πεδίο, και οι χαρακτήρες που εισάγονται θα εμφανίζονται ως αστερίσκοι ή κουκίδες για λόγους ασφαλείας.
Ο τύπος εισαγωγής “submit” με τη χρήση του στοιχείου <input type=”submit”> ορίζει ένα κουμπί για την υποβολή των δεδομένων της φόρμας σε έναν επεξεργαστή της φόρμας.
Ο επεξεργαστής της φόρμας είναι συνήθως μια σελίδα στον διακομιστή με ένα σενάριο για την επεξεργασία των εισαγωγών δεδομένων.
Ο επεξεργαστής της φόρμας καθορίζεται στο γνώρισμα “action” της φόρμας:
<form action="/form-handler" method="post"> <!-- Άλλα στοιχεία φόρμας --> <input type="submit" value="Υποβολή"> </form>
Στο παραπάνω παράδειγμα, το στοιχείο <input> τύπου “submit” ορίζει ένα κουμπί με την ετικέτα “Υποβολή”. Όταν ο χρήστης κάνει κλικ σε αυτό το κουμπί, η φόρμα θα υποβάλλεται στον επεξεργαστή της φόρμας που καθορίζεται στο γνώρισμα “action” της φόρμας.
Ο τύπος εισαγωγής “reset” με τη χρήση του στοιχείου <input type=”reset”> ορίζει ένα κουμπί επαναφοράς που θα επαναφέρει όλες τις τιμές της φόρμας στις προεπιλεγμένες τους τιμές:
<input type="reset" value="Επαναφορά">
Στο παραπάνω παράδειγμα, το στοιχείο <input> τύπου “reset” ορίζει ένα κουμπί με την ετικέτα “Επαναφορά”. Όταν ο χρήστης κάνει κλικ σε αυτό το κουμπί, όλες οι τιμές της φόρμας θα επαναφερθούν στις αρχικές τους προεπιλεγμένες τιμές.
Ο τύπος εισαγωγής “radio” με τη χρήση του στοιχείου <input type=”radio”> ορίζει ένα κουμπί επιλογής (radio button).
Τα κουμπιά επιλογής (radio buttons) επιτρέπουν στον χρήστη να επιλέξει ΜΟΝΟ ΜΙΑ από μια πεπερασμένη λίστα επιλογών:
<input type="radio" name="gender" value="male"> Άνδρας <input type="radio" name="gender" value="female"> Γυναίκα <input type="radio" name="gender" value="other"> Άλλο
Στο παραπάνω παράδειγμα, οι τρεις επιλογές “Άνδρας”, “Γυναίκα” και “Άλλο” αναπαριστούν τις επιλογές του φύλου. Όταν ο χρήστης επιλέγει μια επιλογή, μόνο η επιλεγμένη τιμή θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί. Το γνώρισμα “name” χρησιμοποιείται για να ομαδοποιήσει τα κουμπιά επιλογής μέσω του κοινού ονόματος “gender”.
Ο τύπος εισαγωγής “color” με τη χρήση του στοιχείου <input type=”color”> χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν ένα χρώμα.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας χρώματος στο πεδίο εισαγωγής:
<input type="color" name="color">
Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “color” με το όνομα “color”. Ο χρήστης μπορεί να επιλέξει ένα χρώμα μέσω του επιλογέα χρώματος που εμφανίζεται. Η επιλεγμένη τιμή χρώματος θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.
Ο τύπος εισαγωγής “date” με τη χρήση του στοιχείου <input type=”date”> χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν μια ημερομηνία.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας ημερομηνίας στο πεδίο εισαγωγής:
<input type="date" name="birthdate">
Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “date” με το όνομα “birthdate”. Ο χρήστης μπορεί να επιλέξει μια ημερομηνία μέσω του επιλογέα ημερομηνίας που εμφανίζεται. Η επιλεγμένη ημερομηνία θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.
Ο τύπος εισαγωγής “datetime-local” με τη χρήση του στοιχείου <input type=”datetime-local”> καθορίζει ένα πεδίο εισαγωγής ημερομηνίας και ώρας, χωρίς ζώνη ώρας.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, μπορεί να εμφανιστεί ένας επιλογέας ημερομηνίας και ώρας στο πεδίο εισαγωγής:
<input type="datetime-local" name="eventdatetime">
Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “datetime-local” με το όνομα “eventdatetime”. Ο χρήστης μπορεί να επιλέξει μια ημερομηνία και ώρα μέσω του επιλογέα ημερομηνίας και ώρας που εμφανίζεται. Η επιλεγμένη ημερομηνία και ώρα θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.
Ο τύπος εισαγωγής “email” με τη χρήση του στοιχείου <input type=”email”> χρησιμοποιείται για πεδία εισαγωγής που θα πρέπει να περιέχουν μια διεύθυνση email.
Ανάλογα με την υποστήριξη του προγράμματος περιήγησης, η διεύθυνση email μπορεί να ελέγχεται αυτόματα για εγκυρότητα κατά την υποβολή.
Ορισμένα smartphones αναγνωρίζουν τον τύπο email και προσθέτουν την κατάληξη “.com” στο πληκτρολόγιο για την εισαγωγή διεύθυνσης email:
<input type="email" name="email">
Στο παραπάνω παράδειγμα, ορίζεται ένα πεδίο εισαγωγής τύπου “email” με το όνομα “email”. Ο χρήστης μπορεί να εισάγει μια διεύθυνση email σε αυτό το πεδίο, και αν το πρόγραμμα περιήγησης το υποστηρίζει, μπορεί να γίνει έλεγχος εγκυρότητας της διεύθυνσης email. Η εισαγόμενη διεύθυνση email θα αποσταλεί μαζί με την υπόλοιπη φόρμα όταν υποβληθεί.
Ο τύπος εισαγωγής “image” με τη χρήση του στοιχείου <input type=”image”> καθορίζει μια εικόνα ως κουμπί υποβολής (submit).
Η διαδρομή προς την εικόνα καθορίζεται στο γνώρισμα “src”:
<input type="image" src="submit_button.png" alt="Submit">
Στο παραπάνω παράδειγμα, ορίζεται ένα κουμπί υποβολής εικόνας με το όνομα αρχείου “submit_button.png”. Όταν ο χρήστης κάνει κλικ στην εικόνα, η φόρμα θα υποβληθεί. Η εικόνα θα εμφανίζεται ως κουμπί υποβολής και μπορεί να περιέχει οποιαδήποτε εικόνα είναι κατάλληλη για τον σκοπό του κουμπιού υποβολής.
