Formulare

(Qelle: SELHTML-Navigationshilfen =http://de.selfhtml.org/navigation/html.htm).
Dort kann man Beispiele aufrufen und sich ausführlicher informieren.

 

Formular definieren

 <form action="URI" method="Methode" enctype="MIME-Typ">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der Datei oder Quelle angeben, das die Daten verarbeiten soll.
URI kann z.B. ein CGI-Script, eine HTML-Datei mit PHP-Code oder eine E-Mail-Adresse (mailto:beispiel@example.org) sein.
Für Methode entweder get oder post notieren (bei mailto-Formularen immer post)
Für MIME-Typ bei mailto-Formularen text/plain angeben.

 

Zielfenster für
Server-Antwort

 <form action="URI" method="Methode" target="Zielfenster">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>
Für Zielfenster den Namen eines definierten Frame-Fensters angeben oder einen der folgenden reservierten Namen:
_self = Antwort im gleichen Fenster ausgeben wie das Formular,
_parent = aktuelles Frameset für Antwort sprengen,
_top = alle Framesets für Antwort sprengen.

Zeichensätze
für Verarbeitung

 <form action="URI" method="Methode" accept-charset="Zeichensatzliste">
<!-- Formularelemente und andere Elemente innerhalb des Formulars -->
</form>
Für Zeichensatzliste so etwas eingeben wie ISO-8859-1, ISO-8859-2.

Einzeilige
Eingabefelder

 <input type="text" size="Länge" maxlength="MaxLänge" name="Name">
Für Länge die Anzeigebreite des Feldes in Zeichen notieren (optional).
Für MaxLänge die maximal eingebbare Anzahl Zeichen notieren (optional).
Für Name einen Namen notieren (optional). Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).

 

Einzeilige
Eingabefelder
Textvorbelegung

 <input type="text" value="Wert">
Für Wert den Text der Vorbelegung notieren.

Eingabefelder
für Passwort

 <input type="password" size="Länge" maxlength="MaxLänge" name="Name">

 

Mehrzeilige
Eingabefelder

 <textarea cols="Spalten" rows="Reihen" name="Elementname">
Optionale Textvorbelegung
</textarea>
Für Spalten die Anzeigebreite des in Anzahl Zeichen pro Zeile notieren.
Für Reihen die Anzeigehöhe in Zeilen notieren.
Für Name einen Namen notieren (optional). Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).

 

Mehrzeilige
Eingabefelder
Umbruchkontrolle

 <textarea cols="Spalten" rows="Reihen" wrap="Umbruch">
</textarea>
Kein HTML-Standard!
Für Umbruch einen der folgenden Werte notieren:
soft = automatischer Zeilenumbruch nur bei Eingabe,
hard = automatischer Zeilenumbruch bei Eingabe wird zu Zeilenumbrüchen bei Formularversand,
virtual = wie soft.
physical = wie hard.
off = kein automatischer Zeilenumbruch bei Eingabe.

 

Eingabefelder
nur lesen

 <input type="text" readonly value="Text nur lesbar">
 
<textarea cols="Spalten" rows="Reihen" readonly>
Text nur lesbar
</textarea>

 

Auswahlliste

 <select size="Höhe" name="Name">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</select>
Für Höhe eine Zahl wie 1 oder 10 notieren, um die Anzeigehöhe der Liste (Anzahl gleichzeitig angezeigter Einträge) zu bestimmen.
Für Name einen Namen notieren (optional). Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).

 

Auswahlliste
Mehrfachauswahl

 <select multiple size="Höhe">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</select>
Attribut multiple.

 

Auswahlliste
mit Vorauswahl

 <select multiple size="Höhe">
<option>Eintrag</option>
<option selected>anderer Eintrag</option>
</select>
Attribut selected,

 

Absendewert von
Listeneinträgen

 <select size="Höhe">
<option value="Wert">Eintrag</option>
<option value="Wert">anderer Eintrag</option>
</select>
Für Wert bei jedem Eintrag einen passenden Absendewert notieren.

 

Menüstruktur

 <select size="Höhe">
<optgroup label="Menütext">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</optgroup>
<optgroup label="Menütext">
<option>Eintrag</option>
<option>anderer Eintrag</option>
</optgroup>
</select>
Für Menütext jeweils eine Beschriftung für das Untermenü notieren.

 

Radio-Buttons

 <input type="radio" name="Name" value="Wert"> Text
Für Name einen Namen notieren. Zusammengehörige Radio-Buttons erhalten den gleichen Namen. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Wert einen Text notieren, der beim Formularversand diesen Button bezeichnet.
Für Text einen sichtbaren Beschriftungstext notieren.

 

