Τύποι εισόδου HTML
- Προηγούμενη σελίδα Στοιχεία Φόρμας του HTML
- Επόμενη σελίδα Επιλογές Είσοδου του HTML
Αυτό το κεφάλαιο περιγράφει τον τύπο εισόδου του στοιχείου <input>.
Τύπος εισόδου: text
<input type="text"> Ορίζει ταΕισαγωγή κειμένουΗ γραμμή εισόδου για
Παράδειγμα
<form> Όνομα:<br> <input type="text" name="firstname"> <br> Επώνυμο:<br> <input type="text" name="lastname"> </form>
Το παρακάτω κώδικα HTML θα εμφανιστεί στον περιηγητή ως εξής:
Τύπος εισόδου: password
<input type="password"> ΟρισμόςΠεδίο κωδικού:
Παράδειγμα
<form> Όνομα χρήστη:<br> <input type="text" name="username"> <br> Κωδικός πρόσβασης χρήστη:<br> <input type="password" name="psw"> </form>
Το παρακάτω κώδικα HTML θα εμφανιστεί στον περιηγητή ως εξής:
Σημείωση:Τα χαρακτήρες του πεδίου password θα υποστούν επεξεργασία μασκών (από το οποίο θα εμφανίζονται αστέρια ή γεμάτοι κύκλοι).
Τύπος εισόδου: submit
<input type="submit"> ΟρισμόςΥποβολήΤα δεδομένα της φόρμας σεΤο πρόγραμμα επεξεργασίας φόρμαςτων κουμπιών.
Το πρόγραμμα επεξεργασίας φόρμας (form-handler) είναι συνήθως μια σελίδα διακομιστή που περιέχει σενάρια για την επεξεργασία δεδομένων εισόδου.
Στο όρισμα action του φόρματος καθορίζεται ο επεξεργαστής φόρματος (form-handler):
Παράδειγμα
<form action="action_page.php"> Όνομα:<br> <input type="text" name="firstname" value="Mickey"> <br> Επώνυμο:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
Το παρακάτω κώδικα HTML θα εμφανιστεί στον περιηγητή ως εξής:
Αν παραλείψετε την ιδιότητα value του κουμπιού υποβολής, το κουμπί θα λάβει το προεπιλεγμένο κείμενο:
Παράδειγμα
<form action="action_page.php"> Όνομα:<br> <input type="text" name="firstname" value="Mickey"> <br> Επώνυμο:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit"> </form>
Τύπος Εισόδου: ραδιόφωνο
<input type="radio"> Ορισμός κουμπιών ραδιόφωνου.
Οι κουμπιά ραδιόφωνου επιτρέπουν στον χρήστη να επιλέξει ΜΟΝΟ ΜΙΑ επιλογή από έναν περιορισμένο αριθμό επιλογών:
Παράδειγμα
<form> <input type="radio" name="sex" value="male" checked>Άνδρας <br> <input type="radio" name="sex" value="female">Γυναίκα </form>
Το παρακάτω κώδικα HTML θα εμφανιστεί στον περιηγητή ως εξής:
Τύπος Εισόδου: κουμπί επιλογής
<input type="checkbox"> Ορισμός κουμπιών επιλογής.
Οι κουμπιά επιλογής επιτρέπουν στον χρήστη να επιλέξει μηδέν ή περισσότερες επιλογές από ένα περιορισμένο αριθμό.
Παράδειγμα
<form> <input type="checkbox" name="vehicle" value="Bike">Εγώ έχω μια ποδήλατο <br> <input type="checkbox" name="vehicle" value="Car">Εγώ έχω ένα αυτοκίνητο </form>
Το παρακάτω κώδικα HTML θα εμφανιστεί στον περιηγητή ως εξής:
Τύπος Εισόδου: κουμπί
<input type="button"> Ορισμόςκουμπί。
Παράδειγμα
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Το παρακάτω κώδικα HTML θα εμφανιστεί στον περιηγητή ως εξής:
Τύποι Εισόδου HTML5
Το HTML5 προσθέτει πολλαπλούς νέους τύπους εισόδου:
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
Σημείωση:Οι τύποι εισόδου που δεν υποστηρίζονται από παλιούς προγραμματιστές περιήγησης θεωρούνται τύπος εισόδου text.
Τύπος εισόδου: number
<input type="number"> Χρησιμοποιείται για πεδία εισόδου που πρέπει να περιέχουν αριθμητικές τιμές.
Μπορείτε να περιορίσετε τα αριθμητικά.
Βασισμένο στο υποστήριξη του προγράμματος περιήγησης, οι περιορισμοί μπορούν να εφαρμοστούν στο πεδίο εισόδου.
Παράδειγμα
<form> Ποσότητα (μέσα από 1 και 5): <input type="number" name="quantity" min="1" max="5"> </form>
Περιορισμοί Εισόδου
Εδώ παρατίθενται μερικοί συχνά χρησιμοποιούμενοι περιορισμοί εισόδου (αποτελούνται από νέες λειτουργίες του HTML5):
Πρότυπο | Περιγραφή |
---|---|
disabled | Ορίζει αν το πεδίο εισόδου πρέπει να είναι απενεργοποιημένο. |
max | Ορίζει την μέγιστη τιμή του πεδίου εισόδου. |
maxlength | Ορίζει τον μέγιστο αριθμό χαρακτήρων του πεδίου εισόδου. |
min | Ορίζει την ελάχιστη τιμή του πεδίου εισόδου. |
pattern | Ορίζει την εξουσιαστική έκφραση που ελέγχει την τιμή εισόδου. |
readonly | Ορίζει το πεδίο εισόδου ως αναγνωστικό (μη ενημερώσιμο). |
required | Ορίζει αν το πεδίο εισόδου είναι απαραίτητο (απαιτείται συμπλήρωση). |
size | Ορίζει το πλάτος του πεδίου εισόδου (σε χαρακτήρες). |
step | Ορίζει την νόμιμη διαφορά αριθμών του πεδίου εισόδου. |
value | Ορίζει την προεπιλεγμένη τιμή του πεδίου εισόδου. |
Θα μάθετε περισσότερα για τους περιορισμούς εισόδου στο επόμενο κεφάλαιο.
Παράδειγμα
<form> Ποσότητα: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
Τύπος εισόδου: date
<input type="date"> Χρησιμοποιείται για πεδία εισόδου που πρέπει να περιέχουν ημερομηνία.
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Γενέθλια: <input type="date" name="bday"> </form>
Μπορείτε να προσθέσετε περιορισμούς στην είσοδο:
Παράδειγμα
<form> Εισάγετε μια ημερομηνία πριν από την 01-01-1980: <input type="date" name="bday" max="1979-12-31"><br> Εισάγετε μια ημερομηνία μετά το 2000-01-01: Εισάγετε μια ημερομηνία μετά το 2000-01-01:<br> </form>
Τύπος εισαγωγής: color
<input type="color"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν χρώματα.
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας χρώματος θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Επιλέξτε το αγαπημένο σας χρώμα: <input type="color" name="favcolor"> </form>
Τύπος εισαγωγής: range
<input type="range"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν τιμές εντός συγκεκριμένου διαστήματος.
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, το πεδίο εισαγωγής μπορεί να εμφανιστεί ως κουμπί βρόχου.
Παράδειγμα
<form> <input type="range" name="points" min="0" max="10"> </form>
Μπορείτε να χρησιμοποιήσετε τις παρακάτω ιδιότητες για να καθορίσετε περιορισμούς: min, max, step, value.
Τύπος εισαγωγής: month
<input type="month"> Επιτρέπει στον χρήστη να επιλέξει μήνα και έτος.
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Γενέθλιας (μήνας και έτος): <input type="month" name="bdaymonth"> </form>
Τύπος εισαγωγής: week
<input type="week"> Επιτρέπει στον χρήστη να επιλέξει εβδομάδα και έτος.
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Επιλέξτε μια εβδομάδα: <input type="week" name="week_year"> </form>
Τύπος εισαγωγής: time
<input type="time"> Επιτρέπει στον χρήστη να επιλέξει ώρα (χωρίς ζώνη ώρας).
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ώρας θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Επιλέξτε μια ώρα: <input type="time" name="usr_time"> </form>
Τύπος εισαγωγής: datetime
<input type="datetime"> Επιτρέπει στον χρήστη να επιλέξει ημερομηνία και ώρα (με ζώνη ώρας).
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Γενέθλιας (ημερομηνία και ώρα): <input type="datetime" name="bdaytime"> </form>
Τύπος εισαγωγής: datetime-local
<input type="datetime-local"> Επιτρέπει στον χρήστη να επιλέξει ημερομηνία και ώρα (χωρίς ζώνη ώρας).
Βασισμένο στο υποστήριγμα του προγράμματος περιήγησης, ο επιλογέας ημερομηνίας θα εμφανιστεί στο πεδίο εισαγωγής.
Παράδειγμα
<form> Γενέθλιας (ημερομηνία και ώρα): <input type="datetime-local" name="bdaytime"> </form>
Τύπος εισαγωγής: email
<input type="email"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν διεύθυνση email.
Βασισμένο στη στήριξη του περιηγητή, μπορεί να επαληθεύσει αυτόματα την διεύθυνση email κατά την υποβολή.
Ορισμένα smartphone αναγνωρίζουν τον τύπο email και προσθέτουν "\.com" στο πληκτρολόγιο για να ταιριάζει με την εισαγωγή email.
Παράδειγμα
<form> Email: <input type="email" name="email"> </form>
Τύπος εισαγωγής: search
<input type="search"> Χρησιμοποιείται για πεδία αναζήτησης (το μοτίβο του πεδίου αναζήτησης μοιάζει με το μοτίβο του κειμένου).
Παράδειγμα
<form> Αναζήτηση Google: <input type="search" name="googlesearch"> </form>
Τύπος εισαγωγής: tel
<input type="tel"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν αριθμό τηλεφώνου.
Μόνο το Safari 8 υποστηρίζει τον τύπο tel.
Παράδειγμα
<form> Τηλέφωνο: <input type="tel" name="usrtel"> </form>
Τύπος εισαγωγής: url
<input type="url"> Χρησιμοποιείται για πεδία εισαγωγής που πρέπει να περιέχουν διεύθυνση URL.
Βασισμένο στη στήριξη του περιηγητή, μπορεί να επαληθεύσει αυτόματα το πεδίο url κατά την υποβολή.
Ορισμένα smartphone αναγνωρίζουν τον τύπο url και προσθέτουν "\.com" στο πληκτρολόγιο για να ταιριάζει με την εισαγωγή url.
Παράδειγμα
<form> Προσθέστε την ιστοσελίδα σας: <input type="url" name="homepage"> </form>
- Προηγούμενη σελίδα Στοιχεία Φόρμας του HTML
- Επόμενη σελίδα Επιλογές Είσοδου του HTML