Die Webseite soll nun mit einem Formular verschönert werden. Dieser Artikel stellt die ersten Formularelemente vor…

Formulare für die Webseite:

Mit dem form-Element werden im HTML Quelltext Formulare erstellt. Da HTML Formulare für Benutzereingaben so dringend gebraucht werden, macht es Sinn sich den Aufbau solcher Formulare genauer anzusehen.

Der Grundaufbau sieht so aus:

<form action=”Datei oder Pfad” method=”post”>

Vorname: [Einzeiliges Eingabefeld]

<br />

<input type=”text” name=”vorname” size=”30″ maxlength=”30″>

<input type=”submit” value=”Absenden”>

<input type=”reset” value=”Reset”>

<br /><br />

</form>

Noch grundsätzlicher schaut die Sache so aus:

<form>

Formular-Elemente (und Beschriftung)

</form>

Das form-Element wird also geöffnet und bekommt noch einige Zusatzangaben mit auf den Weg (die hier teilweise noch fehlen). Innerhalb des form-Elementes werden dann die Beschriftungen und die einzelnen Formular-Elemente eingebaut.

Wenn alle Formular-Elemente verbaut sind wird das form-Element wieder geschlossen.

Der Grundaufbau ist also identisch zu allen anderen HTML-Elementen. Die Kunst der Formulargestaltung ist die optimale Anordnung der Formularelemente und von denen gibt es ganz schön viele…

Eingabefelder und Textarea:

Das einfachste Formularelement ist das Eingabefeld. Es gibt zwei Varianten davon. Einmal ein leeres Eingabefeld und eines mit Textvorbelegung.

<form action=”Dateipfad” method=”post” accept-charset=”utf-8″>

Vorname: [Einzeiliges Eingabefeld]

<br />

<input type=”text” name=”vorname1″ size=”30″ maxlength=”30″>

<br /><br />

Vorname: [Einzeiliges Eingabefeld mit Textvorbelegung]

<br />

<input type=”text” name=”vorname2″ size=”30″ maxlength=”30″ value=”Wert”>

</form>

Dann gibt es noch ein Eingabefeld für Passwörter.

<form action=”Dateipfad” method=”post” accept-charset=”utf-8″>

Passwort: [Eingabefeld für Passwörter]

<br />

<input type=”password” name=”passwort” size=”12″ maxlength=”12″>

</form>

Auch bei der Textarea, den Textfeldern gibt es verschiedene Varianten.

Der Aufbau bleibt aber wie erwähnt:

<form>

<textarea name=”user_eingabe” cols=”50″ rows=”10″></textarea>

<textarea name=”user_eingabe” cols=”50″ rows=”10″>Textvorbelegung</textarea>

<textarea name=”user_eingabe” cols=”50″ rows=”10″ readonly>Textausgabe</textarea>

</form>

Noch mehr Formularelemente gibt es im nächsten Artikel…