HTML5 - Formulare - Attribute Teil 2
1. form
- 16.0
- 12.0
- 22.0
Auch das ist mal eine richtig gute Idee gewesen. Normalerweise werden ja nur die Elemente übermittelt, die innerhalb des <form>
-Tags stehen.
Mit diesem neuen Attribut muss das nicht mehr sein.
Beispiel
Beide Textfelder ausfüllen, auf "Senden" klicken und ungläubig auf die Adresszeile im Browser starren.
<form id="blubber">
<input type="text" name="bla" />
<input type="submit" value="Senden">
</form>
<input type="text" name="blubb" form="blubber">
Erläuterung
Für die Zuordnung benötigt das Formular eine ID. Und deren Wert wird dann dem Element außerhalb des Formulars über das form
-Attribut zugewiesen.
2. formaction
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Dieses neue Attribut bietet ebenfalls eine echt nette Möglichkeit. Denn man kann damit das action
-Attribut des Formulars überschreiben, indem man
es auf einen Button oder ein Submit legt. Das bedeutet auch, dass man mehrere action
auf ein Formular mit mehreren "Abschick"-Elementen legen kann.
Beispiel
<form action="formular_attribute_2.htm" method="post">
<input type="text" name="blubb" /><br /><br />
<button type="submit">Submit 1</button>
<button type="submit"
formaction="../../misc/form/form_1.php">Submit 2</button>
<input type="submit"
formaction="../../misc/form/form_2.php" value="Submit 3"/>
</form>
Erläuterung
Wie ihr ja schon am Code seht, liegen auf einem Button und einem Submit jeweils ein eigenes formaction
. Je nachdem auf welches "Abschick"-Element
man nun klickt, werden die Daten an die angegebene Datei übergeben. Gibt man nichts an, wird die aus dem normalen action
des Formulars genommen.
Weitere Attribute aus der derselben Kategorie sind
formenctype
fürenctype
formmethod
fürmethod
formtarget
fürtarget
sowie noch ein Weiteres, auf das ich gleich eingehen werde.
3. placeholder
- 16.0
- 12.0
- 5.1
- 22.0
- 9.0/10.0
Damit kann man beschreibenden Text in einem Textfeld vorgeben. Das gilt sowohl für <input type="text">
als auch für <textarea>
.
Wichtig! Der Wert von placeholder
wird beim Absenden nicht übertragen!!!
Beispiel
<form>
<input type="text" name="bla" placeholder="blubb blubber"/>
<input type="submit" value="Senden">
</form>
4. required
- 16.0
- 12.0
- 22.0
- 9.0/10.0
Definiert Pflichtfelder, die ausgefüllt werden müssen. Die Überprüfung wird dabei vom Browser selbst übernommen.
Beispiel
Einfach auf "Senden" klicken und staunen.
<form>
<input type="text" name="bla" required/>
<input type="submit" value="Senden">
</form>
Ein Hinweis
Die Umsetzung unterscheidet sich je nach Browser. Auf die Details gehe ich in den kommenden Tutorials ein. Ach ja, man kann die browsereigene Validierung auf zwei Arten umgehen. Und zwar mit den beiden folgenden Attributen.
novalidate
auf<form>
(eigentlich sinnfrei, da man auch gleich ohnerequired
arbeiten kann)formnovalidate
auf "Abschick"-Elemente (siehe oben beiformaction
)
Wer jetzt aber denkt, das sei schon das Höchste der Gefühle, der soll erst mal sehen, was sich bei den Attributwerten getan hat. Denn das zieht einem wirklich die Socken aus. Vorausgesetzt man hat welche an und der eigene Browser unterstützt das.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt