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

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

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

Παράδειγμα Νο. 1

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

Όπως μπορείτε να δείτε, όλα λειτουργούν περισσότερο από τέλεια, το κρυφό περιεχόμενο εμφανίζεται χωρίς προβλήματα και εξαφανίζεται με ένα ελαφρύ κλικ του ποντικιού και ταυτόχρονα χρησιμοποιήσαμε τον ελάχιστο δυνατό κώδικα, τόσο στο πλαίσιο html όσο και στον σχηματισμό των στυλ css. Χωρίς τη σύνδεση πρόσθετων βιβλιοθηκών javascript, με την αιώνια ανησυχία μήπως είναι απενεργοποιημένες από την πλευρά του χρήστη.
Η υλοποίηση όλης αυτής της δράσης έγινε δυνατή χάρη στην ψευδο-κλάση CSS3 :τετραγωνισμένος, που εφαρμόζεται σε στοιχεία διεπαφής όπως τα κουμπιά επιλογής (). Τι κάναμε στην πραγματικότητα στην ετικέτα Εκχωρήσαμε στο χαρακτηριστικό type το πλαίσιο ελέγχου τιμής , καθώς και το αναγνωριστικό id="hd-1" που αντιστοιχεί στο μοναδικό αναγνωριστικό for="hd-1"τρέχον διακόπτη μπλοκ. Θα αποκρύψουμε τα πλαίσια ελέγχου πλήρως και για πάντα, ρυθμίζοντας την ιδιότητα εμφάνισης: κανένα στην κατηγορία.κρυψη.
Στην πραγματικότητα, δεν υπάρχει τίποτα ιδιαίτερο να εξηγήσουμε εδώ· ολόκληρος ο μηχανισμός για την ενεργοποίηση και απενεργοποίηση κρυφών μπλοκ αποτελείται από τρία στοιχεία:

• Πλαίσιο ελέγχου - ετικέτα με νόημα πλαίσιο ελέγχουΧαρακτηριστικό τύποςκαι με συγκεκριμένο αναγνωριστικό σύνδεσης
• Τίτλος (διακόπτης κειμένου) - ετικέτα με μια μοναδική τιμή αναγνωριστικού για το χαρακτηριστικό Για, (το αναγνωριστικό πρέπει να είναι ίδιο με το αναγνωριστικό της ετικέτας εισαγωγήμε νόημα πλαίσιο ελέγχουΧαρακτηριστικό τύπος).
• Το μπλοκ περιεχομένου είναι μια ετικέτα div, η οποία θα περιέχει, μέχρι τις καλύτερες στιγμές, μέχρι να κάνει κλικ ο χρήστης, διάφορα κρυφό περιεχόμενο (κείμενο, εικόνες κ.λπ., κ.λπ.)

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

Από όλα αυτά προκύπτει σημαντική σημείωση:

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

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

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Κάντε κλικ εδώ για να ανοίξετε! < div>Κρυφό περιεχόμενο...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Κάντε κλικ εδώ για να διαβάσετε περισσότερα! < div>Κρυφό περιεχόμενο...

Κάντε κλικ εδώ για να ανοίξετε!

Κάντε κλικ εδώ για να διαβάσετε περισσότερα!

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

1.CSS

. κρύβω, . απόκρυψη + ετικέτα ~ div (εμφάνιση: καμία;) /* τύπος κειμένου ετικέτας */. απόκρυψη + ετικέτα, . απόκρυψη: επιλεγμένο + ετικέτα ( padding: 0 ; χρώμα: πράσινο; δρομέας: δείκτης; περιθώριο - κάτω: 1 px πράσινο με κουκκίδες; ) . απόκρυψη: checked + label + div ( εμφάνιση: μπλοκ; φόντο: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f; padding: 10px;)

