Hauptmenü

Untermenü

HTML5 - Formulare - Attribute Teil 2

1. form

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

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ür enctype
  • formmethod für method
  • formtarget für target

sowie noch ein Weiteres, auf das ich gleich eingehen werde.

3. placeholder

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

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.

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