Checkboxen

 <input type="checkbox" name="Name" value="Wert"> Text
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Wert einen Text notieren, der beim Formularversand diese Checkbox bezeichnet.
Für Text einen sichtbaren Beschriftungstext notieren.

 

Einträge
vorselektieren

 <input type="radio" checked name="Name" value="Wert"> Text
<input type="checkbox" checked name="Name" value="Wert"> Text
Attribut checked.

 

Klick-Buttons (1)

 <input type="button" name="Name" value="Beschriftung" onClick="Aktion">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Beschriftung den Text notieren, der als Button-Beschriftung angezeigt wird.
Für Aktion z.B. eine JavaScript-Anweisung notieren.

 

Klick-Buttons (2)

 <button type="button" name="Name"
   value="Alternativbeschriftung" onClick="...">
Beschriftung
</button>
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Alternativbeschriftung einen Beschriftungstext notieren, falls kein Elementinhalt notiert wird.
Für Beschriftung die Anzeigefläche des Buttons gestalten, z.B. auch mit Grafiken und anderen HTML-Elementen.

 

Formularfeld
für Datei-Upload

 <input type="file" name="Name" maxlength="Größe" accept="MIME-Typ">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Größe die maximale Byte-Größe der Datei angeben, z.B. 100000 (unzuverlässig!).
Für MIME-Typ so etwas notieren wie text/*
Wichtig: im <form>-Tag enctype="multipart/form-data" notieren.

 

Versteckte
Elemente

 <input type="hidden" name="Name" value="Wert">
Für Name einen Namen notieren. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).
Für Wert einen Text notieren, der beim Formularversand mit übertragen, aber nicht angezeigt wird.

 

Elemente
gruppieren

 <fieldset>
<legend>Gruppenüberschrift</legend>
<!-- Formularelemente -->
</fieldset>

 

Label für
Elemente

 <label for="idName">Beschriftung:</label>
<[Formularelement] id="idName">
idName müssen beim for-Attribut des <label>-Tags und beim id-Attribut des zugehörigen Formularelements übereinstimmen. Keine Leerzeichen und Umlaute, erstes Zeichen ein Buchstabe, sonst auch Ziffern, Unterstrich (_), Bindestrich (-), Doppelpunkt (:) oder Punkt (.).

 

Tabulator-Reihenfolge

 <[Formularelement] tabindex="Indexnummer">
Bei jedem Formularelement für Indexnummer eine Zahl notieren. Die niedrigste Nummer wird zuerst angesprungen, die höchste zuletzt.

Tastaturkürzel

 <[Formularelement] accesskey="Buchstabe">
Für Buchstabe so etwas wie h oder m eingeben. Ausführbar meistens mit [Alt]-Taste plus dem angegebenen Buchstaben.

 

Elemente
ausgrauen

 <[Formularelement] disabled>

 

Buttons zum
Absenden/
Abbrechen (1)

 <input type="submit" value="Beschriftung">
<input type="reset" value="Beschriftung">
 

Grafischer
Absendebutton

 <input type="image" src="URI">
Für URI eine Web-Adresse oder ein Ziel mit oder ohne Pfad der gewünschten Grafikdatei angeben

 

Quelle: HTML-Kurs Thorsten fragen

HTML - Befehle - Formulare

- seit Beginn in HTML enthalten
- "interaktiver" Teil von HTML

Befehl Attribut Aufgabe
<form> </form>   Formularcontainer

method="mailto"
oparei@t-online.de
Befehl: "A href 'mailto:oparei@t-online.de'>/A>

 Zieladresse zu der der Formularinhalt geschickt werden soll

method="post"

Formulardaten werden gesondert verschickt und können auch verschlüsselt werden

method="get"

 Formulardaten werden als Teil der URL gesendet ( Suchmaschinen)
URL auf  256 Zeichen beschränkt

Formularfelder

Befehl Attribut Aufgabe
<textarea> </textarea>   mehrzeiliges Textfeld
name="Bezeichnung des Areas" Eindeutige Bezeichnung
rows = "5" Größe in Zeilen
cols = "20" Breite der Spalte
<select> </select>   Optionsliste/Combobox
name="Bezeichnung der Box" Eindeutige Bezeichnung
size = "3" Anzahl der sichtbaren Optionen
size = "1" bewirkt die Entstehung einer Combobox, die aufklappt, wenn man das möchte
multiple Mehrfachauswahl
<option value="Text"> Listeneintrag innerhalb des select-Befehls
selected Attribut für option, Vorauswahl des Wertes

Quelle: http://de.selfhtml.org/ Stefan Münz