HTML <label> κείμενο

  • Προηγούμενη σελίδα <kbd>
  • Επόμενη σελίδα <legend>

Definition and usage

<label> Labels define annotations (markers) for input elements.

The label element does not present any special effects to the user. However, it improves accessibility for mouse users. If you click on the text within the label element, it will trigger this control. That is, when the user selects this label, the browser will automatically focus on the form control associated with the label.

<label> The label's for attribute They should be the same as the id attribute of the relevant elements.

<label> Labels can define labels (markers) for multiple elements:

Using the correct way to associate the above elements with labels will be beneficial for the following users:

  • Screen reader users (when the user focuses on an element, the label will be read)
  • 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> Για τους χρήστες που δυσκολεύονται να κάνουν κλικ σε πολύ μικρές περιοχές (π.χ. κουτάκια επιλογής) - επειδή όταν ο χρήστης κάνει κλικ

Δείτε επίσης:

Εγχειρίδιο αναφοράς HTML DOM:Όντικον του Label

Παράδειγμα

Τρεις επιλογές με label:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Υποβολή">
</form>

Δοκιμάστε το προσωπικά

Συμβουλές και σχόλια

Συμβουλή:<label> Η ιδιότητα for πρέπει να ισούται με η ιδιότητα id του σχετικού στοιχείου για να τα συνδέσουν μαζί τους. Μπορεί επίσης να τοποθετηθεί στο <label> Ορίζει το στοιχείο στο εσωτερικό του οποίου συνδέεται η ετικέτα με το στοιχείο.

Ιδιότητες

Ιδιότητες Τιμή Περιγραφή
for Στοιχείο id Ορίζει το στοιχείο που συνδέεται με την ετικέτα.
form Φόρμα id Ορίζει το πεδίο του label που ανήκει στη φόρμα.

Γενικές ιδιότητες

<label> Η ετικέτα υποστηρίζει επίσης Γενικές ιδιότητες στο HTML.

ιδιότητες αιθαίρετων

<label> Η ετικέτα υποστηρίζει επίσης Αιθαίρετες ιδιότητες στο HTML.

Προεπιλεγμένες ρυθμίσεις CSS

Οι περισσότεροι περιηγητές θα χρησιμοποιήσουν τις παρακάτω προεπιλεγμένες τιμές για την εμφάνιση <label> Στοιχείο:

label {
  cursor: default;
}

Δοκιμάστε το προσωπικά

Υποστήριξη προγράμματος περιήγησης

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη Υποστήριξη
  • Προηγούμενη σελίδα <kbd>
  • Επόμενη σελίδα <legend>