Formulare

Formularelement

Formulare sind der Schlüssel, um Interaktion zwischen dem User und der Website zu ermöglichen. Formulare ermöglichen dem User Daten einzugeben und diese durch die Website verarbeiten zu lassen.

Zum Anfang sollte sich immer überlegt werden, wie ein Formular für den User aussehen soll, damit alle wichtigen Daten abgefragt werden. Der User soll nicht die Lust an der Seite verlieren, weil er ein undurchsichtiges und kompliziertes Formular ausfüllen muss. Es ist immer eine gute Idee, sich ein Formular vorher aufzumalen. Dadurch können alle benötigten Elemente erfasst werden.

Die Verarbeitung der Daten in einem Formular läuft immer auf dem Server ab. Auf dem Server können die Daten verarbeitet werden, ohne das der User weiteren Einfluss nehmen kann. Die Sicherheit für die Verarbeitung der Daten wird größer. Im Browser können Überprüfungen vorgenommen werden wie zum Beispiel, ob es sich um eine korrekte E-Mail-Adresse handelt oder ob einzelne Felder ausgefüllt sind.

Das Formular-Element besteht immer aus dem <form> und dem </form> und ist der Container für die Formular-Elemente. Zusätzlich besitzt es die folgenden Attribute: action und method.

1<form>
2
3</form>

Wichtig

Für ein Formular wird immer nur ein <form></form>-Element benötigt!

action

Mittels dem action-Attributs wird angegeben, an welche Seite die Daten gesendet werden sollen, um diese zu verarbeiteten.

1<!-- eigener Server -->
2<form action="/daten.php">
3
4</form>
5
6<!-- externer Server -->
7<form action="https://externer-server.de/daten.php">
8
9</form>

Warnung

Alle Daten, die verschickt werden sollen, stehen innerhalb eines <form></form> Elementes. Es werden nicht mehrere form-Elemente für ein Formular verwendet.

method

Mittels dem method-Attribut wird angegeben, wie Daten gesendet werden sollen. Die Werte für das Attribut sind: get und post. Bei get werden die Daten an die URL angehängt und sind sichtbar für den User. Bei post werden die Daten unsichtbar für den User verschickt.

1<form action="/daten.php" method="get">
2
3</form>
4
5<form action="/daten.php" method="post">
6
7</form>

Wichtig

Alle Elemente, die mit einem Formular gesendet werden sollen, gehören in ein öffnendes und schließendes <form></form>.

label

Das <label>-Element definiert einen Bezeichner für viele Formular-Elemente. Das for-Attribut gibt an, für welches input-Element, dass label gehört. Dert Wert des for-Elementes, sollte immer gleich dem Wert, des id-Attribut des input-Elementes sein.

1<form action="/daten.php" method="post">
2  <label for="nachname">Nachname</label>
3  <input type="text" name="nachname" id="nachname">
4</form>

input

Das <input>-Element ist eines der meistverwendeten Elemente in einem Formular und zugleich auch eines der mächtigsten. input erzeugt Eingabefelder, Schaltflächen, Checkboxen, Radiobuttons und viele mehr in einem Formular. Funktion und Aussehen des input-Tags werden durch das Attribut type gesteuert. input ist ein selbstschließendes Element und hat kein schließendes Tag. Der grundlegende Aufbau eines input-Elements ist:

1<form action="/daten.php" method="post">
2  <input type="text" name="email-name" id="email-name">
3</form>

Ein input-Element besitzt zwei Attribute: name und id.

name definiert den Namen des input-Elementes und muss nicht einzigartig sein - darf mit anderen input-Elementen wiederverwendet werden. Wenn das Formular abgesendet und auf einem Server verarbeitet wird, kann über das name-Attribut auf die in das input-Element eingegeben Daten zugegriffen werden.

Die id definiert eine eindeutige ID, über das das Element auch angesprochen werden kann und stellt mittels dem for-Attribut des label-Elementes eine Verbindung her.

