Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Beschreibung:

Formulare sind beliebt - keine Frage. Aber: welche Felder gibt es überhaupt und wie wertet man das Ergebnis aus.

Einleitender Tag für alle Formulare ist:

<form
name="JavaScript Bezeichnung des Formulars"
onSubmit="Skript, dass nach Versand ausgeführt wird">

statt "name" können sie auch "id" verwenden - für eine CGI-Auswertung, die wir hier jedoch einmal außen vor lassen wollen, kommen außerdem "action" und "method" hinzu

typische Formularfelder:

Textfeld (einzeilig):

<input
type="text"
size="Breite in Zeichen"
name="JavaScript Bezeichnung"
value="Startwert des Feldes"
{readonly}>

Skript: ergebnis = document.NameDesFormulars.NameDesFormularfelds.value

"readonly"* zeigt an, dass der Nutzer nicht in dieses Feld schreiben darf - JavaScript kann dies jedoch tun
* Angaben in {} sind optional.

Passwortfeld:

<input
type="password"
size="Breite in Zeichen"
name="JavaScript Bezeichnung"
value="Startwert des Feldes">

Skript: ergebnis = document.NameDesFormulars.NameDesFormularfelds.value

in früheren Versionen des Netscape Navigator ist dieser Wert für JavaScript nur lesbar, in einigen Versionen ist jedoch selbst das nicht möglich - diese Funktionsweise ist also nur im MSIE gesichert

Textfeld (mehrzeilig):

<textarea
rows="Höhe in Zeilen"
cols="Breite in Zeichen"
name="JavaScript Bezeichnung"
{readonly}>
Startwert des Feldes
</textarea>

Skript: ergebnis = document.NameDesFormulars.NameDesFormularfelds.value

* Angaben in {} sind optional.

Dropdownfeld:

1 2

<select
size="Höhe in Zeilen"
name="JavaScript Bezeichnung"
{multiple} >
<option
value="Wert des 1. Feldes" {selected}>Beschreibung des 1. Feldes
</option>
<option
value="Wert des 2. Feldes" {selected}>Beschreibung des 2. Feldes
</option>
[...]
</select>

Skript:
ausgewaehlt = document.Formular.Formularfeld.selectedIndex
ergebnis = document.Formular.Formularfeld.options[ausgewaehlt].value

"multiple"* zeigt an, dass mehrere Elemente ausgewählt sein dürfen;
"selected"* zeigt an, dass ein Feld ausgewählt ist
* Angaben in {} sind optional.

Checkbox:

<input
type="checkbox"
value="Rückgabewert, falls die Box ausgewählt ('angekreuzt') ist"
{checked} >

Skript:
ergebnis = document.NameDesFormulars.NameDesFormularfelds.checked

"checked"* zeigt an, dass diese Option "angekreuzt", also aktiviert ist.
der Test gibt "true" bzw. "false" zurück, je nachdem, ob die Checkbox aktiviert ist oder nicht.
* Angaben in {} sind optional.

Radio-Button:

A)   B)

1. Möglichkeit: Falls sie nur prüfen wollen, ob eine bestimmte Option gewählt ist...

<input
type="radio"
name="Name der Gruppe"
value="Rückgabewert, falls die Option gewählt ist"
{checked} > Option A)
<input
type="radio"
name="Name der Gruppe"
value="Rückgabewert, falls die Option gewählt ist"
{checked} > Option B)
[...]

Skript:
ergebnis = document.Formular.Gruppe[NummerDesRadioButtons].checked

Der Test gibt "true" bzw. "false" zurück, je nachdem, ob der Button ausgewählt ist oder nicht.

2. Möglichkeit: Falls sie den Wert der gerade ausgewählten Option brauchen oder wissen wollen welche Option gewählt wurde...

<input
... wie oben ...
onClick="document.FormularName.NameDerGruppe.selectedIndex='0'">
<input
... wie oben ...
onClick="document.FormularName.NameDerGruppe.selectedIndex='1'">
[...]

Es gibt für RadioButtons, trotz der Verwandtschaft zum Dropdownfeld keine vordefinierte Eigenschaft, welche die ausgewählte Option darstellt. Das haben wir hier umgangen, indem wir diese Eigenschaft ergänzt haben.

Skript:
ausgewaehlt = document.Formular.Formularfeld.selectedIndex
ergebnis = document.Formular.Gruppe[ausgewaehlt].value

Somit haben wir den Rückgabewert des ausgewählten Formularfelds analog zu Dropdownfeldern extrahiert

Schaltflächen:

<input
type="button"
value="Beschriftung des Buttons"
onClick="Skript, dass bei Anklicken ausgeführt wird">

spezielle Schaltflächen:

Eingabe bestätigen

<input
type="submit"
value="Beschriftung des Buttons">

Formulareingaben löschen

<input
type="reset"
value="Beschriftung des Buttons">

spezielle Formularfelder:

versteckte Felder

(diese Felder können ergänzende Werte speichern, die der Nutzer nicht sehen soll)

<input
type="hidden"
name="JavaScript Bezeichnung"
value="Wert des Feldes">

Skript:
ergebnis = document.NameDesFormulars.NameDesFormularfelds.value

Upload-Felder

(können weder gelesen noch geschrieben werden - eine Auswertung ist nur durch den Server über CGI möglich)

<input
type="file"
name="Bezeichnung">

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: