Μια ματιά σε HTML5 μορφοποιεί τύπους εισόδου Ημερομηνία, χρώμα και εύρος

Τα έντυπα βρίσκονται παντού σε ιστότοπους. Το Facebook, το Twitter, το Google - για να αναφέρουμε μερικά - απαιτούν από εμάς να συνδεθούμε ή να εγγραφούμε στην ιστοσελίδα μέσω μιας φόρμας, στην πραγματικότητα χρησιμοποιούμε επίσης μια φόρμα για τιτλοποίηση και ενημέρωση της κατάστασης σε κοινωνικές τοποθεσίες. Εν συντομία, η φόρμα είναι ένα πολύ σημαντικό μέρος για να μπορείτε να αλληλεπιδράσετε με έναν ιστότοπο.

Μια φόρμα ιστού είναι χτισμένη με εισόδους, στο παρελθόν έχουμε μόνο λίγες επιλογές για τους τύπους εισόδου. όπως κείμενο, Κωδικός πρόσβασης, ραδιόφωνο, πλαίσιο ελέγχου και υποβάλλουν. Τώρα, το HTML5 έρχεται με μεγάλες βελτιώσεις και εισάγει πολλούς νέους τύπους εισόδου στο spec.

Έτσι, σε αυτό το post θα σκάψουμε σε μερικά από τα νέα ενδιαφέροντα κομμάτια από το HTML5 Έντυπα ότι πιστεύουμε ότι πρέπει να τα δοκιμάσετε. ας τα ελέγξουμε.

Ημερομηνία επιλογής

Το πρώτο πράγμα που θα θέλαμε να ρίξουμε μια ματιά είναι το πρόγραμμα επιλογής ημερομηνίας. Η επιλογή ημερομηνίας είναι ένα συνηθισμένο πράγμα που μπορείτε να βρείτε στη φόρμα εγγραφής, ιδιαίτερα σε μερικούς ιστότοπους ή σε εφαρμογές όπως κράτηση πτήσεων και ξενοδοχείων.

Υπάρχουν πολλές βιβλιοθήκες JavaScript για να δημιουργήσετε τον επιλογέα ημερομηνίας. Τώρα, μπορούμε επίσης να δημιουργήσουμε ένα πολύ πιο εύκολο τρόπο με την είσοδο HTML5 ημερομηνία, ως εξής;

ο επιλογέα ημερομηνίας στο HTML5 βασικά λειτουργεί πολύ παρόμοια με το πώς έκανε οι βιβλιοθήκες JavaScript. όταν εστιάζουμε στο πεδίο ένα ημερολόγιο θα ξεπροβάλει και στη συνέχεια μπορούμε να περιηγηθείμε τους μήνες και τα έτη για να επιλέξετε την ημερομηνία.

Ωστόσο, κάθε πρόγραμμα περιήγησης που υποστηρίζει αυτήν τη στιγμή ημερομηνία ο τύπος εισόδου δηλαδή το Chrome, το Opera και το Safari εμφανίζουν αυτόν τον τύπο εισόδου λίγο διαφορετικά, γεγονός που μπορεί να οδηγήσει σε πρόβλημα ασυνέπειας στην εμπειρία του χρήστη και εδώ φαίνεται πώς φαίνεται.

Μερικές αξιοσημείωτες διαφορές μπορείτε να δείτε με μια ματιά από το παραπάνω screenshot. η Όπερα χρησιμοποίησε τη συντομογραφία των τριών γραμμάτων στα αγγλικά για το όνομα των ημερών - Sun, Mon, Thu κ.ο.κ., ενώ το Chrome χρησιμοποίησε την τοπική μου γλώσσα, το Safari - από την άλλη πλευρά - δουλεύει μάλλον περίεργο, δεν εμφανίζει ένα ημερολόγιο καθόλου.

