Diesen Tipp in Originalversion zeigen.

10. Formulare [2]

Nun kennen Sie bereits die wichtigsten Formularelemente, die sich mit einem <input>-Tag erzeugen lassen.
Jedoch gibt es noch weitere Formularelemente, die nicht mit einem <input>-Tag erzeugt werden können, wie z. B. ein Auswahlfeld.
Ein Auswahlfeld wird mit einem eigenem Tag dafür, nämlich mit einem <select>-Tag erzeugt. Der <select>-Tag muss geschlossen werden!

Der <select>-Tag unterstützt wie der <input>-Tag das Attribut "name", welches dem Formularfeld einen eindeutigen Namen zuweist.
In den <select>-Tag hinein kommen dann die eigentlichen Auswahlmöglichkeiten, die mit einem <option>-Tag im Code erzeugt werden.
Dabei funktioniert das Prinzip ganz ähnlich wie bei den Radioboxen: Die einzelnen Auswahlmöglichkeiten bekommen über das "value"-Attribut unterschiedliche Werte zugewiesen, wobei der "value"-Wert der Auswahlmöglichkeit übertragen wird, die der Benutzer ausgewählt hat.
Somit wird es möglich später bei der Auswertung festzustellen, welche Möglichkeit der Benutzer ausgewählt hat. Der <option>-Tag muss auch geschlossen werden. Der Text, den der Benutzer zum Auswählen sieht, kommt in den <option>-Tag.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel für ein Auswahlfeld</title>
</head>
<body>
<select name="beispiel">
<option value="xyz">Ja?</option>
<option value="abc">Nein!</option>
<option value="d">Wie bitte?</option>
<option value="ef">Ich weiß nicht.</option>
</select>
</form>
</body>
</html>
  > Listing 10.1: Ein Auswahlfeld mit vier Auswahlmöglichkeiten (Online-Beispiel / Download)

Möchten Sie nicht nur einzeilige Textfelder, sondern mehrzeilige Textfelder erstellen? Mit dem <textarea>-Tag können Sie mehrzeilige Textfelder erstellen.
Das "cols"-Attribut gibt die Anzahl der Zeichen an, die in eine Zeile des mehrzeiligen Textfeldes passen soll und das "rows"-Attribut definiert die Anzahl der Zeilen, über die das Textfeld geht.
Wie bei den anderen Formularfeldern auch definiert das "name"-Attribut, das in den <textarea>-Tag kommt einen eindeutigen Namen für das Formularfeld.
Der <textarea>-Tag muss geschlossen werden, zwischen dem geöffneten und geschlossenen Tag kommt dann der Ursprungs-Wert, der beim Aufrufen der Seite in dem Textfeld erscheint (vergleichbar mit dem "value"-Attribut bei <input>-Tags).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel für eine mehrzeilige Textbox</title>
</head>
<body>
<textarea cols="50" rows="10">Ein Beispiel</textarea>
</form>
</body>
</html>
  > Listing 10.2: Eine mehrzeilige Textbox (Online-Beispiel / Download)

Weitere wichtige Attribute für den <input>-Tag:

"maxlength" definiert bei einzeiligen Text- und Passwortfeldern die maximale Länge an Zeichen, die eingegeben werden darf.

"readonly" ist das erste Attribut, welches Sie lernen, welches keinen zugewiesenen Wert hat. D. h. es wird einfach nur in den <input>-Tag hineingeschrieben, ohne Wertzuweisung (Beispiel: <input type="text" value="Test" readonly>).Bei einer Checkbox, Radiobox und dem Absende-Button wird der in "value" angegebene Wert beim Absenden des Formulars je nach Benutzereingaben übermittelt. Es darf nur bei einzeiligen Text- und Passwortfeldern, sowie mehrzeiligen Textfeldern eingesetzt werden.

"size" gibt die dargestellte Größe (gemessen in Zeichen) eines einzeiligen Text- und Passwortfeldes an.

"checked" legt bei Radio- und Checkboxen fest, ob das Element standardmäßig (beim Aufrufen) markiert ist. Wie das "readonly"-Attribut wird auch diesem Attribut kein Wert definiert. Bei Radioboxen darf nur jeweils ein Feld einer Gruppe (Radioboxen, die denselben Namen haben) dieses Attribut zugewiesen bekommen.

Bei einem Absende-Button gibt das "value"-Attribut die angezeigte Aufschrift auf dem Button an.

Im Folgenden ein Beispiel mit allen Formularfeldern und Attributen, die Sie kennen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Formular-Beispiel</title>
</head>
<body>
<form action="http://www.htmltut.de/verarbeitende_datei.php" method="post">
Ausgewählt: <input type="text" name="ausgewaehlt" value="Kategorie 7" readonly><br><br>
Vorname: <input type="text" name="vorname" value="Vorname" size="30" maxlength="22"><br><br>
Passwort: <input type="password" name="pass" value="Passwort"size="20" maxlength="15"><br><br>
Macht es Spaß? <input type="checkbox" value="spass" checked><br><br>
Wählen Sie Ihr Geschlecht: <input type="radio" name="geschlecht"> männlich | <input type="radio" name="geschlecht" checked> weiblich<br><br>
Wählen Sie Zutreffendes: <select name="beispiel">
<option value="xyz">Ja?</option>
<option value="abc">Nein!</option>
<option value="d">Wie bitte?</option>
<option value="ef">Ich weiß nicht.</option>
</select><br><br>
Geben Sie bitte einen Kommentar ab:<br><br>
<textarea cols="50" rows="10">Ihr Kommentar</textarea><br><br>
<input type="submit" value="Absenden">
</form>
</body>
</html>
  > Listing 10.3: Formular-Beispiel mit allen bereits bekannten Formularfeldern (Online-Beispiel / Download)

ZusammengefasstEin Auswahlfeld wird mit einem <select>-Tag erstellt.
Die einzelnen Auswahlmöglichkeiten werden dann mit Hilfe von <option>-Tags erzeugt.
Über das "value"-Attribut bekommen die Auswahlmöglichkeiten eindeutige Namen zugewiesen. Der "value"-Wert des ausgewählten Feldes wird beim Absenden des Formulars mitgesendet, sodass sich später erkennen lässt, welche Möglichkeit ausgewählt wurde.
Mehrzeilige Textfelder können mit dem <textarea>-Tag erstellt werden. Das &value;cols"-Attribut gibt die Anzahl der Zeichen an, die in einer Zeile des Textfeldes dargestellt werden und das "rows"-Attribut legt die Anzahl der Zeilen fest, über die das Textfeld geht.
Für <input>-Tags gibt es weitere wichtige Attribute: "maxlength" gibt die maximale Textlänge (in Zeichen) in einem einzeiligen Text- bzw. Passwortfeld an. "readonly" (ohne Zuweisungswert) legt fest, dass das Element nur angesehen werden darf (einzeilige Text- bzw. Passwortfelder und mehrzeilige Textfelder). "size" definiert die maximale Größe (in Zeichen) eines einzeiligen Text- bzw. Passwortfeldes. "checked" (ohne Zuweisungsfest) legt bei Radio- und Checkboxen fest, ob sie beim Aufruf der Seite markiert sind.
Der im "value"-Attribut angegebene Wert bei Absende-Buttons entspricht der angezeigten Aufschrift.

Weiter zu Teil 11 (Übungen [2]) > (as)


Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign171.html