Παρόλο που τα HTML5-φόρμες προσφέρουν πολύ περισσότερες λειτουργίες από τους προκατόχους τους, είναι εξίσου εύκολο να τις ορίσετε.
Το HTML5 προσφέρει πραγματικά πολλούς νέους τύπους πεδίων. Η υποστήριξή τους από τους τρέχοντες φυλομετρητές είναι ήδη σχετικά καλή. Παρόλα αυτά, εδώ θα σας παρουσιάσω μόνο τους τύπους πεδίων που είναι πρακτικά χρήσιμοι.
Επιλογή χρώματος
Μπορείτε να προσφέρετε στους επισκέπτες σας τη δυνατότητα να επιλέξουν ένα χρώμα.
Όταν κάποιος κάνει κλικ σε ένα τέτοιο πεδίο, ανοίγει ένας τυπικός επιλογέας χρώματος.
Μέσω αυτού μπορείτε να επιλέξετε το επιθυμητό χρώμα. Ο επιλογέας χρώματος ορίζεται ως <input type="color" />.
Επιλέξτε το αγαπημένο σας χρώμα: <input type="color" name="lf" />
Σε κάθε πεδίο πρέπει να ανατεθεί πάντα μια τιμή. Αν λείπει ή είναι μη έγκυρη, δεν προστίθεται αυτόματα το #000 (δηλαδή το μαύρο).
Ημερομηνία και ώρα
Ειδικά όσον αφορά τους τύπους πεδίων για ημερομηνίες και ώρες, το HTML5 προσφέρει πολλές καινοτομίες. Και αυτοί οι τύποι πεδίων προσφέρουν πράγματι ενδιαφέροντα χαρακτηριστικά. Σκεφτείτε για παράδειγμα ποια βήματα απαιτούνται για να προσφέρετε στους επισκέπτες σας ένα πεδίο επιλογής ημερομηνίας. Συνήθως χωρίς JavaScript (ή ακόμα και Flash) δεν είναι δυνατή η πραγματοποίηση αυτού. Με το HTML5 τώρα γίνεται πολύ πιο εύκολο. Εδώ πρέπει απλά να ορίσετε ένα πεδίο εισόδου τύπου date.
<input type="date" />
Για την εμφάνιση και υλοποίηση του ημερολογίου είναι αποκλειστικά υπεύθυνος ο φυλομετρητής. Οι φυλομετρητές πρέπει να εμφανίσουν μια αντίστοιχη εφαρμογή για την εμφάνιση του ημερολογίου. Στο Google Chrome μια εφαρμογή φαίνεται ϭως εξής:
Μέσω του date ορίζεται ένα ημερολόγιο μέσω του οποίου οι χρήστες μπορούν να επιλέξουν την επιθυμητή ημερομηνία. Η ημερομηνία μεταφέρεται αυτόματα στο πεδίο κειμένου μετά την επιλογή.
Επίσης, ανάλογα εύκολα μπορείτε να δημιουργήσετε ένα πεδίο ώρας. Γι' αυτό χρησιμοποιείται ένα πεδίο τύπου time.
<input type="time" />
Με τον τύπο time οι φυλομετρητές θα εμφανίσουν στοιχεία ελέγχου για την επιλογή μιας ώρας.
Παρόμοια εύκολα λειτουργεί και ο τύπος week. Μέσω αυτού εμφανίζεται ένα πεδίο για την επιλογή μιας εβδομάδας.
<input type="week" />
Επιπλέον, μπορείτε να εμφανίσετε ένα πεδίο μήνα.
<input type="month" />
Και οι δύο τύποι πεδίων προκαλούν την εμφάνιση στοιχείων ελέγχου με τα οποία μπορείτε να καθορίσετε τις επιθυμητές πληροφορίες.
Ενώ οι τύποι time και date επιτρέπουν είτε μόνο την επιλογή ημερομηνίας είτε μόνο την επιλογή ώρας, οι τύποι datetime και datetime-local επιτρέπουν μια συνδυασμένη επιλογή και των δύο.
Με το datetime παρουσιάζεται ένα πεδίο ημερομηνίας και ένα πεδίο για την επιλογή της ώρας δίπλα-δίπλα. (Ο datetime υποστηρίζεται προς το παρόν μόνο από Safari και Opera).
Είναι ήδη γνωστό ότι τα φόρμα που παρουσιάζονται σε αυτήν την ενότητα δεν υποστηρίζονται ακόμη από όλους τους φυλομετρητές. Όσοι θέλουν όμως να τα χρησιμοποιήσουν μπορούν να κάνουν χρήση αντίστοιχων λύσεων JavaScript. Έτσι, τα μεγάλα πλαίσια JavaScript όπως τα jQuery και το Dojo προσφέρουν κατάλληλα σενάρια. Με το jQuery UI θα ήταν όπως ακολούθως:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Έτσι είστε σίγουροι, ακόμη και αν ο φυλομετρητής δεν υποστηρίζει το κλασικό date.
Πεδία για αριθμούς
Μέσω του number παρέχεται ένα πεδίο που προορίζεται ειδικά για την εισαγωγή αριθμών.
Στην απλούστερη περίπτωση η ορισμός ενός πεδίου number φαίνεται ως εξής:
<input type="number" />
Οι αριθμοί μπορούν να εισαχθούν σε αυτά τα πεδία με δύο τρόπους:
• μέσω του πληκτρολογίου
• μέσω των στοιχείων ελέγχου
Με τη δήλωση πρόσθετων γνωρισμάτων, μπορούν να περιγραφούν ακόμη πιο λεπτομερώς τα πεδία τύπου number. Αρχικά αυτά είναι τα δύο γνωρίσματα min και max, μέσω των οποίων μπορούν να καθοριστούν τα εύρη τιμών των πεδίων.
• min - η ελάχιστη δυνατή τιμή
• max - η μέγιστη δυνατή τιμή
Ωστόσο, αυτά τα δύο γνωρίσματα δεν επηρεάζουν τις μεταβολές των χρηστών μέσω του πληκτρολογίου.
Σε αυτά τα δύο γνωρίσματα μπορούν να ανατεθούν ακέραιοι και δεκαδικοί αριθμοί.
Με το γνώρισμα step μπορεί να καθοριστεί η σειρά βήματος που πρέπει να τηρηθεί μέσω των στοιχείων ελέγχου του προγράμματος περιήγησης.
<input type="number" min="0" max="8" step="2" />
Σε αυτή την περίπτωση, μπορούμε να επιλέξουμε μέσω των στοιχείων ελέγχου του προγράμματος περιήγησης μόνο τις τιμές 0, 2, 4, 6 και 8.
Ρυθμιστές
Τα πεδία τύπου range επιτρέπουν την επιλογή μιας τιμής εντός ενός ορισμένου εύρους τιμών.
Τα προγράμματα περιήγησης ερμηνεύουν το πεδίο εύρους μέσω ενός ρυθμιστή.
<input type="range" min="0" max="10" step="2" value="6">
Η ελάχιστη δυνατή τιμή καθορίζεται μέσω του γνωρίσματος min. Το max περιγράφει τη μέγιστη δυνατή τιμή. Αν λείπουν τα δύο γνωρίσματα min και max, τα προγράμματα περιήγησης υποθέτουν τις δύο τιμές 0 και 100.
Μέσω του step μπορεί να προσδιοριστεί η σειρά βήματος.
Δημιουργία πεδίων αναζήτησης
Το search δεν έχει αρχικά λειτουργία. Αντίθετα, αυτός ο τύπος πεδίου θα πρέπει να θεωρείται ως συμπλήρωμα του κλασικού πεδίου κειμένου. Ο σκοπός των πεδίων search είναι να διαφέρουν οπτικά από τα απλά πεδία κειμένου. Συνήθως τα προγράμματα περιήγησης πρέπει να αναλαμβάνουν την εμφάνιση των πεδίων search.
<input type="search" />
Πώς ακριβώς θα το υλοποιήσουν αυτό το αφήνουν στους κατασκευαστές. Μια καλή συνδυαστική λύση είναι να προστεθεί το γνώρισμα results.
<input type="search" results="5" placeholder="Αναζήτηση..." />
Μέσω του results καθορίζεται πόσες από τις προηγούμενες αναζητήσεις θα πρέπει να εμφανίζονται σε αυτό το πεδίο.
Προσοχή: Το γνώρισμα results δεν αποτελεί μέρος των προδιαγραφών HTML5.
