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 noch 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 mußt 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:</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 manchen, komplexen Formularen ist es notwendig, Eingabe- und Titelbereichen optisch besser voneinander zu trennen. In dem 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>