Die wichtigsten Formularelemente
Ein Webformular dient zum Beispiel dem Versand von Daten, die an eine E-Mail-Adresse oder ein Script (serverseitig) geschickt werden. Formulare werden mit dem form-Element erzeugt. Alle in diesem Element enthaltenen Eingabe-Elemente werden beim Versand berücksichtigt. Die eingegebenen Daten bzw. vorgegebene Werte werden an die Zieladresse übermittelt. Die Zieladresse notiert man im action-Attribut des form-Elements.
| Element Bezeichnung/Bedeutung | Syntax / Beispiel |
|---|---|
| form [Bildet Grenzen eines Formularbereiches] | <form action="mailto:benutzergmx.de" methode="get" name="personal"> |
| input [Sammlung von unterschiedlichen Eingabefeldern] | <input type="passwort" name="pwd"> type: text, checkbox, radio,... |
| select [Auswahlfelder (unterschiedliche Ausführungen)] | <select size="2" name="select" multiple="1"> <option>Auswahl 1</option> <option selected>Auswahl 2</option> <option>Auswahl 3</option> </select> |
| option / optgroup [Optionsfelder für Auswahlmöglichkeiten] | |
| textarea [Volumentexteingabefeld] | <textarea name="text" rows="5" cols="60" placeholder="Schreiben Sie einen Text..." spellcheck="true" lang="de" wrap="physical"></textarea> |
| button [Schaltfläche für Aktionen] | <button type="submit">Abschicken...</button> submit - Sendefunktion (an action-Parameter im Fom-Element) reset - Formulardaten zurücksetzen |
| fieldset [Behälter für zusammengehörige Formularelemente] | <fieldset name="Feldsatz 2"> </fieldset> <legend>Feldsatz 1:</legend> |
| label / legend [Feldbeschriftungen] | |
| datalist [Datenlisten / spez. Feldarten] | <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
| output [Ausgabefelder (Scriptprogrammierung)] | <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" value="50"> +<input type="number" id="b" value="25"> =<output name="x" for="a b"></output> </form> |
| progress [Verlaufsbalken] | <progress id="file" value="32" max="100"> 32% </progress> |
| meter [Wert innerhalb eines bestimmten Bereiches] | Das Tag definiert eine skalare Messung innerhalb eines bekannten Bereichs oder einen Bruchwert. Dies wird auch als Messgerät bezeichnet.<meter> Beispiele: Festplattennutzung, Relevanz eines Abfrageergebnisses usw. |