/* απόκρυψη πλαισίων ελέγχου και μπλοκ περιεχομένου */ .hide, .hide + label ~ div ( display: none; ) /* label text text */ .hide + label, .hide:checked + label ( padding: 0; color: green ; δρομέας: δείκτης, περίγραμμα-κάτω: 1 εικονοστοιχείο πράσινο με κουκκίδες; ) /* εμφάνιση του κειμένου της ετικέτας όταν ο διακόπτης είναι ενεργός */ .απόκρυψη: επιλεγμένο + ετικέτα (χρώμα: κόκκινο, κάτω περιγράμματος: 0; ) /* όταν το το πλαίσιο ελέγχου είναι ενεργό, εμφάνιση μπλοκ με περιεχόμενο */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f; box-shadow: inset 3px 3px 10px #7d8e8f; padding: 10px; )

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

2.CSS

/* απόκρυψη πλαισίων ελέγχου και μπλοκ περιεχομένου */. κρύβω, . απόκρυψη + ετικέτα ~ div (εμφάνιση: καμία;) /* τύπος κειμένου ετικέτας */. απόκρυψη + ετικέτα ( περιθώριο: 0 ; padding: 0 ; χρώμα: πράσινο, δρομέας: δείκτης, οθόνη: inline-block; ) /* εμφάνιση του κειμένου της ετικέτας όταν ο διακόπτης είναι ενεργός */. απόκρυψη: επιλεγμένο + ετικέτα (χρώμα: κόκκινο, περίγραμμα-κάτω: 0 ; ) /* όταν το πλαίσιο ελέγχου είναι ενεργό, εμφανίστε μπλοκ με περιεχόμενο */. απόκρυψη: checked + label + div ( εμφάνιση: μπλοκ; φόντο: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f;margin-left: 20px;padding: 10px; /* μια μικρή κινούμενη εικόνα κατά την εμφάνιση */- webkit- animation: fade ease- σε 0. 5s; - moz- animation: fade ease- σε 0. 5s; animation: fade ease- σε 0. 5s; ) /* κινούμενη εικόνα όταν εμφανίζονται κρυφά μπλοκ */@- moz- keyframes fade ( από ( αδιαφάνεια: 0 ; ) σε ( αδιαφάνεια: 1 ) ) @- webkit- keyframes fade ( από ( αδιαφάνεια: 0 ; ) σε ( αδιαφάνεια: 1 ) ) @ keyframes fade ( από ( αδιαφάνεια: 0 ;) έως (αδιαφάνεια: 1)) . απόκρυψη + ετικέτα: πριν ( χρώμα φόντου: #1e90ff; χρώμα: #fff; περιεχόμενο: " \002 B"; οθόνη: μπλοκ; float: αριστερά; μέγεθος γραμματοσειράς: 14 px; βάρος γραμματοσειράς: έντονη; ύψος: 16 px; Ύψος γραμμής: 16 px; περιθώριο: 3px 5px; κείμενο- στοίχιση: κέντρο; πλάτος: 16 px; - webkit- border- ακτίνα: 50%; - moz- σύνορα- ακτίνα: 50%; ακτίνα συνόρων: 50%; ) . απόκρυψη: επιλεγμένο + ετικέτα: πριν ( περιεχόμενο: " \221 2" ; }

/* απόκρυψη πλαισίων ελέγχου και μπλοκ περιεχομένου */ .hide, .hide + label ~ div ( εμφάνιση: κανένας; ) /* εμφάνιση κειμένου ετικέτας */ .hide + label ( περιθώριο: 0; padding: 0; color: green; cursor : δείκτης; εμφάνιση: inline-block; ) /* εμφάνιση του κειμένου της ετικέτας όταν ο διακόπτης είναι ενεργός */ .hide:checked + label ( χρώμα: κόκκινο; border-bottom: 0; ) /* όταν το πλαίσιο ελέγχου είναι ενεργό, εμφάνιση μπλοκ με περιεχόμενο */ . hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8ef ; box-shadow: inset 3px 3px 10px #7d8e8f; margin-αριστερό: 20px; padding: 10px; /* λίγο animation κατά την εμφάνιση */ -webkit-animation:fade ease-in 0,5s; -moz-animation:fade ease -σε 0,5 δευτ.; κινούμενη εικόνα: fade ease-σε 0,5 δευτ. fade ( από ( αδιαφάνεια: 0 ; ) σε ( αδιαφάνεια: 1 ) ) @keyframes fade ( από ( αδιαφάνεια: 0; ) σε ( αδιαφάνεια: 1 ) ) .hide + label:before ( background-color: #1e90ff; χρώμα: #fff; περιεχόμενο: "\002B"; οθόνη: μπλοκ; float: αριστερά; μέγεθος γραμματοσειράς: 14 px; βάρος γραμματοσειράς: έντονη; ύψος: 16 px; Ύψος γραμμής: 16 px; περιθώριο: 3px 5px; text-align: κέντρο; πλάτος: 16 px; -webkit-border-radius: 50%; -moz-border-radius: 50%; ακτίνα συνόρων: 50%; ) .hide:checked + label:before ( περιεχόμενο: "\2212"; )

Από κάθε άποψη, η μέθοδος είναι αναμφίβολα καλή, αλλά όπως πάντα, και καθόλου περίεργο, προκύπτουν προβλήματα με το αιώνιο φρένο στην πρόοδο, το πρόγραμμα περιήγησης IE, ψευδο-κλάση τετραγωνισμένοςυποστηρίζουν μόνο τις εκδόσεις 9 και νεότερες αυτού του προγράμματος περιήγησης. Για παλαιότερες εκδόσεις του IE, όλα παραμένουν ίδια, θα πρέπει να χρησιμοποιήσετε javascript.

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

Με όλο τον σεβασμό, Andrew

Περιγραφή

Ετικέτα HTML χρησιμοποιείται για τη δημιουργία μιας αναπτυσσόμενης (αναπτυσσόμενης) λίστας που εμφανίζεται όταν γίνεται κλικ σε ένα στοιχείο φόρμας και επιτρέπει στον επισκέπτη του ιστότοπου να επιλέξει μία από τις προκαθορισμένες επιλογές.

Στοιχείο

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

Volvo Saab VW Audi

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

Γνωρίσματα

αυτόματη εστίαση: Καθορίζει ότι το στοιχείο θα λαμβάνει αυτόματα εστίαση κατά τη φόρτωση της ιστοσελίδας. Πιθανές τιμές για το χαρακτηριστικό boolean αυτόματης εστίασης: Παράδειγμα »

Σημείωση: Το χαρακτηριστικό αυτόματης εστίασης δεν υποστηρίζεται στον IE9 και παλαιότερες εκδόσεις και στον Firefox.

Disabled: Υποδεικνύει ότι το στοιχείο είναι ανενεργό, που σημαίνει ότι ο χρήστης δεν θα μπορεί να αλληλεπιδράσει με το στοιχείο. Πιθανές τιμές για το απενεργοποιημένο χαρακτηριστικό Boolean:

Παράδειγμα » φόρμα: Καθορίζει τη μορφή με την οποία σχετίζεται το στοιχείο. Η τιμή του χαρακτηριστικού είναι το αναγνωριστικό στοιχείου

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

Σημείωση: το χαρακτηριστικό form δεν υποστηρίζεται στον Firefox.

Πολλαπλές: Υποδεικνύει ότι μπορούν να επιλεγούν πολλές επιλογές ταυτόχρονα. Πολλές επιλογές διαφέρουν ανάλογα με το λειτουργικό σύστημα:

• Windows: Κρατήστε πατημένο το πλήκτρο CTRL για να επιλέξετε πολλές επιλογές.
• Mac: Κρατήστε πατημένο το πλήκτρο CMD για να επιλέξετε πολλές επιλογές.

Πιθανές τιμές για το πολλαπλό λογικό χαρακτηριστικό: Παράδειγμα »

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

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

Ετικέτες HTML που ορίζουν φόρμες HTML στον ιστότοπο

Δημιουργούμε ιστοσελίδες και μεμονωμένες σελίδες στο Διαδίκτυογια την επικοινωνία με τους επισκέπτες.

Φόρμες HTMLχρησιμοποιούνται για την εγγραφή επισκεπτών στον ιστότοπο, για διαδραστικές έρευνες και ψηφοφορία, σας επιτρέπουν να στέλνετε μηνύματα, να κάνετε αγορές και ούτω καθεξής. HTMLΗ φόρμα δημιουργείται για έναν σκοπό: τη συλλογή και στη συνέχεια τη μετάδοση πληροφοριών για επεξεργασία από ένα σενάριο λογισμικού ή μέσω email.

Παράδειγμα φόρμας HTML | Μπείτε στον ιστότοπο

Ετικέτες, χαρακτηριστικά και αξίες

- προσδιορίστε το σχήμα.
• name="" - ορίζει το όνομα της φόρμας.
• μέθοδος="" - ορίζει τη μέθοδο αποστολής δεδομένων από τη φόρμα. Τιμές: "get" (προεπιλογή) και "post" . Η μέθοδος «post» χρησιμοποιείται συχνά, καθώς επιτρέπει τη μεταφορά μεγάλων ποσοτήτων δεδομένων.
• action="" - ορίζει τη διεύθυνση url στην οποία αποστέλλονται τα δεδομένα για επεξεργασία. Στην περίπτωσή μας - enter_data.php ..
• - ορίστε στοιχεία φόρμας όπως κουμπιά, διακόπτες, πεδία κειμένου για την εισαγωγή δεδομένων.
• type="text" - ορίζει ένα πεδίο κειμένου για την εισαγωγή δεδομένων.
• type="password" - ορίζει ένα πεδίο για την εισαγωγή κωδικού πρόσβασης, με το κείμενο να εμφανίζεται με τη μορφή αστερίσκων ή κύκλων.
• type="checkbox" - ορίζει ένα κουμπί επιλογής.
• type="hidden" - ορίζει ένα κρυφό στοιχείο φόρμας - που χρησιμοποιείται για τη μεταφορά πρόσθετων πληροφοριών στον διακομιστή.
• size="25" - μήκος του πεδίου κειμένου σε χαρακτήρες.
• maxlength="30" - ο μέγιστος επιτρεπόμενος αριθμός χαρακτήρων που εισάγονται.
• value="" - ορίζει την τιμή που θα σταλεί για επεξεργασία εάν σχετίζεται με κουμπιά επιλογής ή διακόπτες. Η τιμή αυτού του χαρακτηριστικού ως μέρος ενός πεδίου κειμένου ή κουμπιού θα εμφανίζεται, για παράδειγμα, ως Vasya ή Σύνδεση στο παραπάνω παράδειγμα.

Παράδειγμα φόρμας HTML | Σχόλια στον ιστότοπο

Ονομα Ταχυδρομείο

Ετικέτες, χαρακτηριστικά και αξίες

• action="http://site/comments.php" - ορίζει τη διεύθυνση url στην οποία θα σταλούν τα δεδομένα από τη φόρμα.
• id="" - ορίζει το όνομα και το αναγνωριστικό του στοιχείου φόρμας.
• name="" - ορίζει το όνομα του στοιχείου της φόρμας.
• - ορίστε ένα πεδίο κειμένου ως μέρος της φόρμας.
• cols="" - καθορίζει τον αριθμό των στηλών του πεδίου κειμένου της φόρμας.
• rows="" - ορίζει τον αριθμό των σειρών του πεδίου κειμένου της φόρμας.

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

Παράδειγμα φόρμας HTML | Αναπτυσσόμενη λίστα

Πρώτη θέση Δεύτερη θέση Τρίτη θέση Τέταρτη θέση

Ετικέτες, χαρακτηριστικά και αξίες

• - ορίστε μια λίστα με θέσεις προς επιλογή.
• size="" - καθορίζει τον αριθμό των ορατών θέσεων της λίστας. Εάν η τιμή είναι 1, έχουμε να κάνουμε με μια αναπτυσσόμενη λίστα.
• - καθορίστε τις θέσεις (στοιχεία) της λίστας.
• value="" - περιέχει την τιμή που θα σταλεί από τη φόρμα στο καθορισμένο url για επεξεργασία.
• select="selected" - επισημαίνει ένα στοιχείο λίστας ως παράδειγμα.

Παράδειγμα φόρμας HTML | Λίστα με γραμμή κύλισης

Αυξάνοντας την τιμή του χαρακτηριστικού size="", λαμβάνουμε μια λίστα με μια γραμμή κύλισης:

Πρώτη θέση Δεύτερη θέση Τρίτη θέση Τέταρτη θέση

Πρώτη θέση Δεύτερη θέση Τρίτη θέση Τέταρτη θέση

Για αυτήν την επιλογή, χρησιμοποιήστε τη σημαία multiple="multiple", η οποία καθιστά δυνατή την επιλογή πολλών θέσεων. Η απουσία του σας επιτρέπει να επιλέξετε μόνο ένα στοιχείο.

type="submit" - ορίζει ένα κουμπί.

type="reset" - ορίζει ένα κουμπί επαναφοράς.

value="" - ορίζει την ετικέτα στο κουμπί.

Δείτε επιπλέον:

Περιγραφή

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

Σύνταξη

Παράγραφος 1 Σημείο 2

Γνωρίσματα

Σας επιτρέπει να μεταβείτε σε μια λίστα χρησιμοποιώντας κάποια συντόμευση πληκτρολογίου. Ρυθμίζει τη λίστα για λήψη εστίασης μετά τη φόρτωση της σελίδας. Αποκλείει την πρόσβαση και την τροποποίηση ενός στοιχείου. Συσχετίζει μια λίστα με μια φόρμα. Σας επιτρέπει να επιλέξετε πολλά στοιχεία λίστας ταυτόχρονα. Το όνομα του στοιχείου που πρόκειται να σταλεί στον διακομιστή ή να προσπελαστεί μέσω σεναρίων. Η λίστα πρέπει να επιλεγεί πριν από την υποβολή της φόρμας. Ο αριθμός των γραμμών λίστας προς εμφάνιση. Καθορίζει τη σειρά μετάβασης μεταξύ των στοιχείων όταν πατάτε το πλήκτρο Tab

Ετικέτα κλεισίματος

Απαιτείται.

HTML5 IE Cr Op Sa Fx

Επιλέξτε έναν ήρωα Cheburashka Κροκόδειλος Gena Shapoklyak Αρουραίος Λάρισας

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

Το κείμενο που είναι ορατό στον χρήστη μπορεί να διαφέρει από το κείμενο που καθορίζεται στο χαρακτηριστικό value. Δείτε πώς μπορείτε να δημιουργήσετε μια αναπτυσσόμενη λίστα:

Πράσινος Κίτρινος Μαύρος

• Η αναπτυσσόμενη λίστα δημιουργείται χρησιμοποιώντας την ετικέτα ;
  Μέσα σε μια ετικέτα
  Οι επιλογές για επιλογή ορίζονται χρησιμοποιώντας μια ετικέτα ;
• Στην ετικέτα μπορείτε να χρησιμοποιήσετε το χαρακτηριστικό value για να αποκτήσετε πρόσβαση στην επιλεγμένη επιλογή χρησιμοποιώντας PHP, JS, Jquery κ.λπ.

Είναι επίσης δυνατό να ορίσετε μια κλάση CSS αντί να χρησιμοποιήσετε ένα αναγνωριστικό για το στυλ της αναπτυσσόμενης λίστας.

Στην επόμενη ενότητα, θα δείξω παραδείγματα χρήσης της αναπτυσσόμενης λίστας HTML σε JavaScript/JQuery. Τα παραδείγματα θα δείξουν επίσης πώς να ορίσετε στυλ χρησιμοποιώντας CSS/CSS3 και Bootstrap πλαίσιο.

Παράδειγμα δημιουργίας μιας απλής αναπτυσσόμενης λίστας

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

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

5 10 15 20 25

Χρησιμοποιώντας το χαρακτηριστικό value

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

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

Δείτε online επίδειξη και κώδικα

Για ετικέτα Χρησιμοποιείται ο ακόλουθος κώδικας:

Μαρόν Πράσινος Κίτρινος Μπλε το κόκκινο

Παράδειγμα πρόσβασης στην επιλεγμένη επιλογή σε JavaScript

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

Δείτε online επίδειξη και κώδικα

Για την τιμή επιλογής HTML χρησιμοποιείται ο ακόλουθος κώδικας:

Μαρόν Πράσινος Κίτρινος Μπλε το κόκκινο Αλλα

Η ακόλουθη γραμμή κώδικα χρησιμοποιείται στο JavaScript για πρόσβαση στην τιμή του χαρακτηριστικού τιμής μιας επιλογής :

var seltheme = document.getElementById("selcolor").value;

Όταν κάνετε κλικ στο κουμπί, καλείται μια συνάρτηση JS, η οποία εκχωρεί την τιμή που έχει επιλεγεί στην αναπτυσσόμενη λίστα σε μια μεταβλητή. Αυτή η τιμή χρησιμοποιείται για την εφαρμογή ενός χρώματος στο τρέχον έγγραφο.

Πρόσβαση σε ορατό κείμενο στο JQuery

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

Δείτε online επίδειξη και κώδικα

Στον κώδικα για κάθε επιλογή στην ετικέτα

το νόημα είναι διαφορετικό από το κείμενο. Μόλις επιλέξετε ένα χρώμα, το jQuery εμφανίζει το ορατό κείμενο στην ειδοποίηση. Κωδικός ετικέτας Επόμενο:

Μαρόν Πράσινος Κίτρινος Μπλε το κόκκινο

Δείτε πώς μπορείτε να αποκτήσετε πρόσβαση σε αυτήν την τιμή Επιλογή επιλογής HTML επιλεγμένη JavaScript:

var selectedcolor = $("#jqueryselect option:selected").text();

Μπορείτε επίσης να αποκτήσετε πρόσβαση στην τιμή χρησιμοποιώντας τη μέθοδο JQuery $.val():

var selectedcolor = $("#jqueryselect").val();

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

Ένα παράδειγμα λήψης τιμής σε σενάριο PHP

Σε αυτό το παράδειγμα λήψης της τιμής της επιλογής που έχει επιλεγεί από μια αναπτυσσόμενη λίστα, η φόρμα δημιουργείται χρησιμοποιώντας την ετικέτα στην ενότητα σήμανσης. Αφού επιλέξετε ένα χρώμα από την αναπτυσσόμενη λίστα, κάντε κλικ στο κουμπί «Υποβολή». Τα δεδομένα της φόρμας θα περάσουν στο ίδιο αρχείο PHP, μετά το οποίο θα εμφανιστεί το επιλεγμένο χρώμα:

Δείτε online επίδειξη και κώδικα

Η μέθοδος φόρμας που χρησιμοποιείται στο παράδειγμα είναι POST, ώστε να μπορείτε να λάβετε τις τιμές φόρμας χρησιμοποιώντας τον πίνακα PHP $_POST[“”]. Αυτός είναι ο κώδικας φόρμας που χρησιμοποιείται στο παράδειγμα:

Επιλέξτε ένα χρώμα:

Μαρόν Πράσινος Κίτρινος Μπλε το κόκκινο