Η HTML5 αναβαθμίζει αρκετά τις φόρμες, κάτι που έπρεπε να έχει συμβεί από καιρό. Στο Dive into HTML5 μπορείτε να δείτε μια παρουσίαση / ανάλυση των νέων πεδίων που έχουμε ήδη στη διάθεσή μας κι εγώ θα συμπληρώσω αυτές τις πληροφορίες με διάφορα ζητήματα που αφορούν στο στυλ των νέων πεδίων και τις διαφορές μεταξύ των browsers, κάτι που απασχολεί ιδιαίτερα όσους θέλουν (ή απαιτείται) τα site τους να εμφανίζονται ίδια σε κάθε browser.

---

type=”email” και type=”url”

Το πεδίο αυτό
είναι το email που, όπως όλα τα καινούργια inputs συμπεριφέρεται σαν type="text"σε όσους browsers δεν υποστηρίζεται. Θα δοκιμάσουμε να δώσουμε το παρακάτω (όχι πολύ όμορφο!) στυλ και θα περιμένουμε να αποκτήσει ένα εκτυφλωτικό πράσινο border σε όλους τους σύγχρονους browsers.

input[type="text"]	{ border:1px solid #f00; }
input[type="email"],
input[type="number"],
input[type="range"],
input[type="search"],
input[type="url"]	{ border:1px solid #0f0; }

Firefox 4–5, Chrome 12, Opera 11, Internet Explorer 9 και -περιέργως- 8 μια χαρά, στον Internet Explorer 7 το border είναι κόκκινο. Δουλεύει περίπου όπως μας υποσχέθηκαν! Θα περίμενα να εμφανιστεί το κόκκινο border και στον IE 8 αλλά, φαίνεται πως ναι μεν δεν αναγνωρίζει το attribute type="email" αλλά του δίνει το κατάλληλο στυλ. Ο IE 7 «δημιουργεί» ένα type="text" attribute που είναι το default type για τα inputs και του δίνει τα αντίστοιχα στυλ.

Το ίδιο συμβαίνει και στο πεδίο url:

---

type="number"

Το number
συμπεριφέρεται με τον ίδιο τρόπο — πράσινο border σε όλους τους browsers, κόκκινο στον IE 7. Ο Chrome και ο Opera προσθέτουν 2 άσχημα μικρά κουμπιά-βελάκια στην δεξιά άκρη του πεδίου για τον έλεγχο της τιμής του, ενώ μπορoύμε α αλλάξουμε αυτή την τιμή και με τα βελάκια του πληκτρολογίου· αυτά όμως είναι ήδη καταγεγραμμένα, δεν έχει μείνει κάτι να προσθέσω!

---

type="range"

Εδώ έχουμε πρόβλημα! Το πεδίο αυτό εμφανίζεται με πολύ διαφορετικό τρόπο σε Chrome / Opera και σε οποιοδήποτε άλλο browser και αυτό δεν είναι πολύ… χρήσιμο αφού, π.χ. για να δω την τιμή που έχω επιλέξει πρέπει να χρησιμοποιήσω Javascript. Θα δοκιμάσω μερικά στυλ να δω τι θα γίνει:

input[type="range"] {
	border:0 none;
	background-color:#009;
	color:#fff;
	width:60px;
	height:16px;
}

Το border δεν το χρειαζόμαστε — άλλωστε δεν εμφανίζεται καν σε Chrome και μάλλον είναι καλύτερα έτσι. Το background-color αγνοείται από τους browsers που σχεδιάζουν sliders αντί για inputs, όπως επίσης και το color, αφού δεν υπάρχει κείμενο να πάρει χρώμα. Οι περισσότεροι browsers σέβονται τις διαστάσεις που ζήτησα εκτός από τον Chrome που αδιαφορεί για το ύψος. Στον Opera βέβαια το ύψος ενδέχεται να δημιουργήσει πρόβλημα αφού μπορεί το χειριστήριο να γίνει τόσο μικρό που να είναι άχρηστο! Η γνώμη μου είναι -ντρέπομαι που το λέω- να χρησιμοποιήσετε jQuery UI για αυτή τη δουλειά (ή κάποιο άλλο Javascript) αφού οι διαφορές δεν είναι μόνο οπτικές αλλά και λειτουργικές.

---

type="date"

Για την ακρίβεια, όχι μόνο date αλλά και διάφορες παραλλαγές ημερομηνίας και ώρας. Ξεχάστε το καλύτερα, μόνο ο Opera κάνει κάτι χρήσιμο με αυτά τα πεδία ενώ ο Chrome εμφανίζει τα άσχημα μικρά βελάκια του number που δεν βοηθούν καθόλου στη συμπλήρωση του πεδίου. Καλύτερα να μείνουμε στην Javascript για λίγο ακόμα.

---

type="search"

Το search
δεν έχει κάποια ιδιαιτερότητα εκτός από το x που εμφανίζεται στην δεξιά μεριά σε Webkit browsers και μου επιτρέπει να καθαρίσω το πεδίο.

---

type="color"

Color; Αλήθεια; Give me a break!

---

Επίλογος

Μπορούμε από τώρα, άφοβα, να εντάξουμε τα email, url, number και search στον κώδικά μας αφού είναι σίγουρο πως οι browsers σιγά-σιγά θα χρησιμοποιήσουν αυτά τα πεδία για να διευκολύνουν τον χρήστη, όπως π.χ. κάνει το iOS με τα email, url και number, ενώ δεν δημιουργούν προβλήματα σε παλιότερους browsers. Χρειάζεται λίγες γραμμές παραπάνω CSS αλλά αυτό δεν είναι πρόβλημα. Για τα υπόλοιπα πεδία, range, date (και παραλλαγές) και color, εγώ δηλώνω μάλλον επιφυλακτικός αφού η εμφάνιση διαφέρει πολύ από browser σε browser και ίσως τελικά να χρειαστείτε περισσότερη Javascript. Ίσως να είναι νωρίς ακόμα, θα δούμε!