HTML Formulare

Definition von Formularen
Formular
Einzeiliges Eingabefeld
Einzeiliges Eingabefeld (Sonderform Passworteingabe)
Mehrzeiliges Eingabefeld
Menü-Listen
Radio-Buttons
Check-Boxen
Submit-Button
Reset-Button


Definition von Formularen

Formular-Elementen werden innerhalb des <form>-Tags eingefügt.

Es gibt zwei grundsätzliche Methoden Formulardaten zu versenden:
  1. An eine Mail-Adresse
  2. An ein Programm
Dieses wird im <form>-Tag mit Hilfe der entsprechenden Attribute festgelegt.

Das Versenden der Daten geschieht mit Hilfe eines HTML-Formular-Elements (submit-Button), der einen entsprechenden Befehl an den Browser übermittelt.

Innerhalb des <form>-Bereichs dürfen beliebige HTML-Elemente zur Dokumentgestaltung eingefügt werden.
  1. <form
    action="mailto:abc@xyz.de"
    method="post"
    enctype="text/plain>

    Formular-Elemente und HTML-Elemente

    </form>

  2. <form
    action="/cgi-bin/programm.pl"
    method="post|get">

    Formular-Elemente und HTML-Elemente

    </form>
Formular <form
action=""
method="">
Formular-Elemente
HTML-Elemente
</form>

 action="mailto:mail-Adresse| /cgi-bin/programm-Name"
method="post|get"

enctype="text/plain"
Einzeiliges Eingabefeld <input
type="text"
name=""> 		type="text"
name="feld-Name"
size="Anzahl Zeichen"
maxlength="Anzahl Zeichen"
value="vorbelegter Text"
Einzeiliges Eingabefeld
(Sonderform Passworteingabe) 		<input
type="password"
name=""> 		type="password"
name="feld-Name"
size="Anzahl Zeichen"
maxlength="Anzahl Zeichen"
value="vorbelegter Text"
Mehrzeiliges Eingabefeld <textarea
name="">
vorbelegter Text
</textarea>

 name="feld-Name"
rows="Anzahl Zeilen"
cols="Anzahl Zeichen"
wrap="pysical|virtual"
Menü-Listen

Listen werden vom <select>-Tag umschlossen.
Die gelisteten Einträge werden einzeln mit dem <option>-Tag definiert.

Standardmäßig ist nur eine Auswahl möglich.

Mit der Wertzuweisung "1" für das size-Attribut erzeugen sie eine Drop-Down-Liste. 		<select name="feld-Name">
<option>Auswahltext 1</option>
<option>Auswahltext 2</option>
</select>
<select
name="">
option-Definitionen
</select>

 name="feld-Name"
size="ziffer"
multiple
<option>
Auswahltext
</option>

 value="Sende-Daten"
selected
Radio-Buttons

Nur eine Auswahl unter mehreren Radio-Buttons (!) möglich.

Logisch zusammengehörige Radio-Buttons haben dieselbe Wertzuweisung im name-Attribut.

 <input
type="radio"
name=""
value="">
Auswahltext 		type="radio"
name="feld-Name"
value="Sende-Daten"
checked
Check-Boxen

Mehrere Auswahlen unter mehreren (!) möglich. 		<input
type="checkbox"
name=""
value="">
Auswahltext

 type="checkbox"
name="feld-Name"
value="Sende-Daten"
checked
Submit-Button <input
type="submit">

 type="submit"
value="Button-Beschriftung"
Reset-Button <input
type="reset">

 type="reset"
value="Button-Beschriftung"