Formulare
Siehe Form bei w3schools
Auf Formulare zugreifen
Unter dem Thema DOM wurden verschieden Möglichkeiten vorgestellt, um auf Elemente der HTML Seite zuzugreifen.
getElementById(),getElementsByClassName(), getElementsByTagName(),querySelector() , querySelectorAll(), getElementsByName()
Speziell für Formulare und Formularelemente gibt es noch folgende Möglichkeiten.
document.forms Über die Eigenschaft forms des document Objects. Diese liefert eine Liste aller form-Elemente, welche man über einen Index ansprechen kann, in der Reihenfolge, wie sie auf der Webseite erscheinen. document.forms[0] ist das erste Formular auf der Webseite.
Eine weitere Möglichkeit bietet die Eigenschaft des document-Objekts, welche dem Namen des Formulars entspricht.
Beispiel
HTML
<form name="myForm"> <input type="text" name="vorname"> </form>
Hier wird der Name des Formulars und dann der Name des darin liegenden input-Elements aufgeführt. Über value kann man den Wert auslesen oder setzen.
Javascript
document.myForm.vorname.value = "Willi";
Formular Eigenschaften
Formulare stellen verschiedene Eigenschaften zur Verfügung
| Eigenschaft | Beschreibung |
|---|---|
| action | Welche Aktion ausgelöst werden soll, bzw. an welche URL das Formular geliefert werden soll. Beispiel |
| method | Mit welcher Methode das Formular verschickt wird post, get |
| elements | Zugriff auf die einzelnen Elemente des Formulars. Über einen Index werden die Elemente in der Reihenfolge geliefert, wie sie in HTML aufgeführt sind. Beispiel |
Auf Formularereignisse reagieren
Folgende Ereignisse stehen für Formularelemente zur Verfügung
| Methode | Beschreibung |
|---|---|
| blur() | Ein Element verliert den Fokus |
| focus() | Ein Element bekommt den Fokus |
| change() | Ein ausgewählter Wert wird geändert, in einer Checkbox, Auswahlliste, Gruppe von Radiobuttons |
| select() | Der Text eines input-Elements oder textarea-Elements wird ausgewählt. |
| reset() | Ein Formular wird zurück gesetzt Beispiel |
| submit() | Ein Formular wird abgeschickt Beispiel |
Hat man einem Formularlement einen dieser Eventlistener zugweisen kann man über this. auf das Element in der Funkton zugreifen sofern es keine Arrow Funktion ist. in einer Arrow Funktion kann man über das gute alte e.target, oder e.currentTarget auf das element zugreifen.
