Achtung!

Der Webbaukasten wird nicht mehr aktiv betreut und nicht mehr weiter entwickelt. Verwenden Sie stattdessen das CMS-Angebot des RRZE.
Die Dokumentation des CMS-Angebotes finden Sie auf der Website wordpress.rrze.fau.de.

Standardformulare

Das Beispiel enthält alle gebräuchlichen Elemente in korrektem Markup. Da die Browser sich bei der Darstellung von Formularen teilweise erheblich unterscheiden, kann es für einige Layouts erforderlich sein, den Zugriff des Stylesheets auf einzelne Elemente zusätzlich über IDs oder Klassen abzusichern.

Angaben zur Person

Hast du schon bei uns gekauft?

Deine Musikinteressen

Pop
Folk
Jazz
Schlager
Klassik

Die Darstellung im HTML-Code:

<form method="post" action="#">
<div>
<fieldset>
<legend>Angaben zur Person</legend>
<div class="abstand">
<p>
<label for="vorname">Vorname</label>
<input type="text" name="vorname" value="" id="vorname" size="34" title="Hier gibst du Deinen Vornamen ein" />
</p>
<p>
<label for="nachname">Familienname</label>
<input type="text" name="nachname" value="" id="nachname" size="34" title="Hier gibst du Deinen 						Familiennamen ein" />
</p>
<p>
<label for="ort">Wohnort</label>
<input type="text" name="ort" value="" id="ort" size="34" title="Hier gibst du Deinen Wohnort ein" />
</p>
</div>
</fieldset>
<fieldset>
<legend>Hast du schon bei uns gekauft?</legend>
<div class="abstand">
<p>
<input type="radio" name="kunde" id="kundemonat" />			
<label for="kundemonat">Im vergangenen Monat</label>
</p>
<p>
<input type="radio" name="kunde" id="kundejahr" />	
<label for="kundejahr">Im vergangenen Jahr</label>	
</p>	
<p>	
<input type="radio" name="kunde" id="kundenein" />		
<label for="kundenein">Nein, noch nie</label>			
</p>	
</div>
</fieldset>
<fieldset>
<legend>Deine Musikinteressen</legend>
<div class="abstand">
<p>
<label for="liebling">Hier musst Du Dich für einen Star entscheiden:</label>
</p>
<p>
<select name="liebling" id="liebling" size="1">
<option>Louis Armstrong</option>
<option>Heino</option>
<option>Michael Jackson</option>
<option>Tom Waits</option>
<option>Nina Hagen</option>
<option>Marianne Rosenberg</option>
</select>
</p>
<label for="interessen">Hier kannst Du mehrere Möglichkeiten ankreuzen:</label>
<p id="interessen">
<input type="checkbox" name="interessen" value="Pop" /> Pop<br />
<input type="checkbox" name="interessen" value="Folk" /> Folk<br />			
<input type="checkbox" name="interessen" value="Jazz" /> Jazz<br />	
<input type="checkbox" name="interessen" value="Schlager" /> Schlager<br />
<input type="checkbox" name="interessen" value="Klassik" /> Klassik<br />						
</p>
<p>
<label for="zusatz">Wenn du uns sonst noch etwas über Deine Wünsche und Erwartungen an unser Programm mitteilen willst, kannst du dies hier tun:</label>
</p>
<p>
<textarea rows="10" cols="40" name="zusatz" id="zusatz" title="Hier kannst Du zusätzliche Bemerkungen eingeben"></textarea>
</p>
</div>
</fieldset>
<p>
<input id="submit1" type="submit" value="Formular absenden" />
<input type="hidden" name="formsubmit" value="musikfreund" />
</p>
</div>
</form>                   

Komplexere Formulare mit definierten Titel- und Eingabebereichen

Bei komplexen Formularen ist es oft notwendig, Eingabe- und Titelbereiche optisch besser voneinander zu trennen. In diesem Fall werden im Sourcecode noch einige DIVS ergänzt, damit die Semantik eindeutig ist.

Angaben zur Person

Die Darstellung im HTML-Code:

<form method="post" action="#">
<div>
<fieldset>
<legend>Angaben zur Person</legend>
<div class="abstand">
<div class="zeile">
<div class="datenart">
<label for="vorname2">Vorname</label>
</div>
<div class="eingabe">
<input type="text" name="vorname" value="" id="vorname2" size="34" title="Hier gibst du Deinen Vornamen ein" />
</div>
</div>
<div class="zeile">
<div class="datenart">
<label for="nachname2">Familienname</label>
</div>
<div class="eingabe">
<input type="text" name="nachname" value="" id="nachname2" size="34" title="Hier gibst du Deinen Familiennamen ein" />
</div>
</div>
</div>
</fieldset>
</div>
<form> 
	

Typnamen bei speziellen Input-Typen

Spezielle Eingabefelder können optional mit Klassennamen (die gleich dem Typnamen sind) versehen werden, damit sie mittels CSS genauer angesteuert werden können. Diese Angabe dient im wesentlichen dazu, optische Darstellungsprobleme in den Browsern Opera und IE abzumildern.

Folgende Typen sind möglich:

  • class="radio"
  • class="checkbox"
  • class="submit"
  • class="reset"
  • class="button"

Suche-Formular

Für eine einfache Suche kann auf das Fieldset verzichtet werden. Es ist jedoch hilfreich, wenn die Suche für Anwender von AT durch eine eigene Sprungmarke leicht erreichbar gemacht wird.

Die Darstellung im HTML-Code:

<form method="get" action="#">
<div>
<input name="suchbegriff" type="text" value="Suchbegriff eintragen" maxlength="100" />
<input type="submit" value="suchen" />
</div>
</form>