HTML5 Σύνδεση Σελίδα με φόρμες HTML5

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

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

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

Είσοδος HTML5

Ας ρίξουμε μια ματιά στην ακόλουθη σήμανση.

 
 
 
 
ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 
 
Κωδικός πρόσβασης 
 
 
 
 
 
 

Εάν έχετε ήδη επεξεργαστεί φόρμες HTML, αυτό θα φαίνεται οικείο. Αλλά, θα παρατηρήσετε επίσης διαφορές εκεί. Οι είσοδοι έχουν δείκτη κράτησης θέσης και απαιτείται χαρακτηριστικά, τα οποία είναι νέα χαρακτηριστικά στο HTML5.

Θέση θέσης

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

Απαιτούμενη ιδιότητα

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

Νέος επιλογέας εισάγεται επίσης στο CSS3, :απαιτείται για να στοχεύσετε πεδία με απαιτείται Χαρακτηριστικό. Ακολουθεί ένα παράδειγμα.

 είσοδος: απαιτείται border: 1px solid red;  

Τύπος εισόδου ηλεκτρονικού ταχυδρομείου

Ο πρώτος τύπος εισόδου είναι ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ που είναι στην πραγματικότητα ένα νέο τύπο πεδίου προστέθηκε επίσης σε HTML5. ο ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ θα δώσει τη βασική επικύρωση διεύθυνσης ηλεκτρονικού ταχυδρομείου στο πεδίο. Όταν ο χρήστης δεν συμπληρώσει το πεδίο με μια διεύθυνση ηλεκτρονικού ταχυδρομείου, το πρόγραμμα περιήγησης θα εμφανίσει την ακόλουθη ειδοποίηση.

Η χρήση των τύπων εισαγωγής μηνυμάτων ηλεκτρονικού ταχυδρομείου μπορεί επίσης να προσφέρει καλύτερη εμπειρία στους χρήστες κινητής τηλεφωνίας, όπως οι χρήστες iPhone και Android, όπου θα εμφανίζεται το βελτιστοποιημένο με ηλεκτρονικό ταχυδρομείο πληκτρολόγιο οθόνης με μια αφιερωμένη “@” για να πληκτρολογήσετε τη διεύθυνση email πιο γρήγορα.

Τα Downsides

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

ο δείκτη κράτησης θέσης Χαρακτηριστικό, υποστηρίζεται μόνο σε σύγχρονα προγράμματα περιήγησης - Firefox 3.7+, Safari 4+, Chrome 4+ και Opera 11+. Έτσι, αν χρειαστεί να λειτουργήσει σε μη υποστηριζόμενα προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε αυτό το polyfills σε συνδυασμό με το Modernizr.

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

Έτσι, η χρήση του JavaScript για την επικύρωση του απαιτούμενου πεδίου είναι (μέχρι στιγμής) μια καλύτερη επιλογή.

 η συνάρτηση validateForm () var x = document.forms ["login"] ["username"]. αν (x == null || x == "") alert ("συμπληρώστε το όνομα χρήστη"); επιστροφή ψευδής?  

Σχεδίαση των εντύπων

Εντάξει, τώρα ας διακοσμήσουμε τη φόρμα σύνδεσής μας με το CSS. Πρώτα θα δώσουμε στο φόντο ένα μοτίβο ξύλου στο html ετικέτα.

 html φόντο: url ('wood_pattern.png'); μέγεθος γραμματοσειράς: 10pt;  

Στη συνέχεια, πρέπει να αφαιρέσουμε την προεπιλεγμένη επένδυση και περιθώριο σε ul ετικέτα που αναδιπλώνει το σύνολο εισροές και επιπλέει το li προς τα αριστερά, ώστε οι είσοδοι να εμφανίζονται οριζόντια, δίπλα-δίπλα.

 .loginform ul padding: 0; περιθώριο: 0;  .loginform li εμφάνιση: εν σειρά? float: αριστερά.  

Από τότε που επιπλέουμε li, οι γονείς θα καταρρεύσουν, οπότε πρέπει να καθαρίσουμε τα πράγματα γύρω από τον γονέα με το hack με σαφήνεια.

 ετικέτα εμφάνιση: μπλοκ? χρώμα: # 999;  .cf: πριν, .cf: μετά από περιεχόμενο: ""; οθόνη: πίνακας;  .cf: μετά από clear: αμφότερα.  .cf * ζουμ: 1; : εστίαση περίγραμμα: 0;  

Στο CSS3 έχουμε τον επιλογέα άρνησης. Έτσι, θα το χρησιμοποιήσουμε για να στοχεύσουμε εισροές εκτός από το υποβάλλουν τύπου, που στην περίπτωση αυτή θα στοχεύει την είσοδο email και κωδικού πρόσβασης.

 .loginformform: όχι ([type = submit]) padding: 5px; περιθώριο-δεξιά: 10px; σύνορα: 1px στερεά rgba (0, 0, 0, 0.3); ακτίνα ακτίνων: 3px; box-shadow: ένθετο 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);  

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

 .είσοδος σύνδεσης [type = submit] border: 1px solid rgba (0, 0, 0, 0.3). φόντο: # 64c8ef; / * Παλιά προγράμματα περιήγησης * / background: -moz-linear-gradient (κορυφή, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / υπόβαθρο: -webkit-gradient (γραμμική, αριστερή κορυφή, αριστερά κάτω, έγχρωμη διακοπή (0%, # 64c8ef), έγχρωμη διακοπή (100%, # 00a2e2)). / * Chrome, Safari4 + * / φόντο: -webkit-γραμμική κλίση (κορυφή, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / φόντο: -ο-γραμμική κλίση (κορυφή, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / φόντο: -ms-γραμμική κλίση (κορυφή, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / φόντο: γραμμική κλίση (στο κάτω μέρος, # 64c8ef 0%, # 00a2e2 100%). / * W3C * / φίλτρο: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0). / * IE6-9 * / χρώμα: #fff; padding: 5px 15px; περιθώριο-δεξιά: 0; περιθώριο-κορυφή: 15px; ακτίνα ακτίνων: 3px; σκιά κειμένου: 1px 1px 0px rgba (0, 0, 0, 0.3);  

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

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

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

Σε αυτό το σεμινάριο εξετάσαμε μερικά νέα χαρακτηριστικά σε μορφές HTML5:δείκτη κράτησης θέσης, απαιτείται και ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ για να δημιουργήσετε μια απλή σελίδα σύνδεσης. Έχουμε επίσης έρθει από τα μειονεκτήματα των χαρακτηριστικών, έτσι μπορούμε να αποφασίσουμε μια καλύτερη προσέγγιση που θα εφαρμοστεί.

Στην επόμενη ανάρτηση θα εξετάσουμε μια άλλη νέα μορφή HTML5 χαρακτηριστικά, έτσι ώστε να μείνετε συντονισμένοι.