Label-Tag in HTML
- 24-07-2022
- Trung Minh
- 0 Comments
In diesem Artikel zeige ich Ihnen, wie Sie das Label-Tag in HTML verwenden. Dies ist ein Tag, mit dem Labels für Objekte im Formular erstellt werden.
1. Was ist das Label-Tag?
Das Label-Tag in HTML hat den Effekt, dass ein Label gesetzt wird, um das Eingabe-Tag zu beschreiben. Im Wesentlichen zeigt das Label-Tag dem Benutzer nichts Besonderes an. Wenn Sie jedoch auf den Inhalt innerhalb des Label-Tags klicken, springt der Mauszeiger automatisch zu dem Element, das das Label-Tag darstellt.
<label for="id"></label>
Hinweis : Das for-Attribut des Label-Tags muss mit der ID des Input-Tags übereinstimmen, das es darstellt.
Sie können ein span-Tag, ein p-Tag oder ein beliebiges anderes Tag verwenden, um das label-Tag zu umgeben. Sie können auch CSS verwenden, um das Aussehen anzupassen.
2. Verwendung des Label-Tags in HTML
Verwenden Sie beispielsweise das Label-Tag, um Labels für Eingabe-Tags zu erstellen.
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <form action="/action_page.php"> <label>Name:</label> <input type="text" name="name"><br /> <label>Email:</label> <input type="text" name="email"><br /> </form> </body> </html>
3. Das for-Attribut des label .-Tags
Wie gesagt, das for-Attribut des Label-Tags zeigt auf das Input-Tag, das es repräsentiert. Sein Wert muss mit der ID dieses Eingangs-Tags übereinstimmen, dann springt der Cursor beim Klicken auf das Label automatisch zum Eingangs-Tag.
Beispiel: Verwenden Sie das for-Attribut für das Label-Tag.
<!DOCTYPE html> <html> <head> <title>Học lập trình miễn phí tại web888.vn</title> <meta charset="utf-8"> </head> <body> <h1>Học lập trình miễn phí tại web888.vn</h1> <form action="/action_page.php"> <label for="name">Name:</label> <input type="text" id="name" name="name"><br /> <label for="email">Email:</label> <input type="text" id="email" name="email"><br /> </form> </body> </html>