htm l mit Adi Prinz

HTML-Formulare / Das form-Element

form

Formulare werden erstellt, damit der Anwender Felder ausfüllen kann und diese, mit einem Senden-Button an ein Script sendet, welches die Daten weiter verarbeitet. Es gibt eine Vielzahl von Einsatzmöglichkeiten z.B.

  • Login
  • Registrierung
  • Gästebuch
  • Forum
  • Online-Shop
  • Kontakt
  • uvm...

form-Element

Mit dem form-Tag öffnen sie ein Formular. Mit dem action-Attribut geben sie Pfad und Namen des Scripts zur Weiterverarbeitung an.

Das Thema Weiterleiten wird im Modul PHP mit Adi Prinz intensiv behandelt! Ein Klick auf den Sende-Button bewirkt hier noch nichts.
(<form action="#">) 

<form action="#">
<--Hier kommem die Formularfelder hinein-->
</form>

Folgende Attribute stehen zur Verfügung

  • accept-charset: Zeichencodierung z. B. ISO-8859-1
  • action: Dateiname und Pfad für übernehmendes Script
  • enctype: Codierung für übergebende Daten (nur method=post)
  • method: get oder post
  • name: Formularname
  • target: Zielfenster
  • autocomplete: Autovervollständigen on oder off
  • novalidate: schaltet Formularüberprüfung aus (keine Wertzuweisung)

Das form-Element kann eines oder mehrerer dieser Kind-Elemente enthalten.

  • input (Eingabefeld)
  • textarea (mehrzeilige Textfelder)
  • button (Button, Schalter)
  • select (Auswahllisten)
  • option (Auswahllisten)
  • optgroup (verschachtelte Auswahllisten)
  • fieldset (Gruppierungen)
  • label (Kurzerklärung für Eingabefelder)
  • datalist (Liste der Eingabemöglichkeiten)

input-Elemente

input

Jedes Formular braucht Steuerelemente (Formularfelder), für unterschiedliche Eingabetypen. Das wichtigste Steuerelement definieren sie mit dem input-Tag.

input-Element

Das input-Tag ist Inhaltsleer (Standalone) und muss dementsprechend geschrieben werden. Mit dem type-Attribut bestimmen sie den Typ des Formularfeldes. Folgende Typen (Attributwerte) stehen u.a. zur Verfügung:

Textfelder

  • text: für einzeiligen Text
  • email: für eine oder mehrere Email-Adressen
  • password: für Passwörter
  • search: für Suchfelder
  • url: für Internetadressen

Buttons

  • reset: zum Reset von Formularinhalten (löschen)
  • submit: für Bestätigungsbuttons
  • button: für Buttons
  • image: für grafische Bedienelemente

Zahlenfelder

Einige der folgenden input-Typen werden nicht von allen Browsern unterstützt (Ausprobieren).

  • number: geeignet für Zahlenwerte
  • datetime: für Datums- bzw. Zeitangaben in UTC
  • datetime-local: für lokale Zeitangaben
  • date: für Datumsangaben ohne Zeitzone
  • month: für die Angabe eines Monats
  • week: für die Angabe einer Woche
  • time: für Zeitangaben ohne Zeitzone
  • tel: für Telefonnummern

Weitere Felder

  • checkbox: für Checkboxen (Kontrollkästchen)
  • radio: für Radiobuttons (Optionsfelder)
  • file: für das Hochladen von Dateien
  • hidden: für unsichtbaren Text
  • color: für Farbangaben
  • range: für Intervalle (z.B. Slider)
<input type="text" name="Name" value="Name eingeben">

Folgende Attribute stehen zur Verfügung

  • accept: legt den Dateityp fest(nur bei type='file')
  • alt: Alternativtext (nur bei type='image')
  • autocomplete: Autovervollständigen on oder off
  • autofocus: setzt Cursor automatisch (keine Wertzuweisung)
  • checked: für type="checkbox" oder type="radio" (keine Wertzuweisung)
  • disabled: deaktiviert (keine Wertzuweisung)
  • form: spezifiziert, zu welchem Formular das input-Element gehört
  • formaction: spezifiziert, wohin die Antwort geschickt werden soll (nur für type="submit" oder type="image")
  • formenctype: Codierung für übergebende Daten (nur method=post) Überschreibt enctype des form-Elements (für type="submit" oder type="image")
  • formmethod: Methode für übergebende Daten (post oder get) Überschreibt method des form-Elements (für type="submit" oder type="image")
  • formnovalidate: soll nicht vorher ausgewertet werden (nur für type="submit")
  • formtarget: spezifiziert, wo die Antwort ausgegeben werden soll (nur für type="submit")
  • height: definiert Höhe (für type="image")
  • list: Angabe von mehreren Optionen mit datalist
  • max: Maximalwert
  • maxlength: maximale Länge
  • min: Minimalwert
  • multiple: Mehrfacheingaben
  • name: Feldname
  • pattern: Suchmuster
  • placeholder: Vorbelegter Inhalt (keine Wertzuweisung)
  • readonly: Lesezugriff (keine Wertzuweisung)
  • required: Pflichtangaben (keine Wertzuweisung)
  • size: Breite (in Zeichen)
  • src: URL des Bildes als submit-Button (für type="image")
  • step: Intervalle (Schritte)
  • type: legt input-Typ fest
  • value: Angabe eines Werts
  • width: definiert Breite (für type="image")