Υπάρχουν επίσης και μερικοί νέοι εισαγωγή τύποι σε επιλέξτε πιο συγκεκριμένα την ημερομηνία ή την ώρα. μήνας, εβδομάδα, χρόνος, ημερομηνία ώρα και ημερομηνία-τοπική, που είμαστε βέβαιοι ότι η ίδια η λέξη-κλειδί είναι αρκετά απογοητευτική για να πει τι κάνει.

Μπορείτε να δείτε όλα αυτά σε δράση από τον παρακάτω σύνδεσμο, αλλά βεβαιωθείτε ότι το βλέπετε στην Opera 11 και παραπάνω, αφού, κατά τη διάρκεια της γραφής, είναι το μόνο πρόγραμμα περιήγησης που υποστηρίζει όλους αυτούς τους τύπους εισόδου.

• Ημερομηνία επίδειξης

Επιλογέας χρώματος

Επιλογέας χρώματος είναι συχνά απαραίτητη σε ορισμένες εφαρμογές που βασίζονται στον ιστό, όπως αυτή η γεννήτρια βαθμίδων CSS3, αλλά όλοι οι προγραμματιστές ιστού εξακολουθούν να βασίζονται στη βιβλιοθήκη JavaScript, όπως το jsColor, για να κάνουν τη δουλειά. Τώρα όμως μπορούμε να δημιουργήσουμε ένα πρόγραμμα επιλογής χρωμάτων με το HTML5 χρώμα τύπος εισόδου.

Για άλλη μια φορά, τα προγράμματα περιήγησης, σε αυτήν την περίπτωση τα Chrome και Opera, καθιστούν αυτόν τον τύπο εισόδου ελαφρώς διαφορετικό.

Η Όπερα εμφανίζει αρχικά την επιλογή βασικού χρώματος με το κλικ και το hex format του τρέχοντος χρωματισμένου χρώματος σε ένα αναπτυσσόμενο μενού, ενώ το Chrome θα εμφανίσει απευθείας την παλέτα χρωμάτων σε ένα νέο παράθυρο όταν κάνει κλικ.

Επιπλέον, μπορούμε επίσης να ορίσουμε το προεπιλεγμένο χρώμα με το αξία χαρακτηριστικό, ως εξής:

Με αυτόν τον τρόπο, όταν προβάλλεται στα μη υποστηριζόμενα προγράμματα περιήγησης, το εισαγωγή θα υποβαθμιστεί σε ένα πεδίο κειμένου και η προεπιλεγμένη τιμή θα είναι ορατή που μπορεί να δώσει ένα είδος υπόδειξης για τους χρήστες τι πρέπει να εισαχθεί στο πεδίο.

Εμφάνιση της τιμής χρώματος

Αντί να ανοίξετε το Photoshop μόνο για να αντιγράψετε το μαγεύω μπορείτε να δημιουργήσετε ένα απλό εργαλείο σε αυτόν τον τύπο εισόδου για να κάνετε τη δουλειά, αφού το παραγόμενο χρώμα είναι ήδη σε δεκαεξαδικό σχήμα, αυτό θα ήταν πραγματικά εύκολο.

Πρώτον, προσθέτουμε id επιλογέας χρώματος στην είσοδο και προσθέτουμε επίσης κενό div με id hexcolor δίπλα σε αυτό για να περιέχει την τιμή.

Χρειαζόμαστε το jQuery συνδεδεμένο στο κεφάλι του εγγράφου μας. Στη συνέχεια αποθηκεύουμε την τιμή χρώματος και την προστιθέμενη αξία div σε μια μεταβλητή, όπως έτσι.

 var χρώμα = $ ('#colorpicker'). hexcolor = $ ('# hexcolor'); 

Αποκτήστε την αρχική τιμή από το #επιλογέας χρώματος.

 hexcolor.html (χρώμα); 

... και, τέλος, να αλλάξετε την τιμή όταν αλλάξει το χρώμα που επιλέξατε.

 $ ('# colorpicker') στην ('αλλαγή', λειτουργία () hexcolor.html (this.value);); 

Αυτό είναι; Τώρα ας το δούμε σε δράση.

• Colorpicker Επίδειξη

Εύρος

