Ο :requiredεπιλογέας ψευδοκλάσης στο CSS επιτρέπει στους συγγραφείς να επιλέξουν και να διαμορφώσουν οποιοδήποτε στοιχείο ταιριάζει με το requiredχαρακτηριστικό. Οι φόρμες μπορούν εύκολα να υποδείξουν ποια πεδία πρέπει να έχουν έγκυρα δεδομένα πριν από την υποβολή της φόρμας, αλλά επιτρέπει στον χρήστη να αποφύγει την αναμονή που έχει να κάνει ο διακομιστής να είναι ο μοναδικός επικυρωτής της εισόδου του χρήστη.
Ας υποθέσουμε ότι έχουμε μια είσοδο με ένα χαρακτηριστικό type="name"και την κάνουμε μια απαιτούμενη είσοδο χρησιμοποιώντας το requiredboolean χαρακτηριστικό 1 :
Τώρα μπορούμε να σχεδιάσουμε αυτήν την είσοδο χρησιμοποιώντας τον :requiredψευδό επιλογέα τάξης:
/* style all elements with a required attribute */ :required ( background: red; )Μπορούμε επίσης να διαμορφώσουμε τα απαιτούμενα πεδία φόρμας χρησιμοποιώντας απλούς επιλογείς, καθώς και αλυσοδεμένους πρόσθετους ψευδο-επιλογείς τάξης:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Διαδήλωση
Δείτε το στυλό: απαιτείται στυλ από τον Chris Coyier (@chriscoyier) στο CodePen.
Σημεία ενδιαφέροντος
Το requiredχαρακτηριστικό αντιμετωπίζεται ως boolean που σημαίνει ότι δεν απαιτεί τιμή. Απλά έχοντας requiredένα στοιχείο, το πρόγραμμα περιήγησης γνωρίζει ότι υπάρχει αυτό το χαρακτηριστικό και ότι η αντίστοιχη είσοδος είναι στην πραγματικότητα ένα απαιτούμενο πεδίο. Αν και, σύμφωνα με την προδιαγραφή W3C, το απαιτούμενο χαρακτηριστικό λειτουργεί επίσης με μια κενή τιμή ή μια τιμή με το όνομα των χαρακτηριστικών.
Το απαιτούμενο χαρακτηριστικό ζητά επίσης από το πρόγραμμα περιήγησης να χρησιμοποιεί εγγενείς επεξηγήσεις, όπως το μήνυμα φυσαλίδων που απεικονίζεται από την επίδειξη.
Για εκείνες τις εισόδους που δεν έχουν στυλ :required, οι συγγραφείς μπορούν επίσης να προσαρμόσουν τα μη απαιτούμενα στοιχεία χρησιμοποιώντας τον :optionalεπιλογέα ψευδοκλάσης μαζί :invalidκαι τα :validοποία ενεργοποιούνται όταν πληρούνται οι απαιτήσεις δεδομένων του πεδίου φόρμας.
Η επικύρωση φόρμας μπορεί επίσης να συμπληρωθεί παράλληλα requiredμε το patternχαρακτηριστικό για να βοηθήσει το φιλτράρισμα δεδομένων ανάλογα με το typeχαρακτηριστικό της εισαγωγής . Τα μοτίβα μπορούν να γραφτούν ως κανονική έκφραση ή συμβολοσειρά. Στο παρακάτω παράδειγμα χρησιμοποιούμε μια κανονική έκφραση για να αντιστοιχίσουμε τη σύνταξη για μια διεύθυνση ηλεκτρονικού ταχυδρομείου.
Το :requiredχαρακτηριστικό λειτουργεί σε κουμπιά επιλογής. Εάν τοποθετήσετε το απαιτούμενο σε ένα κουμπί επιλογής (ή σε όλα), θα απαιτείται η συγκεκριμένη ομάδα κουμπιών επιλογής. Στα πλαίσια ελέγχου, απαιτείται κάθε ξεχωριστό πλαίσιο ελέγχου (για έλεγχο)
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Δυαδικά χαρακτηριστικά : Ένας αριθμός χαρακτηριστικών στο HTML5 είναι δυαδικά χαρακτηριστικά. Η παρουσία ενός δυαδικού χαρακτηριστικού σε ένα στοιχείο αντιπροσωπεύει την πραγματική τιμή και η απουσία του χαρακτηριστικού αντιπροσωπεύει την ψευδή τιμή. Εάν το χαρακτηριστικό υπάρχει, η τιμή του πρέπει να είναι είτε η κενή συμβολοσειρά είτε μια τιμή που αντιστοιχεί σε πεζά γράμματα για το κανονικό όνομα του χαρακτηριστικού, χωρίς κενό κενό ή τελικό κενό.