Programmierung eines HTML Formulars

Ein HTML Formular zu erstellen, ist vergleichsweise einfach. Es besteht im Wesentlichen aus folgenden Bestandteilen: Die Sammlung aller Buttons und Felder, die der User (hoffentlich) ausfüllt sowie das Skript, das diese Informationen verarbeitet und auswertet.

Es gibt zwei Methoden, „post“ oder „get“, mit denen das Formular arbeiten kann. Empfehlenswert ist in der Regel „post“, da mehr Daten an den Server gesendet werden und die Eingaben nicht im URL sichtbar sind.

Um ein Formular zu erstellen, tippen Sie in das HTML Grundgerüst demnach <form method=“post“ ein. Danach folgt die Eingabe action=“script.url“>. Script.url ist der Ort auf dem Server, an dem sich das Skript befindet, das bei der Übermittlung des Formblatts gestartet wird. Anschließend werden die Inhalte des Formulars erstellt. Mit </form> wird es schließlich abgeschlossen.

Textboxen und Passwortfelder erstellen im HTML Formular

Zu den Inhalten eines Formulars gehören Textboxen. Sie können eine freie Zeile enthalten, in der der User etwas eingeben kann. In der Regel werden sie für Namen, Adressen usw. verwendet.

Um eine Textbox zu erstellen, tippen Sie <input type=“text“ ein. Da stets das name- Attribut gesetzt werden muss, geben Sie anschließend beispielsweise name=“last_name“ ein, wobei last_name der Text ist, der die eingetragenen Daten für den Server identifiziert.

Das value-Attribut ist nur notwendig, wenn Standardwerte erwünscht sind. Geben Sie in dem Fall value=“standard“ ein. Bei standard handelt es sich um die Daten, die anfänglich im Feld dargestellt sind und an den Server übermittelt werden, wenn der Nutzer nichts anderes einträgt. Wenn Sie es möchten, können Sie zusätzlich required=“required“ eintippen, damit das Feld nicht leer bleibt und der User etwas eintragen muss. Ebenfalls auf Wunsch können Sie die Größe der Textbox bestimmen, indem Sie size=“n“ eingeben und das n mit der Anzahl der möglichen Zeichen ersetzen. Mit dem Attribut maxlength=“n“ können Sie eine Maximalanzahl an Zeichen festsetzen. Schließen Sie die Textbox mit /> ab.

In einem Passwortfeld wird das eingetippte Passwort durch Punkte oder Sternchen verborgen. Ansonsten unterscheidet es sich nicht von einer Textbox. Um es zu erstellen, geben Sie <input type=“password“ ein.

Radio-Buttons erzeugen

Radio-Buttons dienen dazu, den User eine Auswahl treffen zu lassen, da jeweils nur ein Knopf gedrückt werden kann. Geben Sie für dieses Formular-Element zunächst einen erläuternden Text ein, beispielsweise „Wählen Sie aus“. Tippen Sie anschließend <input type=“radio“. Mit id=“id“ identifizieren Sie schließlich den Radio-Button eindeutig. Nun können Sie value=“wert“ eingeben, wobei wert der Text ist, der an den Server übermittelt wird, wenn der Radio-Button aktiviert ist. Würde dieses Attribut nicht gesetzt, würde das Wort „on“ an das Skript gesendet. Da man nicht erkennen kann, welcher Button gedrückt wurde, wäre dies nicht sehr sinnvoll. Geschlossen wird die Erstellung eines Radio-Buttons wieder mit />.

Absenden-Buttons programmieren

Ein Formular ist natürlich nutzlos, wenn die eingetragenen Daten nicht abgeschickt werden können. Einen Senden-Button zu erstellen, ist jedoch sehr einfach. Dafür brauchen Sie nur <input type=“submit“ einzugeben. Tippen Sie anschließend value=“Abschicken“ ein, wobei Abschicken der Text ist, der auf dem Button steht. Schließen Sie das Feld mit /> ab.

Je nachdem, wie umfangreich das HTML Formular werden soll, kann es beispielsweise noch mit Checkboxen und Auswahllisten ergänzt werden oder es den Nutzern erlauben, Dateien hochzuladen.

Einfaches Beispiel für ein HTML Formular:

<!DOCTYPE html>

<html lang=“de“>

<meta charset=“utf-8″ />

<html>

<head>

<title>Formular</title>

</head>

<link rel=“stylesheet“ type=“text/css“ href=“Formatierung.css“>

<h1>Konto</h1>

<body>

<p></p>

<form name=“Eingabe“ action=“check.php“ method=“post“>

</br>

Wählen Sie aus:

<input type=“radio“ name=“radioset“ id=“gender_male“ name=“gender_male“>Männlich

<input type=“radio“ name=“radioset“ id=“gender_female“ name=“gender_female“>Weiblich</br></br>

<label for=“last_name“>

Name: </label><input type=“text“ name=“last_name“ size=“20″ maxlenght=“40″ required=“required“></br></br>

<label for=“mail“>

Email: </label><input type=“email“ name=“Email“ size=“20″ maxlenght=“40″ required=“required“></br></br>

<label for=“password“> Passwort: </label><input type=“password“ name=“pass“ required=“required“ size=“20″ maxlenght=“20″></br></br>

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

</br>

</form>

</body>

</html>

Mit CSS können Sie das HTML Formular nach Ihren Wünschen formatieren und zum Beispiel dafür sorgen, dass die Textboxen in einer Linie untereinander ausgerichtet sind.

CSS-Code:

label {

display: block;

padding: 3px, 6px;

color: #0A3485;

width: 150px;

vertical-align: top;