4.8.4 Label

• 1 Allgemein
• 2 Anleitung zur Beschriftung von Formularfeldern mit Labels
• 3 Spezialfall: Beschriftung oberhalb des Formularfeldes
• 4 Beispiele von Labels verschiedener Elemente
• 5 Grundlagen-Websites & Workshops

Technik Formulare: Eingabefelder definieren Formulare: Formularbox

Anwendung Formulare: Radio Button Formulare: Checkboxen Formulare: Klick Buttons

-

⇧ 1 Allgemein

Prinzip

• Labels dienen zur Beschriftung von Formularfeldern und anderen Elementen von Formularen.

• Mit Labels kann ein logischer Bezug zwischen der Beschriftung und den Formularelementen hergestellt werden.

• Die Labels können mit einem Stylesheet formatiert werden.

• Mit Labels ist es möglich, tabellenlose Formulare herzustellen.

-

⇧ 2 Anleitung zur Beschriftung von Formularfeldern mit Labels

Prinzip

• Die Beschriftung soll links des damit beschrifteten Elementes sein.

• Die Formatierung erfolgt tabellenlos mit dem Stylesheet-Code float:left.

Anleitung

1) Quelltext: <label for="..."> ... </label>

• <label> und </label> sind Anfangs- und End-Tag des Labels.

• label for="..." In den Klammern wird der Name des Labels eingegeben.

  Zugelassene Schriftzeichen: Kleinbuchstaben (als Empfehlung), keine Zahl am Anfang, keine Abstände, kein Bindestrich, keine Sonderzeichen mit Ausnahme des Unterstriches.

  Wichtig: Dieser Eintrag muss identisch sein mit der Identifikation id="..." des Formularelementes (zB. Formularfeldes), das mit diesem Label beschriftet wird.

• Zwischen <label> und </label> wird die Beschriftung des Formularelementes eingegeben.

Quelltext nur des Labels:

<label for="lab_beschriftung1">Beschriftung 1</label>

Quelltext des Labels im Formular zusammen mit dem Formularfeld:

<form action="..." method="post">
<p>Normale Beschriftung links vom Formualfeld:<br>
(Die Beschriftung "floatet" links vom Formularfeld)</p>
<label for="lab_beschriftung1">Beschriftung 1</label>
<input type="text" name="lab_beschriftung1" id="lab_beschriftung1" size="30" maxlength="30">
</form>

2) Stylesheet

• display:block; Diese Angabe erzwingt einen Block und damit eine neue Zeile.

• float:left; Die Labels "floaten" links vom nächsten Element, das im vorliegenden Fall ein Formularfeld ist.

• width:...; gibt die Breite des Beschriftungsfeldes, d.h. den Abstand vom linken Rand bis zum Formularfeld. Dies kann auch als Abstand bis zur "Mittellinie" bezeichnet werden.

• text-aling:right; richtet die Beschriftung nach rechts aus.

• padding-right:...; Abstand rechts (bis zum Formularfeld).

label { 
/*Alle Labels ohne Radio-Buttons und Checkbox*/             
display:block; float:left; 
/*Die Beschriftung "floatet" links*/
margin-top:4px;
padding-right:1em;/*Abstand rechts d.Beschriftung*/
text-align:right;/*Beschr.nach rechts ausgerichtet*/
width:9em;/*Breite links der Mittellinie*/ 
}

3) Dokument

Normale Beschriftung links vom Formualfeld:
(Die Beschriftung "floatet" links vom Formularfeld)

Beschriftung 1

-

⇧ 3 Spezialfall: Beschriftung oberhalb des Formularfeldes

Prinzip

• Das "floaten" des Labels wurde mit der "Class"-Formatierung ausgeschaltet.

Anleitung

1) Quelltext

• label class="nofloat" Mit dieser Formatierung wird "floaten" des Labels ausgeschaltet.

<form action="..." method="post">
<p>Beschriftung oberhalb des
Formularfeldes:<br>
(Das "floaten" wurde ausgeschaltet)</p>
<label class="nofloat" for="lab_beschriftung2">
Beschriftung 2</label>
<input type="text" name="lab_beschriftung2"
id="lab_beschriftung2"
size="30" maxlength="30">
</form>

2) Stylesheet

• .nofloat {...} Mit dieser Angabe wird das floaten der damit formatierten Elemente ausgeschaltet.

• text-align:left; richtet die Beschriftung links aus.

.nofloat  { /*Für Elemente, die nicht "floaten" sollen*/
  float:none;
  text-align:left;
}

3) Dokument

Beschriftung oberhalb des Formularfeldes:
(Das "floaten" wurde ausgeschaltet)

Beschriftung 2

-

⇧ 4 Beispiele von Labels verschiedener Elemente

Bemerkungen

• Das in der Website von SELFHTML mit einer Tabelle erstellte Formular wurde mit anderen Beispielen ergänzt und auf ein tabellenloses Formular umgearbeitet.

1) Quelltext:

<form action="..." method="post">
<fieldset>
<legend>Formular</legend>

<label for="lab_name">Name</label>
<input type="text" name="lab_name" 
id="lab_name" size="30" maxlength="40" 
value="Ihr Vorname und Nachname"><br>

<label for="lab_email">E-Mail</label>
<input type="text" name="lab_email"
id="lab_email" size="30" maxlength="40" 
value="Ihre E-Mail Adresse"><br>

<label for="lab_text">Text</label>
<textarea name="lab_text" id="lab_text" 
cols="30" rows="5">
Dies ist ein Eingabefeld für einen mehrzeiligen Text.
</textarea><br>

</fieldset>
</form>

2) HIML-Dokument

Formular

Name
E-Mail
Text Dies ist ein Eingabefeld für einen mehrzeiligen Text.

-

⇧ 5 Grundlagen-Websites & Workshops

• W3C Recommendation -
  HTML 4.01 Specification:
  Deutsche Übersetzung de Das Element LABEL

• SELFHTML-Wiki de HTML/Formulare/Gruppierung Beispiel
• SELFHTML-Wiki de HTML/Formulare/Gruppierung/Label Referenz

↑