HTML-Formular

Formulare werden für viele verschiedene Zwecke benötigt. Beispielweise als Kontaktformular, als Eingabefeld für Suchanfragen und vieles Mehr.

Dabei sollten Sie eines im Auge haben (was für den reinen HTML-CSS-Mensch frustrierend ist) :

Die Struktur der Formulare wird in HTML gemacht
Das Design des Formulars wird über CSS gemacht
und die Funktion (und jetzt kommt der frustrierende Part) wird über eine Programmiersprache wie beispielsweise PHP, Pearl und Co gemacht

Wir machen im ersten Teil also erst einmal die Struktur des Formulars. Dazu gehört der Grundlegende Aufbau, den Absende-Button und die einzelnen Felder.

Grundlegende Struktur Formular:

Alle Elemente eines Formulars gehören zwischen folgende Elemente

<form name="umfrage" action="" method="get" enctype="text/html">
… und hier kommen alle Elemente des Formulars
</form>

Beim dem HTML-TAG <form> kommt das Attribut action – hier wird später die URL aufgeführt, an der die eingegebenen Informationen zu Weiterverarbeitung gesendet werden.

Bei dem Attribut method gibt es nur 2 mögliche Angaben: post und get – was diese bedeuten, wird erst bei Weiterverarbeitung deutlich – siehe hierzu http://www.php-kurs.com/formularauswertung-mit-php.htm

Senden-Button

Der Button zum Absenden wird in dem HTML-TAG <input mit dem Attribut type=“Submit“ erstellt. Dabei wird das im angegebenen Attribut value für die Beschriftung des Buttons verwendet, im folgenden Beispiel hat der Button die Beschriftung „jetzt senden“

<form name="umfrage" action="" method="get" enctype="text/html">
<input type="Submit" name="" value="jetzt senden" />
</form>

Eingabefelder Formular

Für Eingabeelemente gibt es den HTML-TAG <input …>

Beispiel:

<input type="text" name="nachname" id="nachname" value=""
   size="20" maxlength="50" />

Schauen wir uns im folgenden Schritt für Schritt die einzelnen Attribute an:

<input type="text" name="nachname" id="nachname" value=""
 size="20" maxlength="50" />

Bei diesem wird über das Attribut type die Art des Feldes bestimmt. Es gibt folgende Werte für das Attribut type

type="text"
type="radio"
type="submit"

<input type="text" name="nachname" id="nachname" value=""
 size="20" maxlength="50" />

Wir erstellen ein Eingabefeld für den Nachname. Um den Inhalt des Feldes später herausfinden zu können (meistens hat man mehrere verschiedene Felder und möchte wissen, was zu was gehört) wird über das Attribut name="nachname" der Bezug hergestellt. Als Werte dürfen hier alle Zeichen von a bis z und 0-9 kommen und „-„ „_“. Vermeiden Sie Umlaute und Leerzeichen.

<input type="text" name="nachname" id="nachname" value=""
 size="20" maxlength="50" />

Zum eindeutigen ansprechen des Elementes wird eine id vergeben. Der Wert der ID darf nur einmal pro Seite auftauchen – das ist so der Sinn von eindeutig. Gebraucht wird diese z.B. für die logische Verknüpfung zwischen Feldbeschriftung und Formularfeld (siehe dazu folgendes Kapitel)

<input type="text" name="nachname" id="nachname" value=""
 size="20" maxlength="50" />

Es kann ein Vorgabewert mitgegeben werden. Wenn Sie der Meinung sind, dass die meisten Menschen auf der Welt Meier heißen, können Sie das hier eintragen. Alle Menschen, die nicht Meier heißen, müssen die Vorgabe löschen und Ihren eigenen Namen eintragen. Das Feld wird wiederum sehr wichtig bei der Formularauswertung (siehe )

<input type="text" name="nachname" id="nachname" value="" 
size="20" maxlength="50" />

Das Attribut size gibt ab, wie viele Zeichen sichtbar sind.

<input type="text" name="nachname" id="nachname" value=""
 size="20" maxlength="50" />

Das Attribut maxlength gibt ab, wie viele Zeichen maximal in diesem Feld eingetragen werden dürfen. Im Beispiel mit 50 ist nach 50 Zeichen Schluss. Hat jemand einen längeren Nachnamen als 50 Zeichen, hat er in diesem Fall Pech gehabt.

div und span Formularfeld-Beschriftung

HTML5-Video-Kurs:
hier klicken für
mehr Informationen

weitere eigene Projekte:

Programmiersprachen

Bildbearbeitung & Fotografieren

MS Office Kurs / Ernährung