Η HTML5 έχει εισάγει αρκετά νέα πεδία καταχώρισης (input types). Τα πεδία αυτά πετυχαίνουν την καλύτερη διαχείριση των δεδομένων της φόρμας, αλλά και τον αυτόματο έλεγχο (validation) των τιμών που πληκτρολογεί ο χρήστης πριν το submit της φόρμας, χωρίς να χρειάζεται κώδικα JavaScript, όπως γινόταν μέχρι τώρα. Τα νέα πεδία καταχώρισης είναι τα παρακάτω:
tel - το πεδίο κειμένου είναι νούμερο τηλεφώνου
search - το πεδίο search χρησιμοποιείται σαν πεδίο αναζήτησης στο οποίο ο χρήστης πληκτρολογεί λέξεις κλειδιά για να εκτελέσει μια αναζήτηση. Το πεδίο αυτό συμπεριφέρεται σαν πεδίο κειμένου
url - το πεδίο url χρησιμοποιείται για να πληκτρολογείται σε αυτό μια URL διεύθυνση
email - το πεδίο email χρησιμοποιείται για να πληκτρολογείται σε αυτό μια διεύθυνση ηλεκτρονικού ταχυδρομείου. Η ορθότητα της τιμή (πρέπει να περιέχει τον χαρακτήρα @ και τελεία στο domain) του πεδίου αυτού ελέγχεται αυτόματα κάθε φορά που γίνεται submit η φόρμα.
datetime - το πεδίο κειμένου είναι ημερομηνία ή ώρα ή και τα δύο
date - το πεδίο κειμένου είναι ημέρα
month - το πεδίο κειμένου είναι μήνας
week - το πεδίο κειμένου είναι εβδομάδα
time - το πεδίο κειμένου είναι ώρα
datetime-local - το πεδίο κειμένου είναι τοπική ώρα και ημερομηνία
number - το πεδίο number χρησιμοποιείται για να πληκτρολογείται σε αυτό μια αριθμητική τιμή. Αν ο χρήστης πληκτρολογήσει κείμενο, τότε η φόρμα δεν γίνεται submit λόγο μη-ορθότητας του πεδίου. Μπορούμε να χρησιμοποιήσουμε τις παρακάτω ιδιότητες για να θέσουμε περιορισμούς στην τιμή που μπορεί να πάρει:
max – ορίζει τον μέγιστο αριθμό που μπορεί να πάρει
min - ορίζει τον μικρότερο αριθμό που μπορεί να πάρει
step – ορίζει το σύνολο των αριθμών που μπορεί να πάρει. Για παράδειγμα, αν ορίσουμε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι: ...,-10, -5, 0, 5,10,15...κτλ.
value – ορίζει την εξορισμού τιμή στο πεδίο
range - το πεδίο range χρησιμοποιείται για να πληκτρολογείται σε αυτό μια αριθμητική τιμή από ένα εύρος τιμών. Μπορούμε να χρησιμοποιήσουμε τις παρακάτω ιδιότητες για να θέσουμε περιορισμούς στην τιμή που μπορεί να πάρει:
max – ορίζει τον μέγιστο αριθμό που μπορεί να πάρει
min - ορίζει τον μικρότερο αριθμό που μπορεί να πάρει
step – ορίζει το σύνολο των αριθμών που μπορεί να πάρει. Για παράδειγμα, αν ορίσουμε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι: ...,-10, -5, 0, 5,10,15...κτλ.
value – ορίζει την εξορισμού τιμή στο πεδίο
color - το πεδίο κειμένου είναι τύπου hexadecimal color, όπως #FF56CC.
tel - το πεδίο κειμένου είναι νούμερο τηλεφώνου
Το πεδίο tel
Τηλέφωνο: <input type="tel" name="telephone_field" />
search - το πεδίο search χρησιμοποιείται σαν πεδίο αναζήτησης στο οποίο ο χρήστης πληκτρολογεί λέξεις κλειδιά για να εκτελέσει μια αναζήτηση. Το πεδίο αυτό συμπεριφέρεται σαν πεδίο κειμένου
Το πεδίο search
Αναζήτηση: <input type="search" name="search_field" />
url - το πεδίο url χρησιμοποιείται για να πληκτρολογείται σε αυτό μια URL διεύθυνση
Το πεδίο url
Ιστοσελίδα: <input type="url" name="url_field" />
email - το πεδίο email χρησιμοποιείται για να πληκτρολογείται σε αυτό μια διεύθυνση ηλεκτρονικού ταχυδρομείου. Η ορθότητα της τιμή (πρέπει να περιέχει τον χαρακτήρα @ και τελεία στο domain) του πεδίου αυτού ελέγχεται αυτόματα κάθε φορά που γίνεται submit η φόρμα.
Το πεδίο email
Email: <input type="email" name="email_field" />
datetime - το πεδίο κειμένου είναι ημερομηνία ή ώρα ή και τα δύο
Το πεδίο datetime
Ημερομηνία: <input type="datetime" name="datatime_field" />
date - το πεδίο κειμένου είναι ημέρα
Το πεδίο date
Ημέρα: <input type="date" name="date_filed" />
month - το πεδίο κειμένου είναι μήνας
Το πεδίο month
Μήνας: <input type="month" name="month_field" />
week - το πεδίο κειμένου είναι εβδομάδα
Το πεδίο week
Εβδομάδα: <input type="week" name="week_field" />
time - το πεδίο κειμένου είναι ώρα
Το πεδίο time
Ώρα: <input type="time" name="time_field" />
datetime-local - το πεδίο κειμένου είναι τοπική ώρα και ημερομηνία
Το πεδίο datetime-local
Ώρα Ελλάδας: <input type="datetime-local" name="gr_time_field" />
number - το πεδίο number χρησιμοποιείται για να πληκτρολογείται σε αυτό μια αριθμητική τιμή. Αν ο χρήστης πληκτρολογήσει κείμενο, τότε η φόρμα δεν γίνεται submit λόγο μη-ορθότητας του πεδίου. Μπορούμε να χρησιμοποιήσουμε τις παρακάτω ιδιότητες για να θέσουμε περιορισμούς στην τιμή που μπορεί να πάρει:
max – ορίζει τον μέγιστο αριθμό που μπορεί να πάρει
min - ορίζει τον μικρότερο αριθμό που μπορεί να πάρει
step – ορίζει το σύνολο των αριθμών που μπορεί να πάρει. Για παράδειγμα, αν ορίσουμε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι: ...,-10, -5, 0, 5,10,15...κτλ.
value – ορίζει την εξορισμού τιμή στο πεδίο
Το πεδίο number
Τετραγωνικά μέτρα: <input type="number" name="tetragonika_field" min="40" max="120" />
range - το πεδίο range χρησιμοποιείται για να πληκτρολογείται σε αυτό μια αριθμητική τιμή από ένα εύρος τιμών. Μπορούμε να χρησιμοποιήσουμε τις παρακάτω ιδιότητες για να θέσουμε περιορισμούς στην τιμή που μπορεί να πάρει:
max – ορίζει τον μέγιστο αριθμό που μπορεί να πάρει
min - ορίζει τον μικρότερο αριθμό που μπορεί να πάρει
step – ορίζει το σύνολο των αριθμών που μπορεί να πάρει. Για παράδειγμα, αν ορίσουμε στην ιδιότητα την τιμή 5, τότε οι επιτρεπτοί αριθμοί είναι οι: ...,-10, -5, 0, 5,10,15...κτλ.
value – ορίζει την εξορισμού τιμή στο πεδίο
Το πεδίο range
Βαθμός Πτυχίου: <input type="range" name="vathmos_field" min="0" max="10" />
color - το πεδίο κειμένου είναι τύπου hexadecimal color, όπως #FF56CC.
Το πεδίο color
Χρώμα: <input type="color" name="color_field" />
