Η ετικέτα label

Η ετικέτα label ορίζει μια ετικέτα για ένα πεδίο εισαγωγής τύπου input, textarea, select και ούτω καθεξής.

Η ετικέτα συνδέεται με ένα συγκεκριμένο πεδίο εισαγωγής χρησιμοποιώντας το χαρακτηριστικό for. Σε αυτό πρέπει να καθορίζεται η τιμή του χαρακτηριστικού id του πεδίου εισαγωγής στο οποίο συνδέεται η ετικέτα. Επίσης, η ετικέτα συνδέεται με το στοιχείο, αν αυτό το στοιχείο τοποθετηθεί μέσα στην ετικέτα label. Σε αυτήν την περίπτωση δεν χρειάζεται να καθοριστεί το χαρακτηριστικό for. Δείτε τα παραδείγματα για καλύτερη κατανόηση.

Πατώντας στην ετικέτα, τα checkbox ή τα κουμπιά radio που είναι συνδεδεμένα σε αυτήν θα αλλάζουν την κατάστασή τους από επιλεγμένο σε μη επιλεγμένο και αντίστροφα. Η ετικέτα σε αυτήν την περίπτωση χρειάζεται για ευκολία: είναι δύσκολο να πατηθούν τα μικρά στοιχεία της φόρμας με τον δρομέα, ενώ σε μια μεγάλη ετικέτα με κείμενο - είναι πολύ πιο εύκολο.

Το πεδίο εισαγωγής κειμένου που είναι συνδεδεμένο με την ετικέτα τύπου input και textarea θα λαμβάνει την εστίαση εισαγωγής. Η εστίαση - είναι όταν ο δρομέας αναβοσβήνει στο πεδίο εισαγωγής, σε αυτήν την περίπτωση, αν γράψετε κάτι στο πληκτρολόγιο - το κείμενο θα μπει σε αυτό το πεδίο (δείτε την ψευδοκλάση focus για προχωρημένη κατανόηση της εστίασης).

Η ετικέτα label μπορεί να χρησιμοποιηθεί για προσομοίωση checkbox ή κουμπιού radio. Αυτό χρειάζεται για να δημιουργηθεί ένα checkbox ή radio με το δικό του σχέδιο (κάτι που απαγορεύεται στο CSS, αλλά με τη χρήση έξυπνων τεχνικών είναι δυνατό).

Χαρακτηριστικά

Χαρακτηριστικό	Περιγραφή
for	Σε αυτό το χαρακτηριστικό πρέπει να καθορίζεται η τιμή του χαρακτηριστικού id αυτού του πεδίου εισαγωγής, στο οποίο συνδέεται η ετικέτα label.
accesskey	Ορίζει ένα πλήκτρο συντόμευσης, με τη βοήθεια του οποίου μπορείτε να μεταβείτε στο στοιχείο φόρμας που είναι συνδεδεμένο με την ετικέτα (μέσω του χαρακτηριστικού for). Για περισσότερες λεπτομέρειες δείτε το χαρακτηριστικό accesskey.

Παράδειγμα . Checkbox

Ας συνδέσουμε μια ετικέτα σε ένα checkbox χρησιμοποιώντας το χαρακτηριστικό for. Πατήστε στην ετικέτα και θα δείτε την αλλαγή κατάστασης του checkbox από επιλεγμένο σε μη επιλεγμένο και αντίστροφα:

:

Παράδειγμα . Μέσα στο label

Και τώρα ας μην συνδέσουμε την ετικέτα μέσω του χαρακτηριστικού for, αλλά ας βάλουμε τα στοιχεία απευθείας μέσα στην ετικέτα label, σε αυτήν την περίπτωση πατώντας στο κείμενο της label θα οδηγεί επίσης στην ενεργοποίηση του στοιχείου:

:

Παράδειγμα . Πεδίο εισαγωγής κειμένου

Ας συνδέσουμε μια ετικέτα στο στοιχείο input χρησιμοποιώντας το χαρακτηριστικό for. Το πάτημα στην ετικέτα θα οδηγήσει στην απόκτηση της εστίασης από το πεδίο εισαγωγής. Ταυτόχρονα, το περιεχόμενο κείμενο του πεδίου (που θα προσθέσουμε με το χαρακτηριστικό value) θα επιλεγεί. Αν αρχίσετε να γράφετε κάτι στο πληκτρολόγιο - αυτό το κείμενο θα σβηστεί. Μπορείτε να απαλλαγείτε από την επιλογή, χωρίς να διαγράψετε το κείμενο, πατώντας με το ποντίκι στο πεδίο εισαγωγής: η εστίαση δεν θα εξαφανιστεί, αλλά η επιλογή θα χαθεί:

:

Δείτε επίσης