Ein Label ist ein sehr wichtiges Element einer Webseite, mit dem Sie eine Textbezeichnung mit einem bestimmten Formularelement, z. B. einem Eingabefeld, verknüpfen können. Standardmäßig befindet sich das label jedoch links von input, was kann ich tun, wenn ich eine Beschriftung über einem Element platzieren möchte?
Es gibt eine einfache und unkomplizierte Möglichkeit, ein label über die input zu schreiben. Um dies zu tun, müssen Sie einen speziellen Ansatz und Styling-Techniken verwenden. Beachten Sie, dass Sie HTML und CSS verwenden müssen, um das gewünschte Ergebnis zu erzielen.
Zuerst müssen Sie input und label in einen Container wie ein div einpacken. Legen Sie dann die gewünschte Breite und Höhe für den Container fest, sowie die Eigenschaft position: relative, mit der Sie die darin enthaltenen Elemente relativ zu ihm selbst positionieren können. Als nächstes legen Sie für label die Eigenschaft position: absolute fest und geben die Positionierung mit den Eigenschaften top und left an. Auf diese Weise können wir die Beschriftung über das Eingabefeld verschieben.
Was sind label und input
Label ist ein wichtiger Teil der Formularverfügbarkeit und hilft Benutzern zu verstehen, was genau in das Eingabefeld eingegeben oder ausgewählt werden muss. Wenn Sie außerdem auf eine Textbeschriftung klicken, wird das entsprechende Element automatisch aktiviert input, Verbesserung der Benutzerfreundlichkeit der Form.
Input - Dies ist ein Formularelement, mit dem Benutzer Daten eingeben können. Es kann ein Textfeld (input type="text"), ein Passwort-Eingabefeld (input type="password"), ein Kontrollkästchen (input type="checkbox") und viele andere Typen sein.
Um eine Beschriftung zu verknüpfen label mit Element input attribut wird verwendet for für label und ID id für input. Dadurch wird das Attribut festgelegt for im Wert id Elementes input. wir können eine Verbindung zwischen label und input.
Um beispielsweise eine Beschriftung über einem Texteingabefeld zu erstellen, erstellen wir ein Element label mit Attribut for das zeigt auf id Elementes input. Dann erstellen wir ein Element input mit einem einzigartigen id entspricht dem Wert des Attributs for in label. Auf diese Weise erstellen wir eine Beziehung zwischen der Beschriftung und dem Eingabefeld.
Methoden zum Erstellen von label über input
Es gibt mehrere Möglichkeiten, ein label über der input in HTML zu erstellen:
1. Mit dem Tag : können Sie die input- und label-Elemente in einen Container einbetten oder das label über das for-Attribut an die input binden. Zum Beispiel:
2. Mit CSS: -Pseudoelementen können Sie dem Input-Element ein Pseudoelement ::before oder ::after hinzufügen und es mit CSS so formatieren, dass es wie ein label über der input aussieht. Zum Beispiel:
input::before3. Durch CSS-Positionierung: Es ist möglich, eine absolute oder relative Positionierung zu verwenden, um das Label über der input zu platzieren. Zum Beispiel:
.label .label > input
Mit all diesen Methoden können Sie ein label über der input erstellen und die Benutzeroberfläche des Formulars verbessern, wodurch es verständlicher und zugänglicher wird.
Methode 1: Verwenden eines label-Tags mit dem Attribut for
Die Methode, ein Label-Tag mit einem for-Attribut zu verwenden, ermöglicht es Ihnen, ein Label einfach mit einem Eingabefeld auf einer Webseite zu verknüpfen.
Um eine solche Verbindung herzustellen, ist es notwendig:
- Definieren Sie ein Label-Tag und platzieren Sie es vor dem Eingabefeld.
- Geben Sie innerhalb des Label-Tags den Beschriftungstext an, der über dem Eingabefeld angezeigt werden soll.
- Legen Sie das for-Attribut für das Label-Tag fest und legen Sie den Wert des id-Attributs für das Eingabefeld fest, mit dem Sie eine Verknüpfung herstellen möchten.
- Definieren Sie ein input-Tag mit einem id-Attribut, das dem Wert des for-Attributs des zugeordneten label-Tags entsprechen muss.
Dadurch verknüpft der Browser das Etikett mit dem Eingabefeld und wenn Sie auf das Etikett klicken, wird der Fokus automatisch auf das Eingabefeld gesetzt. Dies erhöht die Benutzerfreundlichkeit des Formulars und verbessert die Benutzerverfügbarkeit.
In diesem Beispiel wird die Bezeichnung "Name:" mit einem Eingabefeld verknüpft, indem das Label-Tag mit dem Attribut for="name" und das input-Tag mit dem Attribut verwendet werden.
Methode 2: Platzieren der input innerhalb des Label-Tags
Die zweite Methode zum Erstellen eines Labels über der input besteht darin, die input innerhalb des label-Tags zu platzieren. Dies ist einer der Vorteile der Verwendung des label-Tags, da es Ihnen ermöglicht, eine Beschriftung mit einem Formularelement zu verknüpfen, ohne dass das for-Attribut verwendet werden muss.
Um diese Methode zu implementieren, müssen Sie die input wie folgt in das Label-Tag einbetten:
| HTML-Code | Ergebnis |
|---|---|
| Geben Sie einen Namen ein: | Geben Sie einen Namen ein: |
In diesem Fall wird der Text "Name eingeben:" über dem Eingabefeld angezeigt und automatisch mit dem Eingabefeld verknüpft. Wenn Sie auf den Text "Namen eingeben" klicken:" der Fokus wird auf das Eingabefeld umgeleitet.
Die Verwendung dieser Methode vereinfacht das Markup und macht den Code verständlicher. Es bietet auch einen größeren Anklickbereich, um das Eingabefeld zu aktivieren, was die Benutzererfahrung verbessert.
Anwendungsbeispiele
Beispiel 1:
In diesem Beispiel wird gezeigt, wie Sie ein Label über der input mithilfe von HTML erstellen:
In diesem Beispiel wird die Bezeichnung "Benutzername" über dem Eingabefeld erstellt. Die Beschriftung wird mit dem Attribut "for" - in diesem Fall "username" - mit dem Eingabefeld verknüpft. Wenn Sie also auf ein Label klicken, wird der Fokus auf das entsprechende Eingabefeld gelegt.
Beispiel 2:
Wenn sich das Eingabefeld direkt innerhalb des label-Elements befindet, müssen Sie das Attribut "for" nicht verwenden, um die Beschriftung mit dem Eingabefeld zu verknüpfen:
Пароль: In diesem Beispiel wird die Bezeichnung "Kennwort" erstellt und das Eingabefeld "Kennwort" befindet sich direkt im label-Element. Wenn Sie auf ein Etikett klicken, wird der Fokus auch auf das Eingabefeld gelegt.
Beispiel 3:
Um die Verfügbarkeit zu verbessern, können Sie dem Label das Attribut "title" hinzufügen, um weitere Informationen hinzuzufügen:
In diesem Beispiel wurde das Attribut "title" mit dem Wert "Geben Sie Ihre E-Mail-Adresse ein" hinzugefügt. Wenn Sie den Mauszeiger über eine Beschriftung bewegen, wird eine Quickinfo mit dem angegebenen Text angezeigt.
Beispiel 4:
Eine Beschriftung kann auch Textformatierungselemente enthalten:
In diesem Beispiel enthält die Beschriftung "Kommentar" ein Textformatierungselement, das das Wort "optional" hervorhebt. Der Text wird kursiv angezeigt.