<form action="#">
Ihr Name:<input type="text" name="Name" 
placeholder="Namen eingeben"><br />
Ihr Passwort:<input type="password" name="Passwort"><br />
Ihre Email-Adresse:<input type="email" name="Mail" required><br />
Männlich:<input type="radio" name="geschlecht">
Weiblich:<input type="radio" name="geschlecht"><br />
Sind Sie Kunde:<input type="checkbox" name="Kunde" checked><br />
<input type="submit" value="Senden"> 
<input type="reset" value="Löschen">
</form>

Auswahllisten

select option optgroup

Mit <select> </select> definieren sie eine Auswahlliste in ihrem Formular. Innerhalb des select-Elements können sie mit <option> </option> Einträge der Auswahlliste definieren. Mit <optgroup> </optgroup> können sie die Liste noch gruppieren. 

<h1>Welches ist Ihr Lieblingssender?</h1>
<form action="#">
<select name="TV">
<optgroup label="Österreich">
<option>ORF</option>
<option>ATV</option>
<option>Servus TV</option>
</optgroup>
<optgroup label="Deutschland">
<option>ARD</option>
<option>ZDF</option>
<option>Sat1</option>
<option>RTL</option>
<option>Pro7</option>
</optgroup>
</select><br>
<input type="submit" value="Senden"> 
<input type="reset" value="Löschen">
</form>

Das select-Element

Mit dem select-Tag beginnen sie eine Auswahlliste im Formular. 

<select name="TV" size="3" multiple>

Folgende Attribute stehen zur Verfügung

  • autofocus: setzt Cursor automatisch (keine Wertzuweisung)
  • disabled: deaktiviert (keine Wertzuweisung)
  • form: spezifiziert, zu welchem Formular das select-Element gehört
  • multiple: Mehrfacheingaben
  • name: Feldname
  • required: Pflichtangaben (keine Wertzuweisung)
  • size: Sichtbare Einträge (ohne Scrollen)

Das option-Element

Zwischen dem öffnende und schließenden option-Tag schreiben sie den sichtbaren Listeneintrag. Der Wert für das übernehmende Script wird im value-Attribut geschrieben. 

<option value="Irgendwas" selected>Listeneintrag</option>

Folgende Attribute stehen zur Verfügung

  • disabled: deaktiviert (keine Wertzuweisung)
  • label: sichtbarer Eintrag
  • selected: Vorselektion (keine Wertzuweisung)
  • value: Wert für das ausführende Script

Das optgroup-Element

Mit dem optgroup-Element können sie die Auswahlliste gruppieren. Den sichtbaren Eintrag definieren sie mit dem label-Attribut. Das optgroup-Element hat für das übernehmende Script keine Bedeutung. 

<optgroup label="Österreich">

Folgende Attribute stehen zur Verfügung

  • disabled: deaktiviert (keine Wertzuweisung)
  • label: sichtbarer Eintrag

Datenlisten

input datalist option

Mit dem datalist-Element geben sie dem Formularbenutzer Vorschläge für Einträge, die der Benutzer verwenden, oder einen anderen Wert eingeben kann. In jedem Fall müssen sie zusätzlich ein input-Element einfügen. Im datalist-Element definieren sie Vorschläge mit dem option-Tag, 

<h1>Welches ist Ihr Lieblingssender?</h1>
<form action="#">
<input type="text" list="tv">
<datalist id="tv">
<option value="ORF">
<option value="ATV">
<option value="Servus TV">
<option value="ARD">
<option value="ZDF">
<option value="Sat1">
<option value="RTL">
<option value="Pro7">
</datalist>
<input type="submit" value="Senden"> 
<input type="reset" value="Löschen">
</form>

Mit dem type-Attribut im input-Element legen sie fest, welche Einträge der Benutzer verwenden darf. Der Wert des list-Attributes muss mit der ID des datalist-Elements ident sein. Das ist wichtig für das übernehmende Script! Achten sie auf die Syntax des option-Tags. Einträge werden im value-Attribut definiert - ohne schließendem Element. 

