Interaktive Elemente

Einzeilige Eingabebereiche

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

Ergebnis

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.
Achtung: Nicht 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

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

Ergebnis

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

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

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

<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>

Ergebnis

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

<label for="farbe">Was ist Ihre Lieblingsfarbe?</label>
<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>

Ergebnis

Checkboxen

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

<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>

Ergebnis

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.

Pflichtangaben

<label for="bname">Benutzername</label> 
<input id="bname" size="30" maxlength="30" required>
 
<label for="passwd">Passwort</label>  
<input type="password" id="passwd" size="30" maxlength="40" required>

Durch die Angabe von required kann der Benutzer zum Ausfüllen bestimmter Felder gezwungen werden. Sollte versucht werden, das Formular vorzeitig zu versenden, wird das entsprechende Formularfeld durch eine browserinterne Fehlermeldung hervorgehoben.

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

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

Ergebnis

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

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

Achtung: Wie beim Input-Element ist auch bei einem Button "submit" der Default-Wert, wenn er innerhalb eines Form-Elementes genutzt wird. Das heißt, die Werte des Formulares werden abgesendet und die Seite wird neu geladen. Durch den Type "button" kann dem entgegengewirkt werden. Dieser Type bewirkt, dass clientseitige Funktionalitäten (wie zb Funktionsaufrufe einer Javascript-Datei) aufgerufen werden, ohne die Seite dabei neu zu laden.