JavaScript Grundkurs

Das Formularobjekt

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Film lernen Sie das Formularobjekt mit den Objekten für die enthaltenen Elemente kennen und Sie erlernen, wie Sie an die Inhalte der Formularelemente kommen.
04:33

Transkript

In diesem Film möchte ich Ihnen zeigen, wie sie auf Formulare in Webseiten mit Javascript zugreifen könnenTagname an. und damit kommen wir zu einem der wichtigsten Themen für JavaScript überhaupt, denn die Überprüfung von Formularen, war eine der Hauptmotivationen, warum JavaScript überhaupt entstanden ist. Der Kern für diese Techniken ist das Formularobjekt. Dieses ist als Bestandteil von document, entweder in Form von Objektfeldern verfügbar, oder aber Sie sprechen es über eine der klassischen Methoden, also die ID oder die Tagname an. Sie sehen jetzt hier ein entsprechendes Webformular, das verschiedene Formulartypen enthält. So sieht das Formular aus. Es ist nicht aufbereitet mit irgendwelchen Stylesheets oder Tabellen. Es zeigt eine nackte Struktur. Sie haben hier ein Eingabefeld, Sie haben mir diese Radiobutton, Sie haben eine Checkbox und Sie haben so eine Auswahlliste. Nun sehen Sie hier eine Zugriffsmöglichkeit auf ein Formular mit window.document.forms.0 sprechen Sie das erste Formular der Webseite an. Wie gesagt, natürlich jede andere Form ID, auch der Name im Fall von Formularen ginge. Unterhalb jedes Formulars gibt es ein weiteres Objektfeld Elements, das sind die gesamten Elemente in der Webseite und Sie sehen hier, dass ich sie der Reihe nach anspreche, also zuerst das Eingabefeld, dann das erste Optionsfeld, dann das zweite Optionsfeld, dann die Checkbox und dann der Auswahlliste; 01 bis entsprechend hier 4. Wir haben RS, also Nullindizierung. An die inhaltliche der Elemente kommen Sie eigentlich recht einfach. Die meisten Formularelemente stehen über Value zur Verfügung, also Eingabefelder jeglicher Art, alles was mit Input gemacht wird, aber auch Textarea oder oder auch wenn Sie Beschriftung von Button haben wollen. Wenn Sie an Radiobutton wollen, gibt es eine Eigenschaft checkt, die true oder false sein. Je nachdem, ob dieser Radiobutton selektiert ist, oder nicht und genau so auch für die Checkboxen. Und bei einer Auswahlliste bekommen Sie den selektierten Index. Zur Zeit befindet sich das Formular natürlich noch in einem nicht ausgefüllten Zustand und es ist doch etwas passiert, wasman normal nicht machen sollte. Beide Radiobutton sind nicht selektiert, das müssten Sie gegebenenfalls manuell machen. Das kann man mit HTML Machen, aber auch mit Javascript, aber es soll jetzt auch mal zeigen, was hier als Ergebnis rauskommt. Das heißt im Eingabefeld steht nichts drin und die beiden Radioboxen haben den Defaultwert false, die Chekbox auch. Und als Eintrag in der Auswahlliste ist der erste Eintrag ausgewählt mit der Nullindizierung, wenn ich jetzt etwas hier reinschreibe, dann sehen Sie, ich habe hier den Value, die erste Option ist ausgewählt, also steht die auf true. Die zweite ist nicht ausgewählt und Checkbox ist auch ausgewählt und ich habe den zweiten Eintrag hier in der Auswahlliste. Und jetzt ist die erste Option nicht true, aber dafür zweite. Die Checkbox ist auch deaktiviert und ich habe den dritten Eintrag in der Auswahlliste. Nun hat jedes Formularelement neben der Eigenschaft Elements auch noch die typischen Eigenschaften, die auch ein entsprechendes HTML Tag hätte. Also Action, Iincoding, Method, Name, wenn es gesetzt ist und Target. Das kennen Sie aus HTML nehme ich an. Vollkommen analog können wir das auch hier für ein Formularelement aus Javascripthaus nutzen. Welche Eigenschaften die spezifischen Elemente haben, hängt zum Teil vom Element selbst ab. Sie sehen hier die Eigenschaft checkt beispielsweise, die macht natürlich nur bei solchen Elementen Sinn, wo man überhaupt etwas an- und ausstellen kann. Also im Wesentlichen sind das Checkboxen und Radiobutton. Es gibt ja auch Defaultchekt, um beispielsweise bei so einem Radiobuttonpaar und auch mehrere Radiobuttons, die zusammengehören einen als Default zu selektieren. Sie können auch über Disabled festlegen, ob ein Element auszuwählen ist, oder nicht. Aber auch diese Eigenschaften ergeben sich aufgrund der natürlichen Attribute, die an jeweiliger Teck hat. So gibt es auf readonly und Sie können den Typ von einem Formularelemente bestimmen über Type. Sie sehen also, dass der grundsätzliche ihr Zugang zu einem Formular und seinen Elementen über das Formobjekt, egal wie Sie es anprechen, über Objektfelder oder Tags oder IDs oder dem Namen sehr einfach ist.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!