<input type="text" list="tv">
<datalist id="tv">

datalist-Element

Das datalist-Tag kennt außer Universalattribute keine weiteren Eigenschaften.

Textarea / Mehrzeilige Textfelder

textarea

Mehrzeilige Textfelder verwenden sie für lange Text in einem HTML-Formular. Textfelder sollen immer dann verwendet werden, wenn der Benutzer mehr als eine Zeile eingeben soll. 

<h1>Kontaktformular</h1>
<form action="#">
Dein Name: <input type="text" required><br>
Deine Email: <input type="email" required><br>
Dein Eintrag: <textarea name="eintrag" cols="50" rows="20">
</textarea>
<input type="submit" value="Senden"> 
<input type="reset" value="Löschen">
</form>

textarea-Element

Mit dem textarea-Element erzeugen sie ein mehrzeiliges Textfeld. Die Syntax für textarea ist ein öffnendes und schließendes Tag (<textarea>..</textarea>). Das schließenede textarea-Tag müssen sie unbedingt schreiben.

Folgende Attribute stehen zur Verfügung

  • cols: Anzahl Zeichen pro Zeile
  • rows: Anzahl sichtbarer Zeilen
  • disabled: deaktiviert (keine Wertzuweisung)
  • name: Feldname
  • readonly: Lesezugriff (keine Wertzuweisung)
  • autofocus: setzt Cursor automatisch (keine Wertzuweisung)
  • form: spezifiziert, zu welchem Formular das textarea-Element gehört
  • maxlength: maximale Länge
  • placeholder: Vorbelegter Inhalt (keine Wertzuweisung)
  • required: Pflichtangaben (keine Wertzuweisung)
  • wrap: Beinflusst Zeilenumbrüche im Text (hard, soft, off, u.a.)

Vorbelegung im Textfeld

Für eine Vorbelegung im Textfeld gibt es zwei Möglichkeiten:

  • Text zwischen dem öffnenden und schließenden textarea-Tag
  • Mit dem placeholder-Attribut im textarea-Tag

1. Möglichkeit

<textarea name="eintrag" cols="50" rows="20">
EDV mit Adi Prinz
</textarea>

2. Möglichkeit

<textarea name="eintrag" cols="50" rows="20"
placeholder="EDV mit Adi Prinz">
</textarea>

Gruppierte Formulare und Labels

fieldset legend label

Das fieldset-Element gruppiert zusammengehörige Felder eines Formulars. Mit dem legend-Element fügen sie der Gruppe eine Caption hinzu. Jedem Steuerelement im Formular können sie ein label-Element hinzufügen. 

<form action="#">
<fieldset>
<legend>Name</legend>
Vorname: <input type="text" name="vorname" placeholder="Vorname"><br>
Zuname:  <input type="text" name="zuname" placeholder="Zuname"><br>
</fieldset>

<fieldset>
<legend> Geschlecht</legend>
<label for="männl"> männlich </label>
<input type="radio" name="geschlecht" id="männl" value="m"><br>
<label for="weibl"> weiblich </label>
<input type="radio" name="geschlecht" id="weibl" value="w">
</fieldset>
</form>

fieldset-Element

Mit <fieldset>..</fieldset> gruppieren sie Steuerelemente eines Formulars. Die Gruppe wird standardmäßig gerahmt dargestellt (Browserabhängig). Für das übernehmende Script hat fieldset keine Bedeutung!

Folgende Attribute stehen zur Verfügung

  • disabled: deaktiviert Gruppe(keine Wertzuweisung)
  • name: Feldname
  • form: spezifiziert, zu welchem Formular das textarea-Element gehört

legend-Element

Mit dem legend-Element weisen sie der gruppe eine Caption zu. Die caption wird meist im oberen Rahmen dargestellt. 

<legend>Caption</legend>

Das legend-Tag kennt außer Universalattribute keine weiteren Eigenschaften.

label-Element

Mit dem label-Element können sie Steuerelemente mit der Beschriftung des Feldes verknüpfen. Die Verbindung kommt über das for-Attribut des label-Tags und das id-Attribut im Steuerelement zustande. Es vergrößert außerdem den klickbaren Bereich für Benutzer mit der Maus. 

<label for="männl"> männlich </label>
<input type="radio" name="geschlecht" id="männl" value="m">

Folgende Attribute stehen zur Verfügung

  • for: die Verknüpfung zum Steuerelement (id)
  • form: spezifiziert, zu welchem Formular das textarea-Element gehört

Weitere Steuerelemente

