Formulare in HTML 5

09.11.2016 11:30 Uhr

Im Rahmen des Seminars ist bisher eine statische Website entstanden, die zwar Informationen anbietet, aber keine wirkliche Interaktion zulässt. Die einfachste Möglichkeit, Interaktivität zu schaffen, ist der Einsatz von Formularen.


Aufbau eines Formulars

Ähnlich wie bei Tabellen gibt es auch für Formulare ein Hauptelement (<form>). In diesem Element wird das grundsätzliche Verhalten des Formulars definiert. Außerdem dient es als eine Art Container für verschiedene Typen von Eingabefeldern wie Radiobuttons oder Checkboxen, aber auch Pulldown-Menüs und normale Eingabefelder für Text. Innerhalb eines <form> Elements dürfen allerdings auch die meisten anderen HTML-Elemente vorkommen. In dem action=""Attribut wird das Ziel definiert, an das die in das Formular eingegebenen Daten versendet werden sollen. Meistens ist das ein Script (PHP, Perl), welches die Formulardaten direkt auswerten kann.


Das Element <form>

<form
action="http://lehre.hki.uni-koeln.de/wieland/formBack.php"
method="get"
accept-charset="UTF-8">
...
</form>

Das Element <form> beinhaltet weitere Elemente, die die eigentlichen Eingabefelder und -methoden definieren. Alles was innerhalb des Elements steht gehört zu einem Formular.
Elementare Attribute von <form> sind action, method und accept-charset.

action deklariert die Server-Adresse, an die die eingegebenen Inhalte des Formulars gesendet werden sollen.


method deklariert die Methode, mit der die eingegebenen Inhalte des Formulars an den empfangenden Server gesendet werden sollen.

get

Vorteil: Kommunikation kann in der Adressleiste des Browsers beobachtet werden.
Nachteil: Kommunikation kann in der Adressleiste des Browsers beobachtet werden.

post

Vorteil: Eine größere Datenmenge kann versendet werden.
Nachteil: Kommunikation kann nicht in der Adressleiste des Browsers beobachtet werden.


accept-charset deklariert das Text-Encoding. Wie immer: UTF-8 ist zu bevorzugen.

Eingabe-Elemente

Einzeilige Eingabebereiche

<input
     name="nachname"
     id="nachname"
     type="text"
     maxlength="50"
     value="hier Nachnamen eingeben">

Ergebnis

input

name deklariert, mit welchem Bezeichner der eingegebene Wert an den Server übertragen wird.
Beispiel: Bezeichner: nachname; Wert: Kurz


id

Wie bekannt. Kann den selben Wert wie name haben, darf auf einer Seite aber nur einmal vorkommen!


 type deklariert, welcher Art der eingegebene Inhalt ist. Der Wert „password“ beispielsweise würde den eingegebenen Text durch **** anzeigen.
Eine gute Übersicht über in HTML5 erlaubte Werte finden Sie bei w3schools.
AchtungNicht alle Browser unterstützen bereits alle neuen Types. Chrome und Opera bieten derzeit die breiteste Unterstützung für HTML5-Formulare.


max
length

deklariert die maximal erlaubte Zeichenzahl. Verwendung ist optional.


value

deklariert den Vorgabewert. Verwendung ist optional.


Label für Eingabebereiche

<form>
<label for="vorname"> Vorname: </label>
<input
name="vorname"
id="vorname"
type="text">         
</form>

Ergebnis

label

Das Element <label> beschreibt die Beschriftung der Eingabefelder. Das Attribut for enthält die ID (nicht den name) desjenigen Eingabefeldes, auf das sich label bezieht.

Hinweis

form-Elemente sind inline-Elemente. D.h. sie verursachen keinen Zeilenumbruch. Eine legitime Möglichkeit einen Zeilenumbruch zu erzeugen ist hier: <br>. Eleganter ist es aber, den entsprechenden Elementen in CSS die Eigenschaft display:block; zu geben.


Mehrzeilige Eingabebereiche

<form>
<textarea
name="nachricht"
id="nachricht"
rows="10"
cols="50"
required>
Hier kann ein langer Text eingegeben werden.
</textarea>
</form>

Ergebnis

rows deklariert die Höhe des Textfeldes in Zeilen.


cols deklariert die Breite des Textfeldes in Zeichen.


required ein alleinstehendes Attribut. Wenn es gesetzt ist, muss das Feld vor dem Absenden ausgefüllt sein.

Radio-Buttons

<form>
<input
type="radio"
id="anredeHerr"
name="anrede"
value="M">
<label for="anredeHerr">Herr</label>

<input
type="radio"
id="anredeFrau"
name="anrede"
value="F">
<label for="anredeFrau">Frau</label>
</form>

Ergebnis

radio

Hinweise 

Während die id definitionsgemäß unterschiedlich sein muss, muss name für die verschiedenen Auswahlmöglichkeiten identisch sein. name definiert wieder den Bezeichner, value definiert den Wert für diesen Bezeichner, der an den empfangenden Server übergeben wird.


Auswahllisten

<form>
<label for="farbe">Was ist Ihre Lieblingsfarbe?</label>
<br>
<select id="farbe" name="farbe" required>
<option value="">bitte auswählen</option>
<option value="ff0000">rot</option>
<option value="00ff00">grün</option>
<option value="0000ff">blau</option>
/select>
</form>

Ergebnis

select


Checkboxen

<form>
<label>Kreuzen Sie alle Haustiere an</label>
<br>

<input
type="checkbox"
id="haustier1"
name="haustier"
value="zebra"
checked>
<label for="haustier1">Zebra</label>

<input
type="checkbox"
id="haustier2"
name="haustier"
value="hund">
<label for="haustier2">Hund</label>

<input
type="checkbox"
id="haustier3"
name="haustier"
value="katze">
<label for="haustier3">Katze</label>

<input
type="checkbox"
id="haustier4"
name="haustier"
value="maus">
<label for="haustier4">Maus</label>
</form>

Ergebnis

check

Hinweise

Während die id definitionsgemäß unterschiedlich sein muss, muss name für die verschiedenen Auswahlmöglichkeiten identisch sein. name definiert wieder den Bezeichner, value definiert den Wert für diesen Bezeichner, der an den empfangenden Server übergeben wird. An den empfangenden Server werden mehrere, einer oder kein Wert für den Bezeichner (hier: haustier) übergeben.


Der Submit-Button

Ein Formular will nicht nur ausgefüllt werden – die Inhalten würden dann ja nur in Ihrem Browser stehen und nirgends ankommen – es soll auch abgeschickt werden können:

<form
action="about:blank"
method="get"
accept-charset="UTF-8">

<label for="einText">Geben Sie irgendeinen Text ein:</label>
<input
id="einText"
name="einText"
type="text">
<input type="submit" value="absenden">
</form>

Ergebnis

submit

Durch Auslösen des Submit-Buttons werden alle im Formular ausgefüllten bzw. ausgewählten Werte (bzw. values) mit deren jeweiligen Bezeichner an den im form-tag deklarierten empfangenden Server gesendet.


Schaltflächen – allgemein

Schaltflächen bzw. Button können zur Auslösung einer Aktion jedweder Art genutzt werden:

<input type ="button" value="Los" onclick="los();">

Ergebnis

schaltflaeche_1

<input height="100" src="button.html" type="image" width="200">

Ergebnis

schaltflaeche_2

Mit dem Tag  <button> ist es ebenfalls möglich einen individuell gestaltbaren Button zu definieren:

<button><img src="tutButton.png" alt="Button" ></button>


vorherige Folie / nächste Folie

Schlagwörter: