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

Εισαγωγή:checked + label:before ( περιεχόμενο: "\2022", χρώμα: #f3f3f3, μέγεθος γραμματοσειράς: 30 εικονοστοιχεία, στοίχιση κειμένου: κέντρο, ύψος γραμμής: 18 εικονοστοιχεία; )

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

Πλαίσια ελέγχου στυλ

Τώρα ας προχωρήσουμε στο στυλ των πλαισίων ελέγχου. Αρχικά, ας κρύψουμε ξανά το στοιχείο:

Είσοδος (οθόνη: καμία;)

Εφόσον καταργούμε την εμφάνιση του προεπιλεγμένου πλαισίου ελέγχου με το ψευδοστοιχείο :before, απλώς θα προσθέσουμε ένα περίγραμμα:

Ετικέτα πλαισίου ελέγχου: πριν (ακτίνα περιγράμματος: 3 εικονοστοιχεία; )

Στη συνέχεια προσθέτουμε το σύμβολο επιλογής που θα εμφανιστεί όταν κάνετε κλικ στο πλαίσιο ελέγχου. Ας το κάνουμε αυτό κατ' αναλογία με τον ραδιοκύκλο. Χρειάζεται να μετατρέψουμε τον χαρακτήρα HTML αυτή τη φορά; ✓.

Εισαγωγή:checked + label:before ( περιεχόμενο: "\2713"; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); μέγεθος γραμματοσειράς: 15px; χρώμα: #f3f3f3; στοίχιση κειμένου: κέντρο ; ύψος γραμμής: 15 px; )

Στο τέλος, αυτό πρέπει να πάρουμε:

Αποτελέσματα

Σε αυτό το σεμινάριο, εξετάσαμε μια μέθοδο που μπορείτε να χρησιμοποιήσετε για να εμφανίσετε τα κουμπιά επιλογής και τα πλαίσια ελέγχου που χρειάζεστε. Εφόσον χρησιμοποιήσαμε CSS3, αυτή η τεχνική θα λειτουργήσει μόνο σε προγράμματα περιήγησης που υποστηρίζουν αυτήν την τεχνολογία. Για να επιτύχετε παρόμοια αποτελέσματα σε παλαιότερα προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε το κατάλληλο

Για να σχεδιάσετε πλαίσια ελέγχου και κουμπιά επιλογής όπως απαιτείται από τη σχεδίαση, σήμερα δεν είναι απαραίτητο να χρησιμοποιείτε λύσεις JavaScript (όπως το πρόσθετό μου), επειδή. για αυτό μπορείτε να χρησιμοποιήσετε μόνο CSS και με συμβατό προς τα πίσωγια παλαιότερα προγράμματα περιήγησης (δηλαδή όχι σε βάρος της χρηστικότητας) που δεν υποστηρίζουν σύγχρονους κανόνες CSS.

Με άλλα λόγια - μέσα σύγχρονα προγράμματα περιήγησηςτα πλαίσια ελέγχου και τα κουμπιά επιλογής θα φαίνονται όμορφα, σύμφωνα με την προβλεπόμενη σχεδίαση, αλλά στα παλιά (αυτό ισχύει για Internet Explorerέκδοση 8 και παρακάτω) θα παραμείνουν με την "προεπιλεγμένη" σχεδίαση, συγκεκριμένη για κάθε συγκεκριμένο λειτουργικό σύστημα.

Εκτός, διατηρεί την ικανότητα επικύρωσης HTML5στοιχεία στυλ (κάτι που μπορεί να μην συμβαίνει όταν χρησιμοποιείτε πρόσθετα JavaScript). Στα σύγχρονα προγράμματα περιήγησης, η υποστήριξή του είναι από καιρό ο κανόνας.

Σημαντικά Χαρακτηριστικά

Για να πετύχετε, είναι σημαντικό να λάβετε υπόψη τα ακόλουθα:

  1. Εκτός, στην πραγματικότητα, η ίδια η ετικέτα στοιχείου, την οποία θέλουμε να διαμορφώσουμε όμορφα ( ή ), χρειάζεστε μια ετικέτα
  2. Ετικέτα πρέπει να είναι πριν από την ετικέτα

Το κόλπο είναι να χρησιμοποιήσετε τους :checked και :not ψευδο-επιλογείς. Ταυτόχρονα, το ίδιο το πλαίσιο ελέγχου ή το κουμπί επιλογής γίνεται αόρατο και η εξομοίωση τους πραγματοποιείται χρησιμοποιώντας ψευδοστοιχεία: πριν και: μετά για την ετικέτα

Στυλ για σύγχρονα προγράμματα περιήγησης

Εξετάστε και τις δύο επιλογές για τη θέση του στοιχείου φόρμας με στυλ. Ποιο είναι το πιο βολικό εξαρτάται από εσάς. Η ουσία αυτού δεν αλλάζει.

Οι ετικέτες πλαισίου ελέγχου και κουμπιού επιλογής τοποθετούνται πριν από την ετικέτα

Σε κώδικα HTMLμοιάζει με αυτό:

Για άλλη μια φορά θέλω να επιστήσω την προσοχή σας - tag αναγκαίωςθα πρέπει να εντοπιστούν πρινετικέτα

Κωδικός CSS για το πλαίσιο ελέγχουθα είναι έτσι:

Πλαίσιο ελέγχου ( θέση: απόλυτη; δείκτης z: -1; αδιαφάνεια: 0; περιθώριο: 10 εικονοστοιχεία 0 0 20 εικονοστοιχεία; ) .πλαίσιο ελέγχου + ετικέτα ( θέση: σχετική; συμπλήρωση: 0 0 0 60 εικονοστοιχεία; δρομέας: δείκτης; ) .πλαίσιο ελέγχου + ετικέτα :before ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: -4 εικονοστοιχεία; αριστερά: 0; πλάτος: 50 εικονοστοιχεία; ύψος: 26 εικονοστοιχεία; ακτίνα περιγράμματος: 13 εικονοστοιχεία; φόντο: #CDD1DA; πλαίσιο-σκιά: ένθετο 0 2 εικονοστοιχεία 3 εικονοστοιχεία: rgba( 0,0,0,.2); μετάβαση: .2 s; ) .checkbox + label:after ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: -2 px; αριστερά: 2 px; πλάτος: 22 px; ύψος: 22 px; περίγραμμα -ακτίνα: 10 εικονοστοιχεία; φόντο: #FFF; πλαίσιο-σκιά: 0 2 εικονοστοιχεία 5 εικονοστοιχεία rgba(0,0,0,.3); μετάβαση: .2 δευτ. .checkbox:checked + label:after ( αριστερά: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 ,0,.7);)

Κωδικός CSS για το κουμπί επιλογήςθα είναι έτσι:

Ραδιόφωνο ( θέση: απόλυτη; δείκτης z: -1; αδιαφάνεια: 0; περιθώριο: 10 εικονοστοιχεία 0 0 7 εικονοστοιχεία; ) .ραδιόφωνο + ετικέτα (θέση: σχετική; πλήρωση: 0 0 0 35 εικονοστοιχεία; δρομέας: δείκτης; ) .ραδιόφωνο + ετικέτα :before ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: -3 εικονοστοιχεία; αριστερά: 0; πλάτος: 22 εικονοστοιχεία; ύψος: 22 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχείο συμπαγές #CDD1DA; ακτίνα περιγράμματος: 50%; φόντο: #FFF; ) . ραδιόφωνο + ετικέτα:μετά ( περιεχόμενο: ""; θέση: απόλυτο; επάνω: 1 εικονοστοιχεία; αριστερά: 4 εικονοστοιχεία; πλάτος: 16 εικονοστοιχεία; ύψος: 16 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; φόντο: #9FD468; πλαίσιο-σκιά: ένθετο 0 1 εικονοστοιχεία 1px rgba(0,0,0,.5); αδιαφάνεια: 0; μετάβαση: 0.2 δευτ. 0 0 0 3px rgba(255,255,0,.7); )

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

Οι ετικέτες του πλαισίου ελέγχου και του κουμπιού επιλογής βρίσκονται μέσα στην ετικέτα

Κώδικας HTMLσε αυτή την περίπτωση θα ήταν:

Εναλλάσσω το πλαίσιο ελέγχου

Κατ' αναλογία με προηγούμενη έκδοση- ετικέτα αναγκαίωςθα πρέπει να εντοπιστούν πρινετικέτες με την κλάση .checkbox__text και .radio__text .

Κωδικός CSS για το πλαίσιο ελέγχουθα είναι έτσι:

Είσοδος πλαισίου ελέγχου ( θέση: απόλυτη; δείκτης z: -1; αδιαφάνεια: 0; περιθώριο: 10 εικονοστοιχεία 0 0 20 εικονοστοιχεία; ) .checkbox__text ( θέση: σχετική; συμπλήρωση: 0 0 0 60 εικονοστοιχεία; δρομέας: δείκτης; ) .checkbox__text:before ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: -4 εικονοστοιχεία; αριστερά: 0; πλάτος: 50 εικονοστοιχεία; ύψος: 26 εικονοστοιχεία; ακτίνα περιγράμματος: 13 εικονοστοιχεία; φόντο: #CDD1DA; πλαίσιο-σκιά: ένθετο 0 2 εικονοστοιχεία 3 εικονοστοιχεία rgba(0,0 ,0,.2); μετάβαση: .2s; ) .checkbox__text:after ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: -2 px; αριστερά: 2 px; πλάτος: 22 px; ύψος: 22 px; ακτίνα περιγράμματος: 10 px; φόντο: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); μετάβαση: .2s; ) :checked + .checkbox__text:after (αριστερά: 26px; ) .checkbox input:focus + . checkbox__text:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255.255.0.7); )

Κωδικός CSS για το κουμπί επιλογήςθα είναι έτσι:

Είσοδος ραδιοφώνου ( θέση: απόλυτη; δείκτης z: -1; αδιαφάνεια: 0; περιθώριο: 10 εικονοστοιχεία 0 0 7 εικονοστοιχεία; ) .radio__text ( θέση: σχετική; padding: 0 0 0 35 px; δρομέας: δείκτης; ) .radio__text:before ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: -3 εικονοστοιχεία; αριστερά: 0; πλάτος: 22 εικονοστοιχεία; ύψος: 22 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχείο συμπαγές #CDD1DA; ακτίνα περιγράμματος: 50%; φόντο: #FFF; ) .radio_text:after ( περιεχόμενο: ""; θέση: απόλυτη; επάνω: 1 εικονοστοιχεία; αριστερά: 4 εικονοστοιχεία; πλάτος: 16 εικονοστοιχεία; ύψος: 16 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; φόντο: #9FD468; πλαίσιο-σκιά: ένθετο 0 1 εικονοστοιχεία 1 εικονοστοιχεία rgba(0, 0,0,.5); αδιαφάνεια: 0; μετάβαση: .2s; ) .radio input:checked + .radio__text:after ( opacity: 1; ) .radio input:focus + .radio__text:before ( box-shadow: 0 0 0 3px rgba(255,255,0,.7); )

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

Στυλ για παλαιότερα προγράμματα περιήγησης

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

/* Πρώτα ορίστε στυλ για IE8 και παλαιότερες εκδόσεις, π.χ. Εδώ είμαστε ένα μικρό εξευγενιστικό πλαίσιο ελέγχου. */ .checkbox ( κατακόρυφη στοίχιση: επάνω; πλάτος: 17 εικονοστοιχεία; ύψος: 17 εικονοστοιχεία; περιθώριο: 0 3 εικονοστοιχεία 0 0; ) /* Αυτό ισχύει για όλα τα προγράμματα περιήγησης εκτός από τα πολύ παλιά που δεν υποστηρίζουν επιλογείς συν. Δείχνουμε ότι η ετικέτα μπορεί να κάνει κλικ. */ .checkbox + label ( δρομέας: δείκτης; ) /* Ακολουθεί το στυλ του πλαισίου ελέγχου στα σύγχρονα προγράμματα περιήγησης, καθώς και στο IE9 και μεταγενέστερα. Λόγω του γεγονότος ότι τα παλαιότερα προγράμματα περιήγησης δεν υποστηρίζουν επιλογείς :not και :checked, όλα τα παρακάτω στυλ δεν θα λειτουργούν σε αυτά. Σε αυτήν την περίπτωση, το checked ορίζεται χωρίς άνω και κάτω τελεία μπροστά, για κάποιο λόγο λειτουργεί με αυτόν τον τρόπο. */ .checkbox:not(checked) ( position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; ) .checkbox:not(checked) + label ( position: σχετική; padding: 0 0 0 60 px; ) .checkbox:not(checked) + label:fore ( content: ""; position: absolute; top: -4px; left: 0; πλάτος: 50px; ύψος: 26px; border-radius: 13px; background : #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); μετάβαση: .2s; ) .checkbox:not(checked) + label:after ( content: ""; position: absolute ; επάνω: -2 εικονοστοιχεία, αριστερά: 2 εικονοστοιχεία, πλάτος: 22 εικονοστοιχεία, ύψος: 22 εικονοστοιχεία, ακτίνα περιγράμματος: 10 εικονοστοιχεία, φόντο: #FFF, πλαίσιο-σκιά: 0 2 εικονοστοιχεία 5 εικονοστοιχεία rgba(0,0,0,.3), μετάβαση: .2s; ) .checkbox:checked + label:fore ( φόντο: #9FD468; ) .checkbox:checked + label:after ( αριστερά: 26px; ) .checkbox:focus + label:before ( box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7); )

Κωδικός CSS για το κουμπί επιλογής:

Ραδιόφωνο ( κατακόρυφη στοίχιση: επάνω, πλάτος: 17 εικονοστοιχεία, ύψος: 17 εικονοστοιχεία, περιθώριο: 0 3 εικονοστοιχεία 0 0; ) .radio + label ( δρομέας: δείκτης; ) .radio:not(checked) (θέση: απόλυτη, δείκτης z: -1; αδιαφάνεια: 0; περιθώριο: 10 εικονοστοιχεία 0 0 7 εικονοστοιχεία; ) .radio:not(checked) + label ( position: σχετική; padding: 0 0 0 35px; ) .radio:not(checked) + label:before ( περιεχόμενο : ""; θέση: απόλυτη; επάνω: -3 εικονοστοιχεία; αριστερά: 0; πλάτος: 22 εικονοστοιχεία; ύψος: 22 εικονοστοιχεία; περίγραμμα: 1 εικονοστοιχείο συμπαγές #CDD1DA; ακτίνα περιγράμματος: 50%; φόντο: #FFF; ) .radio:not( επιλεγμένο) + label:after ( περιεχόμενο: ""; θέση: απόλυτο; επάνω: 1 εικονοστοιχεία; αριστερά: 4 εικονοστοιχεία; πλάτος: 16 εικονοστοιχεία; ύψος: 16 εικονοστοιχεία; ακτίνα περιγράμματος: 50%; φόντο: #9FD468; πλαίσιο-σκιά: ένθετο 0 1px 1px rgba(0,0,0,.5); αδιαφάνεια: 0; μετάβαση: 0.2s; ) .radio:checked + label:after ( opacity: 1; ) .radio:focus + label:before ( box-shadow : 0 0 0 3px rgba(255,255,0,.7); )

Παραδείγματα

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

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

Μονό πλαίσιο ελέγχου

Ας δημιουργήσουμε μια απλή φόρμα με ένα πλαίσιο ελέγχου:

Χρειάζεστε πρόσβαση με αναπηρικό αμαξίδιο;

Σε σενάριο PHP ( checkbox-form.php) μπορούμε να πάρουμε την επιλεγμένη επιλογή από τον πίνακα $_POST. Εάν $_POST['formWheelchair'] είναι " Ναί", στη συνέχεια επιλέγεται το πλαίσιο ελέγχου για την επιλογή. Εάν το πλαίσιο ελέγχου δεν έχει οριστεί, το $_POST['formWheelchair'] δεν θα οριστεί.

Ακολουθεί ένα παράδειγμα επεξεργασίας φόρμας στην PHP:

$_POST['formSubmit'] έχει οριστεί σε " Ναί”, αφού αυτή η τιμή ορίζεται στο χαρακτηριστικό πλαισίου ελέγχου τιμή:

Αντί " Ναί"Μπορείτε να ορίσετε την τιμή" 1 " ή " επί". Βεβαιωθείτε ότι ο κώδικας επικύρωσης στο σενάριο PHP είναι επίσης ενημερωμένος.

Ομάδα Che-box

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

Ας πάρουμε το παραπάνω παράδειγμα και με βάση αυτό θα παρέχουμε στον χρήστη μια λίστα με κτίρια:

Σε ποια κτίρια θέλετε πρόσβαση;
Κτίριο βελανιδιών
καφέ αίθουσα
Σύμπλεγμα Carnegie
Drake Commons
Elliot House

Σημειώστε ότι το πλαίσιο ελέγχου τύπου εισαγωγής έχει το ίδιο όνομα (formDoor ). Και ότι κάθε όνομα τελειώνει σε . Χρησιμοποιώντας το ίδιο όνομα, υποδεικνύουμε ότι τα πλαίσια ελέγχου είναι συνδεδεμένα. Με , υποδεικνύουμε ότι οι επιλεγμένες τιμές θα είναι διαθέσιμες στο σενάριο PHP ως πίνακας. Δηλαδή, $_POST['formDoor'] επιστρέφει περισσότερες από μία σειρές, όπως στο παραπάνω παράδειγμα. Αντίθετα, επιστρέφεται ένας πίνακας που αποτελείται από όλες τις τιμές πλαισίου ελέγχου που επιλέχθηκαν.

Για παράδειγμα, αν επέλεγα όλες τις επιλογές, το $_POST['formDoor'] θα ήταν ένας πίνακας που αποτελείται από: (A, B, C, D, E). Ακολουθεί ένα παράδειγμα του τρόπου εμφάνισης της τιμής ενός πίνακα:

Εάν δεν έχει επιλεγεί καμία επιλογή, το $_POST['formDoor'] δεν θα οριστεί, επομένως χρησιμοποιήστε μια συνάρτηση "κενό" για να ελέγξετε αυτήν την περίπτωση. Εάν δοθεί μια τιμή, κάνουμε βρόχο μέσω του πίνακα χρησιμοποιώντας τη συνάρτηση count(), η οποία επιστρέφει το μέγεθος του πίνακα και εκτυπώνει τα κτίρια που επιλέχθηκαν.

Εάν το πλαίσιο ελέγχου είναι επιλεγμένο για " Κτίριο βελανιδιών", τότε ο πίνακας θα περιέχει την τιμή "A". Ομοίως, εάν " Σύμπλεγμα Carnegie", ο πίνακας θα περιέχει το C .

Έλεγχος εάν έχει επιλεγεί μια συγκεκριμένη επιλογή

Συχνά είναι απαραίτητο να ελέγξετε εάν έχει επιλεγεί μια συγκεκριμένη επιλογή από όλα τα διαθέσιμα στοιχεία στην ομάδα πλαισίου ελέγχου τύπου εισαγωγής HTML. Εδώ είναι μια συνάρτηση που κάνει αυτόν τον έλεγχο:

συνάρτηση IsChecked($chkname,$value) (if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( ​​​​return true; )) ) επιστροφή false;)

Για να το χρησιμοποιήσετε, απλώς καλέστε το IsChecked ( πλαίσιο ελέγχου_όνομα, τιμή). Για παράδειγμα:

if(IsChecked("formDoor","A")) ( //κάνω κάτι... ) //ή χρησιμοποιήστε στον υπολογισμό... $price += IsChecked("formDoor","A") ? 100; $price += IsChecked("formDoor","B") ? 20:0;

Λήψη δείγματος κώδικα

Λήψη δείγματος κώδικα φόρμας PHP από το πλαίσιο ελέγχου τύπου εισαγωγής PHP .

Αυτή η δημοσίευση είναι μετάφραση του άρθρου " Χειρισμός πλαισίου ελέγχου στο α Φόρμα PHPεπεξεργαστή» προετοιμάστηκε από μια φιλική ομάδα έργου

Σημάδι επιλογής Φόρμα HTML, ή το "πλαίσιο ελέγχου" ορίζεται από την ετικέτα εισαγωγή, που έχει τύπο πλαίσιο ελέγχου.

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

Εάν υπάρχει ανάγκη να υπάρχει το πλαίσιο ελέγχου από προεπιλογή, τότε πρέπει να προσθέσετε το χαρακτηριστικό στην ετικέτα τετραγωνισμένος. Θα μοιάζει με αυτό:

Και έτσι φαίνεται το πλαίσιο ελέγχου στο πρόγραμμα περιήγησης:

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

Ο κωδικός για τη φόρμα που δίνεται στην αρχή του άρθρου θα είναι ο εξής:



Όσον αφορά την ονομασία, σε επαγγελματικό περιβάλλον, το πεδίο ονομάζεται «checkbox».

Γεια σας, αγαπητοί αναγνώστες του ιστότοπου. Επόμενο στοιχείο, που σήμερα θα έχουμε χρόνο να αποσυναρμολογήσουμε κουμπιά επιλογής και πλαίσια ελέγχου σε html. Συνήθως χρησιμοποιούνται για να κάνουν μια ερώτηση μέσα σε μια φόρμα (μιλήσαμε για τη δημιουργία φορμών) και, κατά συνέπεια, μέσω αυτών μπορούμε να προσφέρουμε σε ένα άτομο επιλογές για απάντηση. Ωστόσο, μπορεί να επιλέξει μόνο μία από αυτές τις επιλογές.

Κουμπιά ραδιοφώνου - τύπος ραδιοφώνου

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

Προσδιορίστε τον τύπο ραδιόφωνο. Ας δώσουμε στο κουμπί ένα όνομα και ας καθορίσουμε μια τιμή, π.χ. ποια τιμή θα σταλεί στον χειριστή εάν αυτό το κουμπί είναι ενεργό. Για αυτό το κουμπί, θα καθορίσουμε την τιμή " Ναί", επειδή αυτό το κουμπί θα είναι υπεύθυνο για μια θετική απάντηση.

Ας προσθέσουμε μια ετικέτα επιγραφήμε την απάντηση" Ναί” έτσι ώστε ένα άτομο να κάνει κλικ στην ετικέτα και το κουμπί ενεργοποιείται αυτόματα.

Τώρα ας δημιουργήσουμε ένα αντίθετο κουμπί για αυτό με την απάντηση " Δεν". Για να το κάνετε αυτό, αντιγράψτε επιγραφήκαι εισάγετε μετά το πρώτο επιγραφή. Αλλάξτε το «Ναι» σε «Όχι» και αλλάξτε την τιμή του «ναι» σε «όχι». Σημειώστε ότι πρέπει να αφήσουμε το όνομα ίδιο. Αυτό θα πει στο πρόγραμμα περιήγησης ότι αυτά τα κουμπιά επιλογής ανήκουν στην ίδια ομάδα και ότι είναι αμοιβαία αποκλειόμενα. Δηλαδή, αν ενεργοποιήσετε το ένα κουμπί, το άλλο απενεργοποιείται. Εάν τα ονόματα των κουμπιών είναι διαφορετικά, τότε και τα δύο κουμπιά μπορούν να ενεργοποιηθούν ταυτόχρονα.


Έτσι μπορείτε να περάσετε την τιμή = την επιλογή μιας ή άλλης απάντησης στον χειριστή.

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

Σας αρέσει να εξοικονομείτε χρόνο;

Και κάτι ακόμα που μπορεί να σας φανεί χρήσιμο είναι αυτόματη ενεργοποίησηκουμπιά αρχικά. Για να γίνει αυτό, υπάρχει ένα ειδικό χαρακτηριστικό που μπορεί να προστεθεί στο επιθυμητό κουμπί. Αυτό το κουμπί θα ενεργοποιηθεί αρχικά. Το χαρακτηριστικό καλείται τετραγωνισμένος- μπορεί να μεταφραστεί ως επισημασμένο. Αυτό το χαρακτηριστικό δεν χρειάζεται να οριστεί σε καμία τιμή.

Σας αρέσει να εξοικονομείτε χρόνο;

Και εδώ είναι το τελικό αποτέλεσμα.

Πλαίσια ελέγχου - τύπος πλαισίου ελέγχου

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

Εάν ελέγξετε τον κωδικό μας σε ένα πρόγραμμα περιήγησης, θα μοιάζει με αυτό:

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

Ποια εργαλεία εξοικονόμησης χρόνου χρησιμοποιείτε;

Φροντίστε να ονομάσετε κάθε πλαίσιο ελέγχου με το μοναδικό σας όνομα.
Εάν αποθηκεύσετε το αρχείο και ελέγξετε, μπορείτε να δείτε τα ακόλουθα.