Über Auswahllisten könnt ihr den Besuchern eine Liste von Einträgen anbieten, aus denen sie einen Eintrag auswählen können.

<select name="sprachen">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

<select name="sprachen">
   <option value="s1">HTML</option>
   <option value="s2">JavaScript</option>
   <option value="s3">CSS</option>
   <option value="s4">XML</option>
   <option value="s5">Java</option>
</select>

<select name="sprachen" size="3">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Enthält die Liste mehr Einträge, als angezeigt werden können, lässt sich die Liste scrollen.

Von Hause aus kann aus einer Auswahlliste nur jeweils ein Eintrag ausgewählt werden. Bei Bedarf lässt sich aber auch eine Mehrfachauswahl umsetzen.

<select name="sprachen" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

In Auswahllisten ist zunächst einmal kein Eintrag vorselektiert. Auch das lässt sich aber durch den Einsatz eines entsprechenden Attributs ändern.

<select name="sprachen" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option selected>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Radio-Buttons

<form action="form.php" method="post">
   <p>Willst Du den Newsletter abonnieren?:</p>
   <p>
    <input type="radio" name="newsletter" value="ja" /> Ja<br />
    <input type="radio" name="newsletter" value="nein" /> Nein
   </p>
</form>

<form action="form.php" method="post">
   <p>Willst Du den Newsletter abonnieren?:</p>
   <p>
    <input type="radio" name="newsletter" value="ja" /> Ja<br />
    <input type="radio" name="newsletter" value="nein" checked /> Nein
   </p>
</form>

Beachtet dabei, dass eine Vorauswahl nur bei einem Button einer Gruppe gemacht werden kann.

Checkboxen

Auch Checkboxen kennt ihr von unzähligen Formularen.





Dabei handelt es sich um eine Gruppe von ankreuzbaren Rechtecken, von denen die Anwender eines, keins oder mehrere auswählen können.

<p>Welche Themen interessieren dich noch?:</p>
  <p>
    <input type="checkbox" name="thema" value="html" /> HTML<br />
    <input type="checkbox" name="thema" value="css" /> CSS<br />
    <input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>

Versteckte Eingabefelder

<input type="hidden" name="id" value="">

Upload-Felder

Wenn ihr den Besuchern das Hochladen von Dateien erlauben wollt, könnt ihr ebenfalls ein entsprechendes Feld anbieten. Hier ein Beispiel dafür, wie eine entsprechende Anwendung aussehen kann:

<form action="form.php" method="post" enctype="multipart/form-data">
   <p>Deine Wahl:<br> <input name="Datei" type="file" /></p>
</form>

Schaltflächen zum Senden und Abbrechen

Damit die Formulardaten überhaupt verschickt werden können, braucht es natürlich eine entsprechende Schaltfläche.





Zum Absenden von Formularen verwendet man die folgende Syntax:

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

Das Gegenstück zu diesen Submit- sind Abbrechen-Schaltflächen.

Klickt man einen solchen Button an, werden sämtliche Formularinhalte gelöscht. Die Syntax für diese Schaltflächen sieht so aus:

<input type="reset" value="Abbrechen" />

<button name="klick" type="button" value="Überraschung" onclick="alert('Bist Du sicher?');">Klick mich an</button>