Einführung / XHTML / Formulare

Strukturen
Sonderzeichen mit Entities umschreiben

Formulare: Das Element form

Formulare begegnen Ihnen im World Wide Web, wenn Sie sich irgendwo anmelden wollen, wenn Sie einen Fragebogen ausfüllen, wenn Sie eine Bestellung abgeben und bei vielen Gelegenheiten mehr.

• Formulare sind Abschnitte einer Website, die Elemente, die Sie bisher kennen gelernt haben, zusammen mit so genannten Kontrollelementen enthalten. Benutzer füllen Formulare durch das Editieren oder Bedienen der Kontrollelemente aus und senden es ab.

Das Auslesen und Verarbeiten der Daten kann XHTML jedoch nicht leisten. Hier kommen server- und clientseitige Programmier- oder Skriptsprachen zum Einsatz.

• Ein Formular beginnt immer mit <form> und wird mit dem Tag </form> geschlossen. Das einleitende <form>-Tag enthält ein Attribut action, mit dem Sie angeben, welcher URL nach dem Absenden geöffnet wird. Mit dem Attribut method geben Sie die Übertragungsmethode an, dies kann unter anderem post oder get sein. Bei get werden die Daten an den URL angehängt und erscheinen in der Adresszeile, bei post werden die Daten dem Server über den Standardeingabekanal zur Verfügung gestellt, der sie an ein Programm weiterleitet. Innerhalb des form-Elementes befinden sich dann alle anderen Auszeichnungs- und Kontrollelemente.

Ein Beispiel:

<form action="http://domain.tld/cgi-bin/formmailer.pl" method="get">
   <!-- Formularinhalt -->
</form>

Kontrollelemente

Folgende Kontrollelemente stehen Ihnen zur Verfügung:

Buttons: Die Elemente input und button

Sie können drei Arten von Buttons erstellen:

Submit-Buttons

Ein Submit-Button sendet ein Formular ab. Formulare können mehr als einen Submit-Button enthalten.

Reset-Buttons

Ein Reset-Button setzt alle Eingaben eines Formulars zurück.

Druck-Buttons

Ein Druck-Button (oder einfach nur »Button«) zeigt kein festgelegtes Verhalten. Durch ihn können zum Beispiel clientseitige Skripts ausgeführt werden.

• Buttons werden durch das leere Element input erstellt. Mit dem Attribut type geben Sie die Art des Buttons an, zum Beispiel type="reset" oder type="button". Die Beschriftung des Buttons bestimmen Sie durch das Attribut value.

<input type="submit" value="Absenden" />

Felder für den Datei-Upload

• Ein Feld für den Datei-Upload zeichnen Sie durch das Element input als type="file" aus. Der User-Client sollte dann ein einzeiliges Eingabefeld mit Druck-Button anzeigen, wodurch eine Datei ausgewählt werden kann. Zusätzlich sollten Sie das Attribut enctype="multipart/form-data" im <form>-Tag angeben.

<form action="beispiel.html" enctype="multipart/form-data">
  <input type="file" />
  <!-- Weitere Auszeichnungs- und Kontrollelemente -->
</form>

Checkboxen und Radiobuttons

• Checkboxen sind Felder, von denen der Benutzer keines, eines oder mehrere ankreuzen kann. Radiobuttons dagegen sind eine Gruppe von Knöpfen, von denen der Benutzer nur genau einen pro Gruppe auswählen kann.
• Beide Buttons werden ebenfalls durch das leere Element input gebildet. Radiobuttons erhalten Sie durch type="radio", Checkboxen durch type="checkbox". Ihnen ist gemeinsam, dass sie einen internen Namen name und einen internen Bezeichnerwert value erhalten müssen. Diese Angaben werden für das auswertende Programm benötigt. Radiobuttons können sie mit selected="selected" und Checkboxen mit checked="checked" vorselektieren.

<form action="http://send.beispiel.de" method="get">
<p>Ich möchte Informationen zu:<br />
   <input type="checkbox" name="info" value="xhtml" checked="checked" /> HTML<br />
   <input type="checkbox" name="info" value="css" checked="checked" /> CSS
</p>
<p>Ich bezeichne mich als:<br />
   <input type="radio" name="status" value="anf" /> Anfänger<br />
   <input type="radio" name="status" value="fort" /> Fortgeschrittener<br />
   <input type="radio" name="status" value="pro" checked="checked" /> Profi
</p>
  <!-- Weitere Auszeichnungs- und Kontrollelemente -->
</form>

Auswahllisten: Die Elemente select und option

• Auswahllisten sind Listen, aus denen sie einen Punkt oder mehrere Punkte per Anklicken auswählen können. <select>leitet eine Auswahlliste ein, </select> beendet das Element. Mit dem Attribut size bestimmen Sie, wie viele Einträge angezeigt werden sollen. Sind es mehr, als sie angeben, wird gescrollt. Eine Drop-Down-Liste erreichen Sie, wenn Sie size="1" definieren. Zwischen <option> und </option> stehen jeweils die einzelnen Listenpunkte. Standardmäßig kann der Anwender einen Eintrag selektieren. Soll er mehrere Einträge auswählen können, geben Sie für selectdas Attribut multiple="multiple" an. Mit selected="selected" können Sie Einträge vorselektieren.

<form action="http://send.beispiel.de" method="get">
<select size="1" name="beispiel">
<option value="">bitte wählen...</option>
<option value="a" selected="selected">Punkt 1</option>
<option value="b">Punkt 2</option>
<option value="c">Punkt 3</option>
<option value="d">Punkt 4</option>
</select>
  <!-- Weitere Auszeichnungs- und Kontrollelemente -->
</form>

Textfelder: Die Elemente input und textarea

• Ein einzeiliges Eingabefeld erhalten Sie durch das leere Element input mit type="text". Damit die Eingaben ausgewertet werden können, muss jedes Eingabefeld einen internen Bezeichnernamen erhalten, den sie mit dem Attribut name vergeben.

  Zusätzlich können Sie noch folgende optionale Attribute verwenden:

  • Mit length bestimmen Sie die Zeichenlänge des Textfeldes.
  • Mit maxlength begrenzen Sie die Anzahl der möglichen Zeichen.
  • Mit value geben Sie einen Text an, der innerhalb des Textfeldes angezeigt wird.

Hier sehen Sie ein Quelltextbeispiel für ein einfaches Textfeld:

<form action="http://send.beispiel.de/" method="post">
Name:<br />
<input type="text" name="Name" size="55" maxlength="55" />
  <!-- Weitere Auszeichnungs- und Kontrollelemente -->
</form>

• Mehrzeilige Eingabefelder werden mit dem Tag <textarea> eingeleitet und mit dem Tag </textarea> geschlossen. Auch hier muss ein interner Name vergeben werden. Die Breite und Höhe des Textfeldes in Zeilen und Anzahl der Zeichen pro Zeile bestimmen Sie mit rows und cols. Wenn Sie einen Elementinhalt eingeben, erscheint er im Eingabefeld.

Auch hier ein Beispiel:

<form action="http://send.beispiel.de/" method="post">
<textarea cols="50" rows="10" name="eingabe">Ihre Nachricht...</textarea>
  <!-- Weitere Auszeichnungs- und Kontrollelemente -->
</form>

Strukturen
Sonderzeichen mit Entities umschreiben
Zum Seitenanfang