Αυτό το άρθρο θα σας καθοδηγήσει στη δημιουργία ενός κουμπιού επιλογής HTML με τη βοήθεια ενός πρακτικού παραδείγματος.
Πώς να προσθέσετε ένα κουμπί ραδιοφώνου σε HTML;
Για να προσθέσετε ένα κουμπί επιλογής σε HTML, ακολουθήστε την παρακάτω σύνταξη:
< εισαγωγή τύπος = 'ραδιόφωνο' όνομα = '' αξία = '' >
Ακολουθεί η περιγραφή της δηλωμένης σύνταξης:
- ' τύπος ': Αυτό το χαρακτηριστικό καθορίζει τον τύπο εισόδου που θέλετε να δημιουργήσετε, όπως κείμενο, ραδιόφωνο, πλαίσιο ελέγχου και άλλα. Για να δημιουργήσετε ένα κουμπί επιλογής, η τιμή του χαρακτηριστικού πρέπει να οριστεί ως 'ραδιόφωνο'.
- ' όνομα ”: Καθορίζει το όνομα του στοιχείου εισόδου. Αυτό το χαρακτηριστικό θα πρέπει να είναι το ίδιο για τη λίστα των κουμπιών επιλογής.
- ' αξία ”: Καθορίζει την τιμή που θα αποσταλεί στον διακομιστή όταν το κουμπί επιλογής επισημανθεί ως επιλεγμένο.
Παράδειγμα: Προσθήκη κουμπιού ραδιοφώνου σε HTML
Αυτό το παράδειγμα θα συζητήσει τη διαδικασία προσθήκης ενός κουμπιού επιλογής σε HTML χρησιμοποιώντας το κουμπί επιλογής εισαγωγής. Σε
Βήμα 1: Δημιουργία αρχείου HTML
Πρώτα, προσθέστε μια ετικέτα
Μέσα στο δημιουργημένο
- Πρώτα, προσθέστε το ' ετικέτα ” για να δώσετε μια επικεφαλίδα στη σελίδα.
- Μετά ένα ' ετικέτα για μια παράγραφο ή γραμμή κειμένου.
- Μετά από αυτό, η ετικέτα εισαγωγής προστίθεται με ένα χαρακτηριστικό ' τύπος «έχοντας αξία» ραδιόφωνο ', το όνομα ορίζεται ως επιλογή και ' αξία ' όπως και ' το κόκκινο '. Σε κάθε κουμπί επιλογής που έχει το ίδιο όνομα δίνονται διαφορετικές τιμές. Το ίδιο όνομα αντιπροσωπεύει την ίδια ομάδα ή λίστα.
- Εάν θέλετε να προσθέσετε ένα κουμπί που είναι από προεπιλογή επισημασμένο ως επιλεγμένο, τότε αντιστοιχίστε το χαρακτηριστικό ' τετραγωνισμένος ' σε αυτό το κουμπί.
- Τέλος, το « <ετικέτα> Το στοιχείο ' σε κάθε κουμπί επιλογής χρησιμοποιείται για την προσθήκη λεζάντων. Παρέχει επίσης καλύτερη προσβασιμότητα.
Ο παρακάτω κώδικας είναι η ερμηνεία του παραπάνω σεναρίου:
< h1 > Κουμπί ραδιοφώνου HTML h1 >< Π > Ποιο είναι το αγαπημένο σου χρώμα? Π >
< εισαγωγή τύπος = 'ραδιόφωνο' όνομα = 'επιλογή χρώματος' αξία = 'το κόκκινο' τετραγωνισμένος >
< επιγραφή Για = 'ραδιο1' > το κόκκινο επιγραφή >
< br >
< εισαγωγή τύπος = 'ραδιόφωνο' όνομα = 'επιλογή χρώματος' αξία = 'μπλε' >
< επιγραφή Για = 'ραδιο1' > Μπλε επιγραφή >
< br >
< εισαγωγή τύπος = 'ραδιόφωνο' όνομα = 'επιλογή χρώματος' αξία = 'πράσινος' >
< επιγραφή Για = 'ραδιο1' > Πράσινος επιγραφή >
< br >
< εισαγωγή τύπος = 'ραδιόφωνο' όνομα = 'επιλογή χρώματος' αξία = 'μωβ' >
< επιγραφή Για = 'ραδιο1' > Μωβ επιγραφή >
< br >
< εισαγωγή τύπος = 'ραδιόφωνο' όνομα = 'επιλογή χρώματος' αξία = 'οι υπολοιποι' >
< επιγραφή Για = 'ραδιο1' > Οι υπολοιποι επιγραφή >
Μπορεί να φανεί ότι τα κουμπιά επιλογής δημιουργήθηκαν με επιτυχία:
Μπορείτε επίσης να εφαρμόσετε στυλ στο κουμπί επιλογής που δημιουργήθηκε παραπάνω ακολουθώντας τον παρακάτω κώδικα CSS.
Βήμα 2: Εφαρμογή στυλ σε HTML
Ο ' div ' υποδεικνύει την ετικέτα div που δημιουργήσαμε στο αρχείο HTML:
- Πρώτον, το « χρώμα του φόντου Η ιδιοκτησία έχει οριστεί ως ' #8197f0 '.
- ' σύνορο Η ιδιοκτησία έχει οριστεί ως ' 5 εικονοστοιχεία με κουκκίδες #13023a ”, όπου τα 5 εικονοστοιχεία αντιπροσωπεύουν το πλάτος του περιγράμματος, το διάστικτο υποδεικνύει τον τύπο της γραμμής και το επόμενο δείχνει το χρώμα του περιγράμματος.
- ' υλικό παραγεμίσματος Το ' έχει οριστεί ως ' 20 px 100 px ” όπου 20 εικονοστοιχεία καθορίζει τη συμπλήρωση από πάνω και κάτω και 100 εικονοστοιχεία υποδεικνύει την πλήρωση από αριστερά και δεξιά.
- Για το στυλ γραμματοσειράς, αντιστοιχίστε το ' γραμματοσειρά-οικογένεια 'αξία ακινήτου ως ' ρέων '.
CSS
div {χρώμα του φόντου: #8197f0;
περίγραμμα: 5 εικονοστοιχεία με κουκκίδες #13023a;
padding: 20px 100px;
μέγεθος γραμματοσειράς: 20 px;
γραμματοσειρά-οικογένεια: cursive;
}
Μπορεί να φανεί ότι το στοιχείο div έχει διαμορφωθεί με επιτυχία:
Αυτό είναι! Έχουμε εξηγήσει λεπτομερώς για το κουμπί επιλογής HTML.
συμπέρασμα
Ένα κουμπί επιλογής είναι μια είσοδος που εμφανίζεται πάντα σε ομάδες δύο ή περισσότερων επιλογών. Από αυτήν την ομάδα, ο χρήστης μπορεί να επιλέξει μόνο μία επιλογή. Σε HTML, ένα κουμπί επιλογής μπορεί να δημιουργηθεί χρησιμοποιώντας το ' <εισαγωγή> ' ετικέτα με τον τύπο χαρακτηριστικού με την τιμή ' ραδιόφωνο '. Αυτό το ιστολόγιο παρουσίασε τη μέθοδο για την προσθήκη κουμπιών επιλογής σε HTML.