ο εύρος ο τύπος εισόδου μας επιτρέπει να προσθέσουμε ένα ρυθμιστικό στο πρόγραμμα περιήγησης για την επιλογή ενός αριθμού σε μια περιοχή που μπορούμε επίσης να βρούμε στο jQuery UI.

Το απόσπασμα παραπάνω είναι βασικό για την υλοποίηση του εύρος τύπου εισόδου. Μπορούμε επίσης να αλλάξουμε τον προσανατολισμό του ρυθμιστή σε κάθετη χρησιμοποιώντας το CSS, ως εξής:

 είσοδος [τύπος = εύρος] πλάτος: 20px; ύψος: 200px; -webkit-εμφάνιση: ρυθμιστικό-κατακόρυφο.  

Επιπλέον, μπορούμε να ρυθμίσουμε το min και Μέγιστη εύρος των αριθμών, για παράδειγμα.

Στο απόσπασμα που ακολουθεί τίθεται το min στο μηδέν και 225 για το μέγιστο. Όταν δεν καθορίζονται ρητά, το πρόγραμμα περιήγησης θα εκτελείται από προεπιλογή 0 για το ελάχιστο έως 100 για το μέγιστο.

Εμφάνιση του αριθμού

Υπάρχει όμως ένας περιορισμός, ο αριθμός είναι αόρατος, δεν μπορούμε να δούμε τον παραγόμενο αριθμό / τιμή από το ρυθμιστικό στο πρόγραμμα περιήγησης. Για να εμφανίσετε τον αριθμό πρέπει να προσθέσετε λίγο JavaScript ή jQuery, και εδώ είναι πώς το κάνουμε.

Αρχικά προσθέτουμε ένα κενό div δίπλα στην είσοδο, στυλ το div αρκετά ώστε να μοιάζει με κουτί.

Στη συνέχεια, τοποθετήστε τον ακόλουθο κώδικα ο οποίος θα κάνει το ίδιο με τον παραπάνω κώδικα στο picker strongcolor, εκτός από το τώρα λαμβάνουμε την τιμή από το ρυθμιστικό.

 $ ('(#)') () () () () () ) output.html (this.value)))))? 

Τώρα, μπορείτε να δείτε το demo. Απλά μια υπενθύμιση, δείτε το demo σε αυτά τα προγράμματα περιήγησης - Chrome, Opera και Safari, καθώς ο Firefox και ο IE δεν υποστηρίζουν το εύρος τύπου εισόδου αυτή τη στιγμή.

• Εύρος επίδειξης

Τελικές λέξεις

Είναι σαφές ότι το HTML5 κάνει πολύ πιο εύκολη τη ζωή μας, εισάγοντας πολλούς νέους τύπους εισόδου. Αλλά όπως και οι υπόλοιπες λειτουργίες HTML5, η υποστήριξη είναι πολύ περιορισμένη, ειδικά σε παλαιότερα προγράμματα περιήγησης, οπότε πρέπει να χρησιμοποιήσουμε αυτά τα νέα χαρακτηριστικά με προσοχή, ειδικά τους νέους τύπους εισόδου που συζητήσαμε σε αυτή την ανάρτηση. Ημερομηνία, Χρώμα και Περιοχή.

Αλλά τελικά ελπίζουμε ότι τώρα έχετε περισσότερη διορατικότητα HTML5 Έντυπα. Σας ευχαριστούμε που διαβάσατε αυτήν την ανάρτηση και ελπίζουμε να το απολαύσετε.

• Διαδήλωση
• Λήψη πηγής

Περαιτέρω ανάγνωση

Ακολουθούν μερικές χρήσιμες συνδέσεις για να ανακαλύψετε περαιτέρω μορφές HTML.

• Νέα χαρακτηριστικά φόρμας στο HTML5 - Opera Dev.
• Η τρέχουσα κατάσταση των HTML5 εντύπων - Wufoo
• Χαρακτηριστικά φόρμας HTML5 - w3school.org
• Πότε μπορώ να χρησιμοποιήσω φόρμες HTML5; - CanIUse.com