Input ist ein selbstschließendes-Element ohne / (Slash) am Ende.

text

<input type="text"> definiert ein einzeiliges Texteingabefeld für zum Beispiel Vornamen, Nachnamen, für kurze Texte.

1<form action="/daten.php" method="post">
2  <label for="nachname">Nachname</label>
3  <input type="text" name="nachname" id="nachname">
4</form>

See the Pen Form Input text by Html Website (@html_website) on CodePen.

radio

<input type="radio"> definiert runde Auswahlfelder. Es kann immer nur ein Auswahlfeld ausgewählt werden. Bei radio muss das name-Attribut bei allen input-Elementen gleich sein. Zusätzlich besitz radio noch das Attribut value. Value beinhaltet den Wert des ausgewählten Elemente. Dieser kann später weiterverarbeitet werden.

 1<form action="/daten.php" method="post">
 2  <label for="ironman">Ironman</label>
 3  <input type="radio" name="avenger" id="ironman" value="ironman">
 4
 5  <label for="captainamerica">Captain America</label>
 6  <input type="radio" name="avenger" id="captainamerica" value="captainamerica">
 7
 8  <label for="hulk">Hulk</label>
 9  <input type="radio" name="avenger" id="hulk" value="hulk">
10</form>

See the Pen Form Input radio by Html Website (@html_website) on CodePen.

checkbox

<input type="checkbox"> definiert eckige Auswahlfelder. Es können mehrere Auswahlfelder ausgewählt werden. Bei checkbox muss das name-Attribut bei allen input-Elementen gleich sein. Zusätzlich besitz checkbox noch das Attribut value. Value beinhaltet den Wert der oder des ausgewählten Elemente/s. Dieses kann später weiterverarbeitet werden.

 1<form action="/daten.php" method="post">
 2  <label for="ironman">Ironman</label>
 3  <input type="checkbox" name="avenger" id="ironman" value="ironman">
 4
 5  <label for="captainamerica">Captain America</label>
 6  <input type="checkbox" name="avenger" id="captainamerica" value="captainamerica">
 7
 8  <label for="hulk">Hulk</label>
 9  <input type="checkbox" name="avenger" id="hulk" value="hulk">
10</form>

See the Pen Form input checkbox by Html Website (@html_website) on CodePen.

Wichtig

Damit mehrere Ausgewählte Informationen an eine Server übertragen werden können, muss an das name-Attribut jeder Checkbox ein [] gehängt werden.
Beispiel für Hulk:
<input type=“checkbox“ name=“avenger[]“ id=“hulk“ value=“hulk“>

submit

<input type="submit"> erstellt einen Button auf der Website, mit dem die eingegeben Daten an die in dem Attribut action URL gesendet werden. Submit hat ein value-Attribut. Dessen Wert erscheint als Beschriftung auf dem Button.

 1<form action="/daten.php" method="post">
 2  <label for="vorname">Vorname</label>
 3  <input type="text" name="vorname" id="vorname">
 4
 5  <label for="nachname">Nachname</label>
 6  <input type="text" name="nachname" id="nachname">
 7
 8  <input type="submit" value="senden">
 9
10</form>

See the Pen Form input submit by Html Website (@html_website) on CodePen.

reset

<input type="reset"> löscht alle gemachten Eingaben in allen Formularfeldern. Das Attribut value kann auch gesetzt werden als Button-Beschriftung. Sonst wird eine Standardbezeichnung gewählt.

 1<form action="/daten.php" method="post">
 2  <label for="vorname">Vorname</label>
 3  <input type="text" name="vorname" id="vorname">
 4
 5  <label for="nachname">Nachname</label>
 6  <input type="text" name="nachname" id="nachname">
 7
 8  <input type="submit" value="senden">
 9  <input type="reset" value="löschen">
10
11</form>

