Το κουμπί πηγαίνει σε άλλη σελίδα. Πότε να χρησιμοποιήσετε το στοιχείο Κουμπί. κουμπί - κανονική κατάσταση
Το ίδιο το κουμπί δεν μπορεί να γίνει σύνδεσμος HTML που απαγορεύει το συνδυασμό στοιχείων (καθώς και ) και . Επομένως, δεν μπορείτε να τοποθετήσετε ένα κουμπί σε έναν σύνδεσμο ή έναν σύνδεσμο σε ένα κουμπί. Υπάρχουν τρεις τρόποι για να βεβαιωθείτε ότι όταν κάνετε κλικ σε ένα κουμπί, ανοίγει μια ιστοσελίδα.
Χρήση HTMLΤοποθετήστε το κουμπί μέσα στο στοιχείο και για τη φόρμα καθορίζουμε το χαρακτηριστικό action με τη διεύθυνση ιστοσελίδας (παράδειγμα 1). Επιπλέον, μπορείτε να προσθέσετε χαρακτηριστικό στόχομε την τιμή _blank , τότε η ιστοσελίδα θα ανοίξει σε μια νέα καρτέλα προγράμματος περιήγησης.
Παράδειγμα 1. Χαρακτηριστικό δράσης
Κουμπί Ακολουθήστε τον σύνδεσμο
Σε αυτό το παράδειγμα, κάνοντας κλικ στο κουμπί ανοίγει η ιστοσελίδα new.html σε μια νέα καρτέλα.
Μια φόρμα δεν μπορεί να τοποθετηθεί μέσα σε μια άλλη. Πριν προσθέσετε ένα κουμπί, βεβαιωθείτε ότι έχετε μόνο μία φόρμα.
Χρησιμοποιώντας CSSΔεδομένου ότι το κουμπί δεν μπορεί να γίνει σύνδεσμος, το εγκαταλείπουμε τελείως και το στυλ του συνδέσμου είναι έτσι ώστε να μοιάζει με κουμπί. Το Παράδειγμα 2 δείχνει την κλάση btn όταν την προσθέτετε σε ένα στοιχείο ο σύνδεσμος αλλάζει το σχεδιασμό του.
Κουμπί .btn ( οθόνη: inline-block; /* Ενσωματωμένο στοιχείο μπλοκ */ φόντο: #8C959D; /* Γκρι χρώμα φόντου */ χρώμα: #fff; /* Λευκό χρώμα κειμένου */ padding: 1rem 1,5rem; /* Περιθώρια γύρω από το κείμενο */ text-decoration: none /* Αφαιρέστε την υπογράμμιση */ border-radius: /* Στρογγυλοποιήστε τις γωνίες */ ) Ακολουθήστε τον σύνδεσμο
Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 1.
Χρήση JavaScriptΜπορείτε να χρησιμοποιήσετε το συμβάν onclick για να πλοηγηθείτε σε μια καθορισμένη ιστοσελίδα προσθέτοντάς την στο . Μέσα στο onclick γράφουμε document.location , και ως τιμή τη διεύθυνση της επιθυμητής ιστοσελίδας (παράδειγμα 3). Δώστε προσοχή στον συνδυασμό εισαγωγικών, η διεύθυνση της ιστοσελίδας περικλείεται σε μεμονωμένα εισαγωγικά.
Θα ήθελα να δημιουργήσω Κουμπί HTML, που λειτουργεί ως σύνδεσμος. Με αυτόν τον τρόπο, όταν κάνετε κλικ στο κουμπί, θα ανακατευθυνθεί στη σελίδα. Θα ήθελα να είναι όσο το δυνατόν πιο προσιτό.
Επίσης θα ήθελα να μην έχει κανένα πρόσθετους χαρακτήρεςή παραμέτρων.
Πώς μπορώ να το πετύχω αυτό;
Να συνεχίσει
αλλά το πρόβλημα είναι ότι στο Safari και στον Internet Explorer, προσθέτει ένα ερωτηματικό στο τέλος της διεύθυνσης URL. Πρέπει να βρω μια λύση που να μην προσθέτει χαρακτήρες στο τέλος της διεύθυνσης URL.
Υπάρχουν δύο άλλες λύσεις για αυτό: χρησιμοποιώντας JavaScriptή να διαμορφώσετε έναν σύνδεσμο ώστε να μοιάζει με κουμπί.
Χρήση JavaScript:
Να συνεχίσει
Αλλά αυτό προφανώς απαιτεί JavaScript, και για αυτόν τον λόγο είναι λιγότερο προσιτό στους αναγνώστες οθόνης. Σημείο σύνδεσης - μεταβείτε σε άλλη σελίδα. Έτσι, η προσπάθεια να κάνετε ένα κουμπί να λειτουργεί σαν σύνδεσμος είναι λάθος απόφαση. Η πρότασή μου είναι να χρησιμοποιήσετε έναν σύνδεσμο και να τον διαμορφώσετε ώστε να μοιάζει με κουμπί.
Να συνεχίσει
27 απαντήσεις
HTMLΑπλός τρόπο HTMLείναι να το βάλετε εκεί που προσδιορίζετε την επιθυμητή διεύθυνση URL-στόχου στο χαρακτηριστικό action.
Εάν είναι απαραίτητο, εγκαταστήστε Οθόνη CSS: στη γραμμή; στη μορφή για να διατηρείται σε ροή με το περιβάλλον κείμενο. Αντί στο παραπάνω παράδειγμα, μπορείτε επίσης να χρησιμοποιήσετε . Η μόνη διαφορά είναι ότι το στοιχείο επιτρέπει τα παιδιά.
Θα περιμένατε διαισθητικά να μπορείτε να χρησιμοποιήσετε . παρόμοιο με το στοιχείο αλλά δυστυχώς όχι, αυτό το χαρακτηριστικό δεν υπάρχει σύμφωνα με την Προδιαγραφή HTML.
CSSΕάν επιτρέπεται το CSS, απλώς χρησιμοποιήστε το , το οποίο θέλετε να εμφανίζεται σαν κουμπί, χρησιμοποιώντας, μεταξύ άλλων, την ιδιότητα εμφάνισης (η υποστήριξη του προγράμματος περιήγησης μόνο για το Διαδίκτυο είναι προς το παρόν (Ιούλιος 2015) ακόμα κακή).
Μεταβείτε στο Google a.button ( -webkit-appearance: button; -moz-appearance: button; εμφάνιση: button; text-decoration: κανένα; χρώμα: αρχικό; )
Ή επιλέξτε μία από αυτές τις πολλές βιβλιοθήκες CSS όπως το Bootstrap.
JavaScriptΕάν η JavaScript είναι ενεργοποιημένη, ορίστε το window.location.href .
Εάν αυτό εμφάνισηκουμπί που αναζητάτε σε μια βασική ετικέτα αγκύρωσης HTML, μπορείτε να χρησιμοποιήσετε το Twitter Bootstrap για να μορφοποιήσετε οποιονδήποτε από τους παρακάτω κοινούς συνδέσμους/κουμπιά Τύπος HTMLώστε να εμφανίζονται ως κουμπί. Σημειώστε τις οπτικές διαφορές μεταξύ των εκδόσεων 2, 3 ή 4 του πλαισίου:
Κουμπί σύνδεσης
Χρήση:
Κάντε κλικ σε εμένα
Δυστυχώς, αυτή η σήμανση δεν είναι πλέον έγκυρη σε HTML5 και δεν θα επικυρώνεται ή θα λειτουργεί πάντα όπως αναμένεται. Ακολουθήστε μια διαφορετική προσέγγιση.
Όπως και στην HTML5, τα κουμπιά υποστηρίζουν το χαρακτηριστικό formation. Το καλύτερο από όλα, δεν απαιτείται Javascript ή εξαπάτηση.
Μεταβείτε στο Stack Overflow!
Προειδοποίηση
Είναι πραγματικά πολύ απλό και χωρίς να χρησιμοποιεί στοιχεία φόρμας. Μπορείτε απλώς να χρησιμοποιήσετε την ετικέτα χρησιμοποιώντας το κουμπί μέσα :).
Και θα φορτώσει το href στην ίδια σελίδα. Θέλετε μια νέα σελίδα; Απλώς χρησιμοποιήστε target="_blank" .
Εάν χρησιμοποιείτε εσωτερική φόρμα, προσθέστε το χαρακτηριστικό type="reset" μαζί με το στοιχείο του κουμπιού. Αυτό θα αποτρέψει την εφαρμογή της φόρμας.
www.example.com
Ο μόνος τρόπος για να γίνει αυτό (εκτός από την ευρηματική ιδέα του BalusC!) είναι να προσθέσετε Κουμπί JavaScript εκδήλωση onclick, το οποίο δεν είναι κατάλληλο για προσβασιμότητα.
Υπάρχουν μειονεκτήματα στην εκτέλεση επόμενα βήματα?
Όπου το a.nostyle είναι μια τάξη που έχει ένα στυλ για τον σύνδεσμό σας (όπου μπορείτε να απαλλαγείτε από το τυπικό στυλ συνδέσμου) και το span.button είναι μια τάξη που έχει ένα στυλ για το "κουμπί" σας (φόντο, περίγραμμα, κλίση, και τα λοιπά. ).
Συνεχίζοντας με αυτά που έχουν προσθέσει κάποιοι άλλοι, μπορείτε να τρελαθείτε με μια απλή τάξη CSS, χωρίς PHP, χωρίς jQuery, μόνο HTML και CSS.
Δημιουργώ Κλάση CSSκαι προσθέστε το στην άγκυρά σας. Ο κωδικός είναι παρακάτω.
Σύνδεσμος κουμπιών ( ύψος: 60 εικονοστοιχεία, συμπλήρωση: 10 εικονοστοιχεία 15 εικονοστοιχεία, φόντο: #4479BA, χρώμα: #FFF; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; περίγραμμα: συμπαγής 1px #20538D; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4) -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px (px 1); 0, 0, 0, 0,2); . να πάω
Αυτό είναι όλο. Είναι πολύ εύκολο να το κάνετε και σας επιτρέπει να είστε όσο δημιουργικοί θα θέλατε. Ελέγχετε τα χρώματα, το μέγεθος, τα σχήματα (ακτίνα) κ.λπ. Για να πάρεις Επιπλέον πληροφορίεςδες το site που το βρήκα.
Φαίνεται ότι υπάρχουν τρεις λύσεις σε αυτό το πρόβλημα (όλες με πλεονεκτήματα και μειονεκτήματα).
Λύση 1: Κουμπί στη φόρμα. Να συνεχίσειΤο πρόβλημα όμως είναι ότι σε ορισμένες εκδόσεις δημοφιλή προγράμματα περιήγησηςόπως Chrome, Safari και Internet Explorer, προσθέτει ένα ερωτηματικό στο τέλος της διεύθυνσης URL. Με άλλα λόγια, για τον παραπάνω κώδικα, το URL σας θα μοιάζει με αυτό:
Http://someserver/pages2;
Υπάρχει ένας τρόπος για να το διορθώσετε, αλλά θα απαιτήσει κάποια διαμόρφωση από την πλευρά του διακομιστή. Ένα παράδειγμα χρήσης του Apache Mod_rewrite θα ήταν η ανακατεύθυνση όλων των αιτημάτων με ένα τέλος; στην αντίστοιχη διεύθυνση URL χωρίς ? . Ακολουθεί ένα παράδειγμα που χρησιμοποιεί .htaccess, αλλά υπάρχει πλήρης ροή:
RewriteCond %(THE_REQUEST) \?\ HTTP RewriteRule ^/?(index\.cfm)? /?
Παρόμοιες διαμορφώσεις μπορεί να διαφέρουν ανάλογα με τον διακομιστή web που χρησιμοποιείται και τη στοίβα που χρησιμοποιείται. Λοιπόν, μια περίληψη αυτής της προσέγγισης:
- Είναι ένα πραγματικό κουμπί, και σημασιολογικά είναι λογικό.
- Δεν απαιτείται JavaScript, δεν απαιτείται πολύπλοκο στυλ.
- Ύστερα; φαίνεται άσχημο σε ορισμένα προγράμματα περιήγησης. Αυτό μπορεί να διορθωθεί με ένα hack (σε ορισμένες περιπτώσεις) χρησιμοποιώντας POST αντί για GET, αλλά με καθαρό τρόποείναι μια ανακατεύθυνση από την πλευρά του διακομιστή. Το μειονέκτημα μιας ανακατεύθυνσης από την πλευρά του διακομιστή είναι ότι θα προκαλέσει μια επιπλέον κλήση HTTP για αυτούς τους συνδέσμους λόγω της ανακατεύθυνσης 304.
- Προσθέτει ένα επιπλέον στοιχείο
- Η τοποθέτηση στοιχείων κατά τη χρήση πολλαπλών σχημάτων μπορεί να είναι δύσκολη και να χειροτερεύει όταν εργάζεστε με σχέδια με απόκριση. Κάποια διάταξη μπορεί να καταστεί αδύνατη για να επιτευχθεί αυτή η λύση ανάλογα με τη σειρά των στοιχείων. Αυτό μπορεί τελικά να επηρεάσει τη χρηστικότητα εάν το έργο επηρεάζεται από αυτό το ζήτημα.
Μπορείτε να χρησιμοποιήσετε JavaScript για να ενεργοποιήσετε onclick και άλλα συμβάντα για να προσομοιώσετε τη συμπεριφορά ενός συνδέσμου κουμπιού. Το παρακάτω παράδειγμα θα μπορούσε να βελτιωθεί και να αφαιρεθεί από το HTML, αλλά εδώ είναι απλώς για να επεξηγήσουμε την ιδέα:
Να συνεχίσει
- Απλό (για βασικές απαιτήσεις) και διατηρεί τη σημασιολογία χωρίς να απαιτείται πρόσθετη μορφή.
- Δεδομένου ότι είναι ένα πραγματικό κουμπί, θα λειτουργεί επίσης σαν ένα πραγματικό κουμπί (π.χ. συμπεριφορά με δυνατότητα μεταφοράς ή/και προσομοίωση ενός κλικ όταν πατάτε το πλήκτρο διαστήματος όταν μια ενέργεια είναι ενεργή).
- Απαιτεί JavaScript, που σημαίνει λιγότερο προσβάσιμο. Αυτό δεν είναι ιδανικό για ένα βασικό (κύριο) στοιχείο όπως ένας σύνδεσμος.
Εάν θέλετε να αποφύγετε τη χρήση φόρμας ή εισαγωγής και αναζητάτε σύνδεσμο προς ένα κουμπί, μπορείτε να δημιουργήσετε όμορφα κουμπιάχρησιμοποιώντας ένα περιτύλιγμα div, μια άγκυρα και μια ετικέτα h1. Ίσως το θέλετε αυτό, ώστε να μπορείτε να δημοσιεύσετε ελεύθερα τον σύνδεσμο στη σελίδα σας. Αυτό είναι ιδιαίτερα χρήσιμο για οριζόντια κεντραρισμένα κουμπιά και για εκείνα με κάθετα κεντραρισμένο κείμενο μέσα τους. Δείτε πώς:
Κουμπί!
Στη συνέχεια, στο CSS το στυλ σας θα πρέπει να μοιάζει με αυτό:
Σύνδεσμος-κουμπί-περιτύλιγμα ( πλάτος: 200 εικονοστοιχεία, ύψος: 40 εικονοστοιχεία, σκιά πλαισίου: ένθετο 0 εικονοστοιχεία 1 εικονοστοιχεία 0 εικονοστοιχεία 0 εικονοστοιχεία #ffffff; ακτίνα περιγράμματος: 4 εικονοστοιχεία; χρώμα φόντου: #097BC0; σκιά πλαισίου: 0 εικονοστοιχεία 2 εικονοστοιχεία: 4 εικονοστοιχεία: γκρίζο; block; περίγραμμα: 1px συμπαγές #094BC0 ) .link-button-wrapper > a ( display: inline-table; cursor: text-decoration: none; height: 100%; width:100%; ) .link-button; -wrapper > a > h1 ( περιθώριο: 0 αυτόματο; οθόνη: πίνακας-κελί; κατακόρυφη στοίχιση: μέση; χρώμα: #f7f8f8; μέγεθος γραμματοσειράς: 18 px; οικογένεια γραμματοσειράς: cabinregular; στοίχιση κειμένου: κέντρο; )
Σύνδεσμος συνδέσμου
Κουμπί, κουμπί a(θέση:σχετική;) κουμπί a(πάνω:0;αριστερά:0;κάτω:0;δεξιά:0;)
@Nicolas, αφού δούλεψε για μένα, όπως εσύ, δεν υπήρχε type="button" , που το έκανε να αρχίσει να συμπεριφέρεται σαν τύπος υποβολής. Επειδή έχω ήδη έναν τύπο submit.it, αυτό δεν λειτούργησε για μένα... και τώρα μπορείτε είτε να προσθέσετε μια τάξη στο κουμπί είτε για να λάβετε την απαιτούμενη διάταξη:
Εάν θέλετε να δημιουργήσετε ένα κουμπί που χρησιμοποιείται για μια διεύθυνση URL οπουδήποτε, δημιουργήστε μια κατηγορία κουμπιών για την άγκυρα.
A.button (χρώμα φόντου: #999999; χρώμα: #FFFFFF !σημαντικό; δρομέας: δείκτης; οθόνη: inline-block; βάρος γραμματοσειράς: έντονη γραφή; padding: 5px 8px; στοίχιση κειμένου: κέντρο; -webkit-border- ακτίνα: 5 px;
Γνωρίζω ότι έχουν υποβληθεί πολλές απαντήσεις, αλλά καμία από αυτές δεν φαίνεται να έχει αντιμετωπίσει το πρόβλημα. Εδώ είναι η προσέγγισή μου στη λύση:
- Χρησιμοποιήστε τη μέθοδο με την οποία ξεκινά το OP. Αυτό λειτουργεί πολύ καλά, αλλά μερικές φορές προσθέτει; στη διεύθυνση URL. Το κύριο πρόβλημαείναι; .
- Χρησιμοποιήστε jQuery/JavaScript για να εκτελέσετε τον ακόλουθο σύνδεσμο όταν είναι ενεργοποιημένη η JavaScript, έτσι; δεν προσαρτάται στη διεύθυνση URL. Θα επιστρέψει στη μέθοδο χωρίς πρόβλημα για το πολύ μικρό ποσοστό των χρηστών που δεν έχουν JavaScript.
- Ο κώδικας JavaScript χρησιμοποιεί ανάθεση συμβάντων, ώστε να μπορείτε να επισυνάψετε ένα πρόγραμμα ακρόασης συμβάντων πριν ή . Σε αυτό το παράδειγμα χρησιμοποιώ το jQuery επειδή είναι γρήγορο και απλό, αλλά μπορεί να γίνει σε JavaScript "vanilla".
- Ο κώδικας JavaScript αποτρέπει την προεπιλεγμένη ενέργεια και, στη συνέχεια, ακολουθεί τον σύνδεσμο που καθορίζεται στο χαρακτηριστικό action.
// Ακούστε για κάθεκάνει κλικ σε ένα στοιχείο του εγγράφου με την κατηγορία `link` $(document).on("click", ".link", function(e) ( // Αποτροπή της προεπιλεγμένης ενέργειας (π.χ. υποβολή της φόρμας) e.preventDefault( // Λάβετε τη διεύθυνση URL που καθορίζεται στη φόρμα var url = e.target.parentElement.action; Κουμπιά φόρμας ως συνδέσμους Σύνδεσμος
Υποστήριξη προγράμματος περιήγησης για χαρακτηριστικά CSS3 και συναφή ενεργητική χρήσηστη σχεδίαση ιστοσελίδων, οι διαβαθμίσεις, οι σκιές και οι στρογγυλοποιήσεις έχουν οδηγήσει στη θόλωση της σαφής γραμμής μεταξύ των ενσωματωμένων στοιχείων διεπαφής και των «σχεδιασμένων» στοιχείων. Στην πραγματικότητα, ο χρήστης δεν θα πρέπει να ενδιαφέρεται για το τι έχει μπροστά του, έναν σύνδεσμο ή ένα κουμπί, ακόμα κι αν φαίνονται ακριβώς το ίδιο, γιατί μπορεί να γίνει κλικ και στα δύο. Στην πραγματικότητα, λανθασμένη χρήσηΗ αλλαγή ενός στοιχείου αντί ενός άλλου μπορεί να οδηγήσει σε παραβίαση της κατανόησης της λογικής του ιστότοπου. Με άλλα λόγια, θα γίνει άβολο και άβολο για τον επισκέπτη του ιστότοπου να το χρησιμοποιήσει.
Ας φτιάξουμε έναν σύνδεσμο και ένα κουμπί, να τα σχεδιάσουμε με τον ίδιο τρόπο και να δούμε πώς διαφέρουν μεταξύ τους εκτός από το σχέδιο. Στο παράδειγμα 1, έβαλα την ετικέτα στον κώδικα και εφάρμοσε την κατηγορία σχεδιαστικού στυλ σε αυτά, ενώ προσπαθούσε να αφαιρέσει τις διαφορές, ώστε αυτά τα δύο στοιχεία να μοιάζουν μεταξύ τους, σαν δίδυμα.
Παράδειγμα 1. Σχεδιασμός στοιχείων
HTML5 CSS3 IE Cr Op Sa Fx
Σύνδεσμος και κουμπί .design ( εμφάνιση: inline-block; /* Inline block στοιχείο */ padding: 5px 20px; /* Προσθήκη πεδίων */ text-decoration: none; /* Αφαίρεση της υπογράμμισης από τον σύνδεσμο */ δρομέας: δείκτης; / * Δρομέας χεριού */ φόντο: #deefff /* Φόντο για προγράμματα περιήγησης που δεν υποστηρίζουν διαβαθμίσεις */ /* Διαβάθμιση */ φόντο: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); φόντο: -webkit-gradient(γραμμικό, αριστερό πάνω, αριστερό κάτω, color-stop(0%,#deefff), color-stop(100%,#98bede) φόντο; : -o-linear-gradient(top, #deefff 0%,#98bede 100%): -ms-linear-gradient(top, #deefff 0%,#98bede 100%); , #deefff 0%,#98bede 100%): 10px /* Στρογγυλές γωνίες: 1px συμπαγές #008 /* Προσθήκη μπλε περιγράμματος */ γραμματοσειρά : 12px, sans-serif; ; /* Αλυσιδωτή γραμματοσειρά */ χρώμα: #2c539e /* Χρώμα κειμένου και συνδέσμου */ )
Δείτε πώς φαίνεται στο πρόγραμμα περιήγησης Chrome (Εικόνα 1).
Με την πρώτη ματιά δεν υπάρχει διαφορά. Και τα δύο στοιχεία είναι τα ίδια όταν τοποθετείτε το ποντίκι σας πάνω τους, μετατρέπεται σε "χέρι". Μπορείτε να κάνετε κλικ και να περιμένετε τον τόνο απάντησης. Εδώ αρχίζουν τα μικρά πράγματα όπου βρίσκεται ο διάβολος. Συστηματοποιώ τις διαφορές σε μικρά πράγματα.
- στη γραμμή κατάστασης το πρόγραμμα περιήγησης εμφανίζει τη διεύθυνση του συνδέσμου στον οποίο οδηγεί.
- ο σύνδεσμος μπορεί να ανοίξει σε νέο παράθυρο ή καρτέλα με το μεσαίο κουμπί του ποντικιού.
- ο σύνδεσμος μπορεί να αποθηκευτεί μέσω του μενού περιβάλλοντος του προγράμματος περιήγησης.
- Όταν κάνετε κλικ στο κουμπί, μεταβαίνει στη σελίδα που καθορίζεται μέσα στο χαρακτηριστικό action της ετικέτας. Φυσικά, αυτό λειτουργεί εάν έχουμε ένα κουμπί ενσωματωμένο σε μια φόρμα. Στο παραπάνω παράδειγμα, μπορείτε ακόμη και να κάνετε κλικ στο κουμπί, αλλά δεν θα οδηγήσει σε τίποτα.
- Μπορείτε να επισυνάψετε μια συνάρτηση JavaScript στο κουμπί, η οποία θα κάνει κάτι μαγικό που δεν μπορεί ένας σύνδεσμος.
Αποδεικνύεται ότι το αποτέλεσμα του κλικ σε ένα κουμπί είναι απρόβλεπτο, σε αντίθεση με έναν σύνδεσμο. Εδώ ξέρουμε σίγουρα ότι θα ανοίξει μια νέα σελίδα. Στην περίπτωση ενός κουμπιού, μπορεί να ανοίξει μια νέα σελίδα, να εκτελεστεί ένα σενάριο ή να μην συμβεί τίποτα. Επιπλέον, υπάρχει σύγχυση μεταξύ του κουμπιού και του συνδέσμου. Το εξαιρετικά κομψό κουμπί μας δεν μοιάζει πολύ με το ίδιο και για να δείξουμε ότι μπορείτε να κάνετε κλικ σε αυτό, προσθέτουμε μια ιδιότητα δρομέα στα στυλ με τον δείκτη τιμής. Αλλά αυτό οδηγεί στο γεγονός ότι το κουμπί γίνεται πλέον αντιληπτό ως σύνδεσμος και ορισμένοι χρήστες προσπαθούν να ανοίξουν ένα τέτοιο κουμπί σε μια νέα καρτέλα, και αυτό, φυσικά, είναι αδύνατο.
Τι μπορεί να γίνει για να εξαλειφθεί αυτή η αντίφαση. Υπάρχουν πολλές επιλογές.
Το διακεκομμένο κείμενο φαίνεται στο Σχ. 2. Για λόγους σαφήνειας, αύξησα ελαφρώς το μέγεθος της γραμματοσειράς.
Ρύζι. 2. Κουμπί με διακεκομμένο υπογραμμισμένο κείμενο
Και πάλι, εάν κάνοντας κλικ στο κουμπί ανοίγει μια άλλη σελίδα, η διακεκομμένη γραμμή δεν χρειάζεται καθώς θα μπερδέψει τους χρήστες. Επομένως, η μέθοδος 2 είναι κατάλληλη μόνο για σενάρια που κάνουν κάποια εργασία στην ίδια σελίδα.
Το χρησιμοποιείτε, χμ... καλά, όταν θέλετε να βάλετε ένα κουμπί σε μια σελίδα που ο χρήστης μπορεί να κάνει κλικ, σωστά; Δυστυχώς τα πράγματα είναι λίγο πιο περίπλοκα. Καταρχήν, αυτό είναι κοντά στην αλήθεια, αλλά ας μελετήσουμε το θέμα πιο βαθιά.
Το ίδιο το στοιχείο μοιάζει με αυτό:
Κάνε κάτι
Ποιο είναι το πιο συνηθισμένο αποτέλεσμα κάνοντας κλικ σε κάτι σε έναν ιστότοπο; Πλοηγηθείτε σε μια νέα διεύθυνση URL σαν να είχατε κάνει κλικ σε έναν σύνδεσμο ( στοιχείο ).
Το στοιχείο από μόνο του δεν μπορεί να το κάνει αυτό. Πολύς λόγος έγινε για να επιτραπεί το «href παντού», αλλά δεν βγήκε ποτέ τίποτα.
Όταν κάνετε κλικ σε ένα κουμπί, πραγματοποιούνται ορισμένες ενέργειες, εάν χρησιμοποιείται το κατάλληλο περιβάλλον...
Ένα κουμπί είναι ένα στοιχείο φόρμαςΟι φόρμες Ιστού ενδέχεται να περιέχουν κουμπιά για την εκτέλεση (επιβεβαίωση) ενεργειών. Μπορεί να νομίζετε ότι μοιάζει κάπως έτσι:
Το στοιχείο φλοιού, από προεπιλογή, συμπεριφέρεται ακριβώς όπως φαίνεται παραπάνω.
υποβάλλουν
Ωστόσο, οι φόρμες μπορούν επίσης να έχουν κουμπιά ακύρωσης. Μπορείτε να αντιγράψετε τον τύπο ενέργειας του κουμπιού αλλάζοντας την προεπιλεγμένη συμπεριφορά από την εκτέλεση (επιβεβαίωση) της ενέργειας προς ακύρωση:
Επαναφορά
Κάνοντας κλικ σε αυτό το κουμπί θα αφαιρεθούν όλα τα άλλα πεδία εισαγωγής (και οι περιοχές κειμένου) από το γονικό μπλοκ.
Τα κουμπιά μπορεί να περιέχουν περιεχόμενοΟ κύριος λόγος για τη χρήση ενός στοιχείου είναι ότι περιέχει ετικέτες ανοίγματος και κλεισίματος (). Αυτό σημαίνει ότι μπορεί να διακριθεί από οποιονδήποτε άλλο κωδικό. Στην πράξη, συχνά προκύπτει η ακόλουθη κατάσταση:
Επιβεβαιώνω
Όσο παραμένει, αυτό το μικτό περιεχόμενο θα εμφανίζεται στην οθόνη.
Από όσο μπορώ να πω, δεν υπάρχουν ιδιαίτεροι περιορισμοί στο τι μπορείτε να βάλετε μέσα σε ένα κουμπί, έτσι μπορείτε να βάλετε ό,τι θέλετε εκεί μέσα, δημιουργώντας μερικά πραγματικά φανταχτερά κουμπιά. Είναι επίσης δυνατή η χρήση ψευδοστοιχείων.
Ας αφήσουμε το θέμα των στυλ για τώρα, αν και διαφορετικά προγράμματα περιήγησης έχουν συνήθως ειδικά στυλ που ισχύουν για κουμπιά. Εάν θέλετε, μπορείτε να διατηρήσετε τα στυλ που εφαρμόζονται από τα προγράμματα περιήγησης ή μπορείτε να τα καταργήσετε εντελώς και, στη συνέχεια, το προεπιλεγμένο στυλ σας θα αντικαταστήσει τα στυλ των προγραμμάτων περιήγησης.
Παρακαλώ σημειώστε: "εάν ένα κουμπί δεν έχει έγκυρο href, είναι απλώς ένα στοιχείο"Θυμηθείτε, έγραψα νωρίτερα ότι αυτό το θέμα μου δίνει πραγματική ευχαρίστηση. Αυτό με ενέπνευσε να γράψω αυτό το άρθρο. Φανταζόμουν πόση ευχαρίστηση θα έπαιρνα κοιτάζοντας διάφορα περιστατικά. Οπως:
Έχω ήδη βαρεθεί με αυτά τα κουμπιά.
Πιθανότατα, ο παραπάνω κώδικας σημαίνει κάτι σαν: Θα κάνω κλικ σε ένα κουμπί για να κάνω κάτι με JavaScript. Τέλος πάντων, αυτό φαίνεται να είναι καλύτερο από τη χρήση του κανονικού, επειδή έχετε τη δυνατότητα να αλλάξετε την εμφάνιση του δρομέα και όλα τα άλλα στυλ από προεπιλογή.
Έξω είμαι άχρηστος.
Ωστόσο, εξακολουθεί να φαίνεται καλύτεροΑκόμα κι αν δεν κάνει τίποτα εκτός του , αυτό το στοιχείο εξακολουθεί, κατά τη γνώμη μου, να χρησιμοποιείται καλύτερα για άλλες ενέργειες που δεν απαιτούν μετάβαση σε άλλη σελίδα. Αν μη τι άλλο, είναι καλύτεροι από ψεύτικους συνδέσμους.
Πρόστιμο. Ας εισάγουμε λίγο JavaScriptΑυτό μάλλον είναι Η καλύτερη απόφαση. Εάν απαιτείται JavaScript για οποιεσδήποτε ενέργειες που σχετίζονται με κλικ, τότε για ένα στοιχείο, καταρχήν, μπορείτε να το κάνετε χωρίς να εκτελέσετε JS.
Μπορούμε όμως να κάνουμε τα εξής:
// 1. Δημιουργία κουμπιού var button = document.createElement("button"); button.innerHTML = "Κάνε κάτι"; // 2. Τοποθετήστε το var body = document.getElementsByTagName("body"); body.appendChild(button); // 3. Προσθήκη επεξεργασίας του action button.addEventListener ("click", function() ( alert("dod something"); ));
Μπορείτε εύκολα να κάνετε ένα "κουμπί προσθήκης" μέρος της ροής εργασίας JavaScript.
Πότε είναι καλύτερο να χρησιμοποιείτε συνδέσμους;Εάν έχετε μεταβάσεις υπερκειμένου σε άλλες σελίδες, τότε είναι πιο λογικό να τις μορφοποιήσετε με έναν σύνδεσμο ώστε να μπορείτε να χρησιμοποιήσετε μια άγκυρα. Ακόμα κι αν επαναπροσδιορίσετε τη συμπεριφορά του μέσω JavaScript.
Αυτή είναι μια προοδευτική βελτίωση στα καλύτερά της. Για παράδειγμα:
- Ένα κουμπί αναζήτησης συνήθως προκαλεί την εκτέλεση σεναρίων αναζήτησης Ajax - ενώ ένας σύνδεσμος μπορεί απλώς να οδηγεί σε μια σελίδα αναζήτησης.
- Το κουμπί "δημοσίευση" ξεκινά το επόμενο βήμα της δημοσίευσης κάτι που χρειάζεται ο χρήστης - αλλά ο σύνδεσμος μπορεί απλώς να οδηγήσει στη σελίδα /publish/.
- Το κουμπί με μια μικρογραφία εικόνας ανοίγει ένα ξεχωριστό πλαίσιο στο οποίο εμφανίζεται η εικόνα μεγαλύτερο μέγεθος— και ο σύνδεσμος θα μπορούσε απλώς να είναι το URL σε αυτήν τη μεγαλύτερη εικόνα.
Εάν όλα τα άλλα αποτύχουν, εισαγάγετε ένα κουμπί με JavaScript.
Σχετικά θέματαΜπορεί να καταλήξεις σε κάτι παρόμοιο με αυτό που έκανα εγώ!
Αλλά εσύ ο ίδιος δεν είσαι ακόμα καλά. Το MDN συζητά αυτό το θέμα λεπτομερώς:
Σημείωση: Να είστε προσεκτικοί όταν επισημαίνετε συνδέσμους με λειτουργίες κουμπιών. Οι ενέργειες κουμπιών συνήθως καλούνται χρησιμοποιώντας το πλήκτρο διαστήματος, ενώ οι ενέργειες σύνδεσης πραγματοποιούνται μέσω του πλήκτρου Enter.
Θα χρειαστεί επίσης να προσθέσετε ένα κλειδί χειρισμού ενεργειών που θα ανταποκρίνεται στο πάτημα του πλήκτρου διαστήματος για να διασφαλιστεί η συνέπεια με το αρχικό κουμπί.
Λοιπόν, αυτό είναι όλο. Και χμ... κάνε σωστά διαδραστικά πράγματα.
Η μετάφραση του άρθρου “When To Use The Button Element” ετοιμάστηκε από τη φιλική ομάδα του έργου.