Ο ' <επιλογή> Η ετικέτα ' χρησιμοποιείται για να ορίσει μια επιλογή που μπορεί να επιλέξει ένας χρήστης από ένα αναπτυσσόμενο μενού ή από τις λίστες επιλογής σε φόρμες ιστού. Ο ' <επιλογή> Η ετικέτα ” επιτρέπει στους προγραμματιστές να δημιουργήσουν ένα σύνολο επιλογών από τις οποίες ο χρήστης μπορεί να επιλέξει οποιαδήποτε επιλογή. Χρησιμοποιείται σε διάφορες εφαρμογές όπως έρευνες, ιστότοποι ηλεκτρονικών αγορών, φόρμες εγγραφής κ.λπ.
Αυτό το άρθρο παρουσιάζει την ετικέτα επιλογής σε HTML μαζί με πρακτικά παραδείγματα:
- Τι είναι η ετικέτα επιλογής και πώς να τη χρησιμοποιήσετε σε HTML;
- Δημιουργία αναπτυσσόμενης λίστας
- Δημιουργία λίστας αυτόματης συμπλήρωσης
Τι είναι η ετικέτα επιλογής και πώς να τη χρησιμοποιήσετε σε HTML;
Η ετικέτα επιλογής μπορεί να χρησιμοποιηθεί με το ' <επιλογή> ' και ' ετικέτες '. Στην περίπτωση του « ', δημιουργεί μια λίστα επιλογών που μπορούν να συμπληρωθούν αυτόματα από ένα πρόγραμμα περιήγησης. Ας δούμε μερικά παραδείγματα για καλύτερη κατανόηση της σχέσης μεταξύ των « <επιλογή> ' ετικέτα με το ' <επιλογή> ' και ' ' ετικέτες:
Παράδειγμα 1: Δημιουργία αναπτυσσόμενης λίστας
Ο ' <επιλογή> Η ετικέτα ' χρησιμοποιείται με το ' <επιλογή> ” για να δημιουργήσετε μια αναπτυσσόμενη λίστα στην ιστοσελίδα. Ο ' <επιλογή> ” δημιουργεί κάθε επιλογή/στοιχείο λίστας στην αναπτυσσόμενη λίστα. Για καλύτερη κατανόηση, ας ακολουθήσουμε το παρακάτω απόσπασμα κώδικα:
< h2 > Γλώσσες προγραμματισμού h2 >
< επιγραφή Για = 'prog-όπλο' > Επιλέξτε ένα όπλο προγραμματισμού: επιγραφή >
< επιλέγω ταυτότητα = 'λίστες προγραμμάτων' >
< επιλογή αξία = '' > Επιλέξτε μια Επιλογή επιλογή >
< επιλογή αξία = 'c++' > C++ επιλογή >
< επιλογή αξία = '.καθαρά' > Dot Net επιλογή >
< επιλογή αξία = 'nodejs' > Κόμβος js επιλογή >
επιλέγω >
Στο παραπάνω απόσπασμα κώδικα:
- Πρώτον, το « <ετικέτα> Η ετικέτα ' χρησιμοποιείται για την εμφάνιση των δεδομένων και της εκχωρείται το ' <επιλογή> ετικέτα με χρήση του Για ' Χαρακτηριστικό.
- Μετά από αυτό, το « <επιλογή> Η ετικέτα ' χρησιμοποιείται για τη δημιουργία περιβάλλοντος για την αναπτυσσόμενη λίστα.
- Στη συνέχεια, το « <επιλογή> Η ετικέτα ' χρησιμοποιείται για τη δημιουργία στοιχείων λίστας που θα τοποθετηθούν ως στοιχεία της αναπτυσσόμενης λίστας.
Αφού ρυθμίσουμε τη δομή της αναπτυσσόμενης λίστας, ας εφαρμόσουμε τώρα κάποιο βασικό στυλ:
επιγραφή {οθόνη: μπλοκ;
margin-bottom: 5px;
}
επιλέγω {
padding: 5px;
περίγραμμα-ακτίνα: 5px;
πλάτος: 200 px;
}
Η εξήγηση των ιδιοτήτων CSS περιγράφεται παρακάτω:
- Πρώτα, επιλέξτε το ' επιγραφή ' στοιχείο και μετά ορίστε τις τιμές 'block' και '5px' στο CSS ' απεικόνιση ' και ' περιθώριο-κάτω ' ιδιότητες.
- Στη συνέχεια, το « επιλέγω Επιλέγεται το στοιχείο και παρέχει τις τιμές '5px', '5px' και '200px' στο CSS ' υλικό παραγεμίσματος », « σύνορα-ακτίνα ' και ' πλάτος ” ιδιότητες, αντίστοιχα. Αυτές οι ιδιότητες χρησιμοποιούνται για τη βελτίωση της ορατότητας των χρηστών.
Μετά την εκτέλεση των παραπάνω αποσπασμάτων κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η παραπάνω έξοδος δείχνει ότι το αναπτυσσόμενο μενού έχει δημιουργηθεί χρησιμοποιώντας το ' <επιλογή> ' ετικέτα με το ' <επιλογή> ετικέτα '.
Παράδειγμα 2: Δημιουργία λίστας αυτόματης συμπλήρωσης
Ο ' <επιλογή> Η ετικέτα ' χρησιμοποιείται με το ' ' για να δημιουργήσετε μια λίστα αυτόματης συμπλήρωσης. Χρησιμοποιείται μαζί με το « <εισαγωγή> ετικέτα που συμπληρώνεται από τις διαθέσιμες επιλογές μέσα στη λίστα αυτόματης συμπλήρωσης. Ο κώδικας για τη δημιουργία μιας λίστας αυτόματης συμπλήρωσης με χρήση HTML εμφανίζεται στο παρακάτω απόσπασμα κώδικα:
< επιγραφή Για = 'prog-εργαλεία' > Ή τύπος ένα εργαλείο προγραμματισμού: επιγραφή >< εισαγωγή τύπος = 'κείμενο' ταυτότητα = 'prog-εργαλεία' λίστα = 'εργαλεία' >
< λίστα δεδομένων ταυτότητα = 'εργαλεία' >
< επιλογή αξία = 'C++' >
< επιλογή αξία = 'Συνέλευση' >
< επιλογή αξία = '.Καθαρά' >
< επιλογή αξία = 'PHP' >
< επιλογή αξία = 'Ρουμπίνι' >
< επιλογή αξία = 'Ταχύς' >
< επιλογή αξία = 'Κόμβος js' >
< επιλογή αξία = 'Αντιδρώ' >
< επιλογή αξία = 'Μόνγκο' >
< επιλογή αξία = 'Ιάβα' >
< επιλογή αξία = 'Πύθων' >
λίστα δεδομένων >
Στο παραπάνω απόσπασμα κώδικα:
- Πρώτα, προσθέστε το ' <ετικέτα> ετικέτα που εμφανίζει το κείμενο μαζί με το στοιχείο HTML.
- Στη συνέχεια, χρησιμοποιήστε το ' <εισαγωγή> ετικέτα που συμπληρώνεται από τον χρήστη με μη αυτόματο τρόπο ή μπορεί να συμπληρωθεί αυτόματα από τις διαθέσιμες επιλογές μέσα στη λίστα αυτόματης συμπλήρωσης.
- Μετά από αυτό, χρησιμοποιήστε το ' ' tag και ορίστε το ' ταυτότητα ' τιμή χαρακτηριστικού ίση με την τιμή του ' λίστα 'ιδιότητα του ' <εισαγωγή> ετικέτα '.
- Στη συνέχεια, χρησιμοποιήστε το ' <επιλογή> ” ετικέτα μέσα στην ετικέτα “
Μετά την εκτέλεση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα εμφανίζεται ως εξής:
Η έξοδος δείχνει ότι η λίστα αυτόματης συμπλήρωσης δημιουργείται χρησιμοποιώντας το ' <επιλογή> ' ετικέτα με το συνδυασμό ' ' και ' <εισαγωγή> ετικέτες '.
συμπέρασμα
Ο ' <επιλογή> Η ετικέτα ” επιτρέπει στον προγραμματιστή να δημιουργήσει επιλογές για τη λίστα επιλογών, από τις οποίες ο χρήστης μπορεί να επιλέξει οποιαδήποτε επιλογή. Αυτή η ετικέτα '