See the Pen form input reset by Html Website (@html_website) on CodePen.

password

<input type="password"> definiert ein Password-Eingabefeld für zum Beispiel Login-Seiten. Passwörter werden nicht angezeigt, sondern durch Punkte unkenntlich gemacht.

Warnung

password bietet keinen Schutz für das Password. Es wird in dem Formularfeld nur unkenntlich gemacht.

 1<form action="/daten.php" method="post">
 2  <label for="benutzer">Benutzer</label>
 3  <input type="text" name="benutzer" id="benutzer">
 4
 5  <label for="password">Password</label>
 6  <input type="password" name="password" id="password">
 7
 8  <input type="submit" value="senden">
 9  <input type="reset" value="löschen">
10
11</form>

See the Pen form input password by Html Website (@html_website) on CodePen.

select

Das HTML select-Element erzeugt eine Drop-Down-Liste in einem Formular. Per Vorgabe erzeugt select ein Fenster mit ausklappenden Optionen. Ein Select spart Platz im Formular und zeigt erst bei einem Klick die Liste der Optionen an und beschränkt die Anwahl auf die angebotenen Begriffe.

Das Select-Element besteht immer aus dem Select selber und mehreren Option-Elementen innerhalb des Select.

Mittels dem Attribut value="" bei den Option-Elementen, kann ein Wert beim Absenden des Formulars gesendet werden.

 1<form action="/daten.php" method="post">
 2  <label for="marvel-helden">Lieblings Marvel Held?</label>
 3
 4  <select name="marvel-helden" id="marvel-helden">
 5    <option value="ironman">Ironman</option>
 6    <option value="captain-america">Captain America</option>
 7    <option value="thor">Thor</option>
 8    <option value="hulk">Hulk</option>
 9    <option value="black-widow">Black Widow</option>
10  </select>
11
12</form>

Mittels dem Select-Attribut multiple="multipel" können auch mehrere Werte ausgewählt werden. Dazu muss die Strg-Taste beim Klicken gedrückt werden.

Hinweis

Durch das Attribut size kann bestimmt werden, wie viele Elemente sichtbar sein sollen.

 1<form action="/daten.php" method="post">
 2  <label for="marvel-helden">Lieblings Marvel Held?</label>
 3
 4  <select name="marvel-helden" id="marvel-helden" multiple="multiple" size="3">
 5    <option value="ironman">Ironman</option>
 6    <option value="captain-america">Captain America</option>
 7    <option value="thor">Thor</option>
 8    <option value="hulk">Hulk</option>
 9    <option value="black-widow">Black Widow</option>
10  </select>
11
12</form>

Wichtig

Damit mehrere Ausgewählte Informationen an eine Server übertragen werden können, muss an das name-Attribut von Select ein [] gehängt werden.
Beispiel für marvel-helden:
<select name=“marvel-helden[]“ id=“marvel-helden“ multiple=“multiple“ size=“3“>

See the Pen form select by Html Website (@html_website) on CodePen.

textarea

<textarea> ist ein Multiline Eingabefeld. textarea wird häufig in Formularen als Nachrichten-Eingabefeld verwendet. textarea besitzt die folgend vier Attribute - name, id, cols, rows. textarea besitzt ein öffnendes Tag und ein schließendes Tag.

Mittels cols und rows kann die Größe des Eingabefeldes definiert werden.

 1<form action="/daten.php" method="post">
 2  <label for="benutzer">Benutzer</label>
 3  <input type="text" name="benutzer" id="benutzer">
 4
 5  <label for="password">Password</label>
 6  <input type="password" name="password" id="password">
 7
 8  <label for="nachricht">Nachricht</label>
 9  <textarea name="nachricht" id="nachricht" cols="50" rows="6"></textarea>
10
11  <input type="submit" value="senden">
12  <input type="reset" value="löschen">
13
14</form>

See the Pen form textarea by Html Website (@html_website) on CodePen.