Θα ήθελα να δημιουργήσω ένα κουμπί HTML που λειτουργεί σαν σύνδεσμος. Έτσι, όταν κάνετε κλικ στο κουμπί, ανακατευθύνεται σε μια σελίδα. Θα ήθελα να είναι όσο το δυνατόν πιο προσβάσιμο.
Θα ήθελα επίσης να μην υπάρχουν επιπλέον χαρακτήρες ή παράμετροι στη διεύθυνση URL.
Πώς μπορώ να το πετύχω αυτό;
Με βάση τις απαντήσεις που έχουν αναρτηθεί μέχρι στιγμής, αυτή τη στιγμή το κάνω αυτό:
<form method="get" action="/page2">
<button type="submit">Continue</button>
</form>
αλλά το πρόβλημα με αυτό είναι ότι στο Safari και στον Internet Explorer, προσθέτει έναν χαρακτήρα ερωτηματικού στο τέλος της διεύθυνσης URL. Πρέπει να βρω μια λύση που να μην προσθέτει χαρακτήρες στο τέλος της διεύθυνσης URL.
Υπάρχουν δύο άλλες λύσεις για να γίνει αυτό: Χρήση JavaScript ή διαμόρφωση ενός συνδέσμου ώστε να μοιάζει με κουμπί.
Χρήση JavaScript:
<button onclick="window.location.href='/page2'">Continue</button>
Αλλά αυτό προφανώς απαιτεί JavaScript, και για το λόγο αυτό είναι λιγότερο προσβάσιμο σε αναγνώστες οθόνης. Ο σκοπός ενός συνδέσμου είναι να μεταβείτε σε μια άλλη σελίδα. Επομένως, η προσπάθεια να κάνουμε ένα κουμπί να ενεργεί σαν σύνδεσμος είναι η λάθος λύση. Η πρότασή μου είναι να χρησιμοποιήσετε έναν σύνδεσμο και να τον διαμορφώσετε ώστε να μοιάζει με κουμπί.
<a href="/link/to/page2">Continue</a>
Ο απλός τρόπος HTML είναι να το βάλετε σε μια <φόρμα>
στην οποία καθορίζετε το επιθυμητό URL-στόχο στο χαρακτηριστικό action
.
<form action="http://google.com">
<input type="submit" value="Go to Google" />
</form>
Εάν είναι απαραίτητο, ορίστε CSS display: inline;
στη φόρμα για να την κρατήσετε στη ροή με το περιβάλλον κείμενο. Αντί για <input type="submit">
στο παραπάνω παράδειγμα, μπορείτε επίσης να χρησιμοποιήσετε <button type="submit">
. Η μόνη διαφορά είναι ότι το στοιχείο <button>
επιτρέπει παιδιά.
Διαισθητικά θα περιμένατε να μπορείτε να χρησιμοποιήσετε το <button href="http://google.com">
ανάλογα με το στοιχείο <a>
, αλλά δυστυχώς όχι, αυτό το χαρακτηριστικό δεν υπάρχει σύμφωνα με τις [προδιαγραφές HTML][1].
Εάν επιτρέπεται η χρήση CSS, απλά χρησιμοποιήστε ένα <a>
το οποίο διαμορφώνετε ώστε να μοιάζει με κουμπί χρησιμοποιώντας μεταξύ άλλων την ιδιότητα [appearance
][2] ([μόνο η υποστήριξη του Internet Explorer είναι προς το παρόν (Ιούλιος 2015) ακόμα φτωχή][3]).
<a href="http://google.com" class="button">Go to Google</a>