Formularfelder beschriften

Man kann mit HTML schon seit langer Zeit Formularfelder beschriften. Genauer gesagt wurden die dazugehörigen HTML Tags mit der HTML Spezifikation 4.01 eingeführt. Du kannst dabei mit CSS diese Beschriftungen leicht formatieren. Auch kannst du einzelne Felder, Checkboxen oder Radio-Buttons in deinen Formularen mit einem Klick auf die Beschriftung aktivieren. Ein zusätzliches JavaScript o.Ä. ist hierdurch nicht mehr nötig.

Wie genau du deine Formularfelder beschriften kannst, stelle ich dir dabei in diesem Artikel vor.

 

In HTML Formularfelder beschriften

Mit dem folgenden Beispiel zeige ich dir dabei, wie du eine Beschriftung in deine Formulare einbauen kannst.

 

Beispiel:

<form>
   <label for="1">Dein Name</label> <input id="1" name="Name" type="text"><br />
   <label for="2">Deine E-Mail Adresse</label> <input id="2" name="email" type="text"><br />
   <label for="3">News abonnieren</label>  <input id="3" name="Newsletter" type="checkbox">
 </form>

 


Live Anzeigebeispiel:

 

 


 

Erklärung:

Mit dem Tag <label> lassen sich die Formularfelder beschriften. Das Attribut for="..." bewirkt, dass das Label dem Formularfeld innerhalb der Datei eindeutig zugeordnet werden kann. Nur so ist es möglich, dass du auch mit einem Klick auf die Beschriftung das Feld auswählen kannst. Probiere es mal im Anzeigebeispiel aus.

Wie du dabei im Anzeigebeispiel sehen kannst, erscheint die Beschriftung links vom Formularfeld. Wenn du das label-Tag auf die andere Seite setzt, zeigt der Browser die Beschriftung entsprechend auf der rechten Seite an.

Mit CSS kannst du schließlich die Beschriftung nach deinen Vorstellungen gestalten. Dazu fügst du einfach die gewünschten Angaben zu deinem Stylesheet hinzu. Achte dabei darauf, deine Formulare auch für Mobilgeräte zu optimieren.

Welche Formularfelder du generell erstellen kannst und welche Möglichkeiten dabei HTML 5 bietet, kannst du im Artikel „Formulare erstellen in HTML 5“ nachlesen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.