button keygen output progress meter

Es gibt noch weitere Steuerelemente in HTML, mit denen wir uns in diesem Script aber nicht beschäftigen. Dafür sind auch Kenntnisse von JavaScript und/oder PHP notwendig. Ihr findet hier nur eine Kurzbeschreibung dieser Formelemente. Die Ausnahme hier soll das button-Element sein, welches ihr für eure Formulare einsetzen könnt. 

<h1>Kontaktformular</h1>
<form action="#">
Dein Name: <input type="text" required><br>
Deine Email: <input type="email" required><br>
Dein Eintrag: <textarea name="eintrag" cols="50" rows="20">
</textarea>
<button type="submit" value="Senden">
<img src="button.gif" alt="Beschreibung">
</button>
</form>

button-Element

Das button-Tag erzeugt eine Schaltfläche in einem Formular, darf aber – im Gegensatz zu den sonstigen form-Elementen – auch außerhalb von <form>..</form> verwendet werden. Dann dient das button-Element z.B. dem Aufruf eines Javascripts. Außerhalb von Formularen hat ein Klick auf einen Button ohne Javascript keine Funktion. Mit dem button-Element können sie auch input-Schaltflächen ersetzen. Außerdem kann im button-Element neben Text auch ein Bild als Hintergrund verwendet werden. 

<button type="submit" value="Senden">
<img src="button.gif" alt="Beschreibung">
</button>

Folgende type-Werte stehen zur Verfügung

  • button
  • reset
  • submit

Folgende Attribute stehen zur Verfügung

  • autofocus: setzt Cursor automatisch (keine Wertzuweisung)
  • disabled: deaktiviert (keine Wertzuweisung)
  • form: spezifiziert, zu welchem Formular das input-Element gehört
  • formaction: spezifiziert, wohin die Antwort geschickt werden soll (nur für type="submit")
  • formenctype: Codierung für übergebende Daten (nur method=post) Überschreibt enctype des form-Elements (für type="submit" oder type="image")
  • formmethod: Methode für übergebende Daten (post oder get) Überschreibt method des form-Elements (für type="submit")
  • formnovalidate: soll nicht vorher ausgewertet werden (nur für type="submit")
  • formtarget: spezifiziert, wo die Antwort ausgegeben werden soll (nur für type="submit")
  • name: Feldname
  • type: legt input-Typ fest
  • value: Angabe eines Werts

keygen-Element

Für verschlüsselte Übertragung.

output-Element

Für Ausgabe des Ergebnisses einer Berechnung oder von eingegebenen Werten.

progress-Element

Für einen Fortschrittsbalken.

meter-Element

Element zur Auszeichnung skalarer Werte.

Beispielformular

Abschließend habe ich hier noch ein Beispielformular. Wie ihr seht, werden hier bereits einige einfache CSS-Einstellungen verwendet.

Anschauen 

<form action="#">

<fieldset>
<legend>Persönliche Daten</legend>
<p>Vorname:</p>
<input type="text" name="vorname" placeholder="Vorname" required>
<p>Nachname:</p> 
<input type="text" name="nachname" placeholder="Zuname" required>
<p>Email:</p>
<input type="email" name="email" required><br>
<p>URL:</p>
<input type="url" name="url" placeholder="http://"> 
</fieldset>

<fieldset>
<legend>Geschlecht</legend>
<label for="männl"> männlich </label>
<input type="radio" name="geschlecht" id="männl" value="männl">
<label for="weibl"> weiblich </label>
<input type="radio" name="geschlecht" id="weibl" value="weibl">
</fieldset>

<fieldset>
<legend>Welcher ist ihr Lieblingssender?</legend>
<select name="TV">
<optgroup label="Österreich">
<option>ORF</option>
<option>ATV</option>
<option>Servus TV</option>
</optgroup>
<optgroup label="Deutschland">
<option>ARD</option>
<option>ZDF</option>
<option>Sat1</option>
<option>RTL</option>
<option>Pro7</option>
</optgroup>
</select><br>
</fieldset>

<fieldset>
<legend>Welcher Script- und Programmiersprache beherrschen Sie?</legend> 
<input type="text" list="lang">
<datalist id="lang">
<option value="HTML">
<option value="CSS">
<option value="PHP">
<option value="JavaScript">
<option value="SQL">
<option value="VBA">
<option value="C+">
</datalist> 
</fieldset>

<fieldset>
<legend>Action</legend>
<input type="submit" value="Senden"> 
<input type="reset" value="Löschen">
</fieldset>
 
</form>

Für weitere Informationen über HTML-Formulare schauen sie sich folgende Scripts an!

w3schools.com

wiki.selfhtml.org