Formulare Teil 3 – Label, Textfeld/Textarea

Wo wir schon im zweiten Teil bei Ordnung waren, machen wir doch direkt weiter… Denn das label-Tag verbindet ein Eingabefeld mit einer dazu passenden Beschriftung. Was in manchen Situationen nicht nur der Übersichtshalber hilft (Was gehört zu welchem Feld) sondern auch der Usability.


Beschriftung von Eingabefeldern

Label-Tag: Das Label-Tag sorgt für die Beschriftung von Feldern. Zusätzlich vergrößert es den klickbaren Bereich eines Eingabefeldes durch die Möglichkeit, dass man auch auf die Beschriftung klicken kann. Um ein Label-Tag mit einem Feld zu verbinden gibt es das dazugehörige Attribut for der Wert sollte mit dem Attribut id des Feldes übereinstimmen.

<label for="username"> Username </label>
<input id="username" size="15" type="text" />


Es ist auch möglich innerhalb eines Label-Tags ein Eingabefeld zu erzeugen, was dazu führt dass das Label-Tag das for-Attribut nicht mehr benötigt, daher es das dazugehörige Eingabefeld umschließt.

<label>Kommentar
	<textarea cols="20" rows="2">Hier kommt Ihr Text!</textarea>
</label>

 Text-Eingabefelder

Hier erläutere ich kurz die oben benutzten Eingabefelder einmal.. (Im nächsten Tutorial wird das Input-Feld und seine Eigenschaften genauer erklärt.)
Es wurden zwei verschiedene Text-Eingabefelder benutzt, einmal ein einfaches Input-Feld mit dem Type=Text und eine Textarea.

Input Text:
Das meist benutzte Eingabefeld für Formulare ist das Input-Feld, dieses kann viele verschiedene Eingabefelder erzeugen wie Checkboxen,Radioboxen oder Text-Eingabefelder. Zu erst behandeln wir das Eingabefeld..
Um einem Input-Tag einen Typ zuweisen zu können, benutzt man das Attribut Type="" dessen Wert in unserem Fall nun "Text" erhält.

<input id="username" size="15" type="text" />

Wie oben erwähnt dient das Attribut id unter anderem zur zuweisung eines Labels. Ansonsten kann es aber auch für andere Zwecke verwendet werden wie für das Styling in einer CSS. Darauf folgt das Attribut type="text" welches aussagt das es sich um ein Textfeld handelt. Um dem Feld noch eine bestimmte länge zuweisen zu können wird size=”15″ benutzt was bedeutet, dass das Textfeld 15 Zeichen lang ist.

textarea: Um ein längeres Textfeld zu erstellen benutzt man das textarea-tag um die Größe des Feldes anzupassen benutzt man die Attribute cols und rows die für Spalten und Reihen stehen. In diesem Fall beträgt die Größe unseres Textfeldes 20 Spalten und 2 Reihen. Innerhalb des textarea-tags befindet sich Beispieltext den der User sieht um z.B. einen Tipp zu erhalten was er in dieses Feld eintragen könnte.

<textarea cols="20" rows="2">Hier kommt Ihr Text!</textarea>

Kommentare

  • author image
    Minni says:
    Hallo Leon! Ich spiele das Spiel leider nicht mehr aktiv, aber hast du bereits versucht Spieler übe...
  • author image
    Leon says:
    Ich habe eine Gilde erstellt aber ich muss noch 8 weitere Mitglieder haben damit die Gilde Officell ...
  • author image
    Minni says:
    Herzlichen Glückwunsch LittleItaly! Du hast einen random Steam-Key gewonnen ...

Random~Fun

Die ersten fünf Tage nach dem Wochenende sind die schlimmsten!