Formulare in HTML

Hier werden kurz einige Aspekte von Formularen in HTML rekapituliert.

Formulare

Ein Formular ist ein Element, das Eingabefelder enthalten kann.

Start-Tag eines Formular

<form action="http://x.invalid/" method="get">

Das Attribut »action« muß in HTML 4.01 vorhanden sein und eine HTTP -URI enthalten. Gewisse Eingaben werden dann beim Einreichen des Formulars an diese URI geschickt. In HTML 5.2 darf jenes Feld aber entfallen.

Die Angabe einer Sendemethode mit dem Attribut »method« kann entfallen, »get« ist der Fehlwert.

Alle Elemente mit den nun im folgenden genannten Typen sind normalerweise in form-Elementen enthalten.

Texteingabefelder

Ein Texteingabefeld ist ein input-Element mit dem type-Attribut »text«.

Text Field

<input type="text" name="name" value="preset text value" disabled="disabled" />

Nur Eingabefelder mit einem name-Attribute werden an die HTTP -URI geschickt. Wenn es keine solche HTTP -URI gibt, ist dieses Attribute also entbehrlich (sowohl in HTML 4.01 als auch in HTML 5.2 kann es entfallen).

Das Attribut »value« enthält den Anfangstext des Textfeldes und kann entfallen.

Falls das Attribut »disabled« angegeben ist, so sind keine Benutzereingaben in das Textfeld erlaubt.

Textausgabefelder

Ein Textausgabefeld (HTML 5.2 ) kann mit dem for-Attribut den id-Attributen der Eingabefelder zugeordnet werden, von denen es abhängt, was aber nicht unbedingt nötig ist.

Output

<output id="output" for="a b" />

Tastfläche

Eine Tastfläche kann bei Betätigung ein Ereignis auslösen, auf das mit einem Skript reagiert werden kann.

Button

<button type="button">Run</button>

Da verschiedene Browser verschiedene Fehlwerte verwenden, wenn das type-Attribut des button-Elements fehlt, sollte dieses type-Attribut stets angegeben werden!

button-Elemente können auch außerhalb von Formularen verwendet werden.
»type="button"« ist nötig, um festzulegen, daß dies keine Einreichungstaste, sondern eine Taste mit andere Funktionalität sein soll.

Vor XHTML5 wurde ein input-Element mit dem Typ »button« verwendet.

Button

<input type="button" value="Run" />

Ein Vorteil: Kann auch mit der Tastatur „angeklickt“ werden.

Tastflächen zum Einreichen

Bei Verwendung einer HTTP -URI kann eine Tastfläche mit dem Typ »submit« zum Einreichen des Formulars verwendet werden.

Submit Button

<button type="submit" />

Beschriftungen

Eine Beschriftung kann zu einem anderen Element über dessen id-Attribut hinzugefügt werden.

Label

<label for="id">Type your name: </label>

Beispiel

Ein Beispiel eines Formulars mit einem Texteingabefeld und einer Tastfläche folgt hier.

Ein einfaches Formular

<form><p>
    <input type="text" /> 
    <button type="button">Run</button></p></form>

Interaktionen ohne JavaScript

Das folgende Programm zeigt, wie Absätze bereits ohne JavaScript durch Aktivierung von Flächen ein- und ausgeblendet werden können.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
label { padding: 5px 20px 5px 20px; border: 1px solid #CCC }
input, p { display: none; }
input:checked + p { display: block; }
</style></head><body>
<h1>Zähler</h1>
<form>
  <p><input type="text" id="text" value="0" /></p>
  <p><button type="button" id="button">Inkrementieren!</button></p>
</form>
<pre><code><script>/*<![CDATA[*/
<label for='button0'>0</label>
<label for='button1'>1</label>
<label for='button2'>2</label>
<input id='button0' name='radio' type='radio' />
<input id='button1' name='radio' type='radio' /><p>paragraph 1</p>
<input id='button2' name='radio' type='radio' /><p>paragraph 2</p>
/*]]>*/</script></code></pre></body></html>

Durch den gemeinsamen Namen schließen die Radioknöpfe so einander aus, daß immer nur einer aktiv sein kann.

Quellen

https://html.spec.whatwg.org/multipage/forms.html