Ein einzeiliges Formularfeld ist eines der einfachsten und gleichzeitig wichtigsten Elemente in HTML-Formularen. Es wird verwendet, um Benutzer dazu zu bringen, kurze Texte wie Namen, Adressen oder andere persönliche Informationen einzugeben.

Diese Felder werden mit dem HTML-Tag <input> erstellt. Wichtig ist, dass der Typ des Feldes „text“ ist, was durch type="text" festgelegt wird. Ein Formular mit einem Eingabefeld des Typs „text“ sieht so aus:

<form>
  <input type="text">
</form>

Standardtyp ist immer „text“

Wenn du den Typ eines Eingabefeldes nicht angibst, wird automatisch type="text" verwendet. Das bedeutet, dass der folgende HTML-Code genau gleich funktioniert wie der oben genannte:

<form>
  <input>
</form>

In beiden Fällen wird ein einzeiliges Textfeld erstellt.

Wozu werden Textfelder in Formularen verwendet?

Einzeilige Textfelder kommen überall dort zum Einsatz, wo Benutzer kurze Texte eingeben sollen. Sie sind breit gefächert einsetzbar:

1. Name eingeben
   Formulare benötigen häufig ein Feld, damit der Benutzer seinen Namen eintragen kann. So könnte das aussehen:

<form>
  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname">
</form>

Der Benutzer kann hier seinen Vornamen eintragen. Da die Länge von Namen sehr unterschiedlich sein kann, ist es sinnvoll, das Feld breit genug zu gestalten – hierzu kommen wir gleich im nächsten Abschnitt.

2. Adresse oder andere Daten
   Ein weiteres Beispiel könnte die Eingabe einer Adresse im Formular sein. Auch hier genügt ein einzeiliges Textfeld:

<form>
  <label for="adresse">Adresse:</label>
  <input type="text" id="adresse">
</form>

Der Benutzer trägt hier z. B. eine Straße oder andere Informationen ein.

3. Weitere allgemeine Daten
   Ein einzeiliges Feld kann für jegliche kurze Information im Formular verwendet werden, beispielsweise eine Beschwerde- oder Feedbackmeldung. So könnte ein einfaches Feedbackfeld aussehen:

<form>
  <label for="bemerkung">Bemerkung:</label>
  <input type="text" id="bemerkung">
</form>

Für einfache, kurze Eingaben wie eine Feedback-Zeile oder ähnliche Kommentare ist `type="text"` hervorragend geeignet.

Das Attribut size

Manchmal reicht die Standardbreite eines Textfeldes nicht aus, wenn der Platz für längere Texte sichtbar sein soll. In solchen Fällen kannst du mit dem Attribut „size“ die Breite festlegen. Allerdings nicht in Pixeln, sondern als Anzahl der sichtbaren Zeichen. Dabei handelt es sich um eine relative Angabe, die von der voreingestellten Schriftgröße im Browser abhängt.

Breitere Textfelder

Das size-Attribut legt also die Anzahl der Zeichen („Character“) fest, die im Textfeld sichtbar sein sollen. Hier ein Beispiel:

<form>
  <label for="beschreibung">Beschreibung:</label>
  <input type="text" id="beschreibung" size="30">
</form>

In diesem Fall wird das Textfeld breiter dargestellt, sodass der Benutzer bis zu 30 Zeichen gleichzeitig sehen kann, ohne scrollen zu müssen. Das erleichtert das Schreiben und Korrigieren von längeren Eingaben.

Unterschiedliche Größen im Vergleich

Hier ein Beispiel mit verschieden großen Textfeldern:

<form>
  <label for="kurz">Kurzer Text:</label>
  <input type="text" id="kurz" size="10">
  
  <label for="mittel">Mittlerer Text:</label>
  <input type="text" id="mittel" size="20">
  
  <label for="lang">Langer Text:</label>
  <input type="text" id="lang" size="50">
</form>

Die Angabe von size passt nur die sichtbare Breite an, nicht die tatsächliche Menge an Text, die das Feld annehmen kann.

Das Attribut size kann auch für kommende INPUT-Typen verwendet werden, die wir in den nächsten Lektionen behandeln und eine Texteingabe vorgenommen werden kann.