text & password
Eingabeelement <input>

HTMLBedeutung
<input>Eingabe-Element das über das Attribut type="..." näher spezifiziert werden kann.

Attribute für Text und Passwort

AttributBedeutung
type="text"Textfeld mit einer Zeile
type="password"Textfeld mit einer Zeile bei dem die eingegebenen Zeichen als • oder * angezeigt werden.
maxlength="100"Maximale Anzahl von Zeichen
size=""Stellt bei textbezogenen Input Elementen, außer bei Textarea, die Breite ein. Diese Eigenschaft sollte über CSS gelöst werden.

Allgemeine textbezogene Attribute

AttributBedeutung
pattern="[1-9]{5}"Definition der Eingabemöglichkeit. Es gelten für das Pattern die "Regular Expressions" (RegEx.) [A-X]{3} z.B. erlaubt genau drei Großbuchstaben bis auf Y und Z. [A-Za-z]{3} z.B. erlaubt genau drei beliebige Groß und Klein-Buchstaben. [1-9]{5} erlaubt genau 5 beliebige Zahlen. [1-9]{1-3} erlaubt beliebige Zahlen mit einer, zwei oder drei Dezimal-Stellen.
readonlyKann nur gelesen werden
placeholder=""Platzhalter der nicht übertragen wird.

Allgemeine Attribute für <input>

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite

HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.


textarea
HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.

Eingabeelement <textarea>

HTMLBedeutung
<textarea>Mehrzeiliges Textfeld

Attribute für <textarea>

AttributBedeutung
cols="200"Breite der Textarea
rows="5"Zeilen der Textarea
wrap="hard"Zeilenumbruch der Textarea beim Senden. "Hard" ist mit Zeilenumbruch und "Soft" ist ohne Zeilenumbruch.
form="ID"Definiert das Formular (ID) dem die Textarea zugehört.

Allgemeine textbezogene Attribute

AttributBedeutung
pattern="[1-9]{5}"Definition der Eingabemöglichkeit. Es gelten für das Pattern die "Regular Expressions" (RegEx.) [A-X]{3} z.B. erlaubt genau drei Großbuchstaben bis auf Y und Z. [A-Za-z]{3} z.B. erlaubt genau drei beliebige Groß und Klein-Buchstaben. [1-9]{5} erlaubt genau 5 beliebige Zahlen. [1-9]{1-3} erlaubt beliebige Zahlen mit einer, zwei oder drei Dezimal-Stellen.
readonlyKann nur gelesen werden
placeholder=""Platzhalter der nicht übertragen wird.

Allgemeine Attribute

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite


email
Eingabeelement <input>

HTMLBedeutung
<input>Eingabe-Element das über das Attribut type="..." näher spezifiziert werden kann.

Attribute für E-Mail

AttributBedeutung
type="email"Email Adresse. In Verbindung mit required auch ein Test. In Safari, Chrome und Firefox *@*.*. hingegen in Opera *@*. Eine echte Prüfung ist das nicht, aber schon mal ein Schritt in die richtige Richtung.
multipleErlaubt die Eingabe mehrerer Werte. Z.B. mehrere E-Mail Adressen oder die Auswahl mehrere Dateien. Funktioniert auch nur bei E-Mail und File. Bei E-Mail müssen diese mit einem Komma (,) getrennt werden.

Allgemeine textbezogene Attribute

AttributBedeutung
pattern="[1-9]{5}"Definition der Eingabemöglichkeit. Es gelten für das Pattern die "Regular Expressions" (RegEx.) [A-X]{3} z.B. erlaubt genau drei Großbuchstaben bis auf Y und Z. [A-Za-z]{3} z.B. erlaubt genau drei beliebige Groß und Klein-Buchstaben. [1-9]{5} erlaubt genau 5 beliebige Zahlen. [1-9]{1-3} erlaubt beliebige Zahlen mit einer, zwei oder drei Dezimal-Stellen.
readonlyKann nur gelesen werden
placeholder=""Platzhalter der nicht übertragen wird.

Allgemeine Attribute für <input>

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite

HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.


radio & checkbox
Attribute für radio & checkbox

AttributBedeutung
type="radio"Wählknopf im Kreis. Radio-Button werden gewählt, wenn man sich zwischen mehreren Wahlmöglichkeiten für eine Wahl entscheiden muss. Der Radio-Button entspricht "entweder-oder". Der Name kommt von den alten amerikanischen Auto-Radio-Knöpfen. Bei denen konnte immer nur ein Knopf gedrückt sein. So wie bei alten Walkman-Kassetenspielern. Falls die Teile heute noch jemand kennt.
type="checkbox"Checkbox mit Häkchen. Checkboxen werden für die Bestätigung genommen und es können auch mehrere Checkboxen gleichzeitig gewählt sein.
checkedVorauswahl für Checkbox
value=""Zugewiesener Wert der tatsächlich übertragen wird. Wichtig für die Typen checkbox, radio und range.

Eingabeelement <input>

HTMLBedeutung
<input>Eingabe-Element das über das Attribut type="..." näher spezifiziert werden kann.

Allgemeine Attribute für <input>

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite

HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.


select
HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.

Attribute für <optgroup>

AttributBedeutung
label=""Beschriftung für <optgroup>

Allgemeine Attribute

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite


fieldset & legend
HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.

Allgemeine Attribute

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite

Interessante Pseudo-Elemente

CSSBedeutung
:focusFokussierte Eingabeelement, also gerade aktive Elemente.
:invalidAussehen von Eingabeelementen falschen Werten.
:validWählt valide Eingabeelemente an.
::input-placeholder Platzhalter Text in Formular-Elementen.


number & range
Attribute für Number & Range-Slider

AttributBedeutung
type="range"Skala um innerhalb eines definierten Wert zu wählen
type="number"Liste um eine Anzahl einzugeben
max="10"Maximaler Wert
min="1"Mindestwert
step=""Schritte in denen die Werte erhöht werden können für type="number".
value=""Zugewiesener Wert der tatsächlich übertragen wird. Wichtig für die Typen checkbox, radio und range.

Allgemeine Attribute

AttributBedeutung
name="..."Der Name kennzeichnet die Elemente des Formular und das Formular selber. Name spielt eine wichtige Rolle bei der Weitergabe der Daten des Formulars.
type="file"Upload von Dateien.
disabledAusgegrauter Wert ohne Eingabemöglichkeit
requiredPflichtfeld. <input> mit dem Attribut required werden jedoch automatisch mit der Pseudoklasse :invalid markiert, insofern sie leer sind. In Verbindung mit Pattern kann die Eingabe schon recht gut gelenkt werden. Es verhindert allerdings nicht das Senden wenn das Formular ohne dieses Feld abgeschickt wird. Für solche echten Checks können sehr gut Javascript eingesetzt werden.
autofocusElement bekommt die pseudoklasse :focus beim Laden der Seite

HTML Formular Elemente

HTMLBedeutung
<form>Definiert das Formular
<input>Eingabe-Element das über das Attribut type="..." näher spezifiziert werden kann.
<button>Button zum Klicken. Kann Eigenschaften wie "Senden" oder "Löschen" erhalten.
<label>Beschreibt ein Element. Dabei wird mit dem Attribut for='...' auf die gewünschte ID des Ziels verwiesen.
<fieldset>Gruppiert verwandte Elemente im Formular
<legend>Beschreibung eines <fieldset>
<output>Berechnet Ergebnisse im Formular.


► Formular-Action

Formular Action

http://code.arnoldbodeschule.de/formular-action/

Jetzt kommt Action in das Formular. Interaktion, Validität und das Senden der Daten mit PHP.