HTML Textfeld mit input erstellen

Das klassische Formularfeld

Der input-Tag in HTML bietet die Möglichkeit, Formularfelder in einer Webseite einzubauen, damit das Formular überhaupt bestückt und verwendet werden kann. Zwar kann man ein Formular auch nur mit select-Auswahllisten gestalten, aber das ist nur selten sinnvoll. Input lässt auch Radiobutton und Checkboxen zu, meist braucht es aber eine Texteingabe.

Der klassische Fall des input-Tags ist das Textfeld, damit man seine Daten wie Name, Adresse oder manchmal auch eine Telefonnummer eintragen kann.

Textfeld in einem HTML-Formular

ergibt

Vorname:

Nachname:

Mit diesem simplen input-Befehl ist also ein Formularfeld herstellbar. Es braucht dazu zwei Pflichtangaben, nämlich den Typ, der auf Text eingestellt werden muss und den Namen des Feldes, damit man später die Eingabe überprüfen kann oder einfach per E-Mail weiterschicken kann.

Eine optionale Angabe ist die Größe des Feldes, die in Wirklichkeit die Länge festlegt, in diesem Fall setzt der Wert 20 das Feld auf eine Länge von 20 Zeichen fest. Es gibt aber weitere Mögilchkeiten der Konfiguration eines Textfeldes, nämlich den value, das ist der Wert des Feldes, der mittels PHP bei dynamischen Webseiten einen übermittelten Wert liefern kann oder einfach ein Text als Vorgabe.

Und mit dem Parameter maxlength kann man festlegen, wie viele Zeichen eingegeben werden können. So ist es möglich, ein Textfeld auf 20 Zeichen zu begrenzen, aber man kann 40 Zeichen eingeben, wobei der eingegebene Text weitergescrollt wird.

Verbesserungen mit CSS möglich

Allerdings gilt auch für die Formularfelder, dass man sie per CSS verbessern kann. Das gilt gerade beim Textfeld mit einer möglichen Hintergrundfarbe oder mit einer anderen Schriftart, um auf sich aufmerksam zu machen. Der Abstand zu den anderen Felder kann ebenfalls ein Thema sein und ist mit CSS leicht zu bewerkstelligen.

Lesen Sie auch

Die Formulare sind überraschend wichtige Elemente auf der Webseite, denn jede größere Plattform hat auch eine Suchmaschine und damit auch ein Eingabefeld - ergo ein Formular für diesen Zweck. Es gibt aber unterschiedliche Methoden, was und wie man für das Formular braucht. Typisch sind das Textfeld, das versteckte Textfeld für Bearbeitungen wie der aktuellen Artikelnummer und ein großes mehrzeiliges Feld für Fragen und Kommentare. Außerdem braucht es das form-Tag als generelles Element für Formulare und die Schaltfläche zum Abschicken.

Weitere Möglichkeiten bestehen mit Auswahlfeldern. Das kann die Checkbox sein, um eine Antwortoption zu aktivieren, die Radiobuttons für ja/nein-Situationen oder auch die Auswahlliste, wenn mehrere Antworten vorgeschlagen werden.

Bei den Formularen gibt es noch weitere Möglichkeiten, die sehr wichtig sein können. Eine Variante ist die Beschreibung durch den label-Tag, wodurch auch die Formatierung besser gelingt und eine weitere kann sein, dass man schreibgeschützte Felder einsetzt.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel