Τύποι εισόδου 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) είναι συνήθως μια σελίδα διακομιστή που περιέχει σενάρια επεξεργασίας δεδομένων εισόδου.
Ορίζετε τον επεξεργαστή φόρμας (form-handler) με την ιδιότητα action της φόρμας (form):
Παράδειγμα
<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.
Σύμφωνα με την υποστήριξη του Browser, μπορεί να επαληθεύσει αυτόματα την διεύθυνση email κατά την υποβολή.
Ορισμένα Smartphone αναγνωρίζουν τον τύπο email και προσθέτουν ".com" στο πληκτρολόγιο για να ταιριάζει με την είσοδο email.
Παράδειγμα
<form> E-mail: <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.
Σύμφωνα με την υποστήριξη του Browser, μπορεί να επαληθεύσει αυτόματα το πεδίο URL κατά την υποβολή.
Ορισμένα Smartphone αναγνωρίζουν τον τύπο URL και προσθέτουν ".com" στο πληκτρολόγιο για να ταιριάζει με την είσοδο URL.
Παράδειγμα
<form> Προσθέστε την Ιστοσελίδα σας: <input type="url" name="homepage"> </form>
- Προηγούμενη Σελίδα Στοιχεία Φόρμας HTML
- Επόμενη Σελίδα Προσαρμοστικά στοιχεία Είσοδου HTML
