Formulare

XHTML-Tags für Formulare

Formulare haben mit XHTML einige neue Tags bekommen, um sie genauer bzw. bequemer formatieren und ansteuern zu können.

Tag wichtige Attribute Bedeutung
<form>…</form> action, method Innerhalb der Tags befindet sich das Formular.
action: Zieldatei des Formulars beim Absenden, method: Methode der Datenübermittlung (POST oder GET)
<fieldset>…</fieldset> - Fasst verschiedene Felder eines Formulars zu einem Block zusammen
<legend>…</legend> - Gibt dem <fieldset> eine Bezeichnung, die angezeigt wird
<label>…</label> for Darin wird zur besseren Verwendung, u.a. mit CSS, die für den Nutzer sichtbare Bezeichnung des Feldes geschrieben.
for: Muss dem Attributwert „id“ des input-Felds entsprechen
<input /> type, name, id, size Eingabeelement
type: Feldtyp (z.B. text), name: eindeutige Bezeichnung für PHP, id: eindeutige Bezeichung für HTML/CSS/JS, size: Größe des Feldes

Gestaltung mit CSS

Durch die Verwendung der oben genannten Tags und ihrer Attribute hat man mit CSS sehr viele Möglichkeiten, Formulare zu gestalten. Es können alle allgemeinen, also nicht-spezifischen (wie z.B. list-style-type - außer natürlich es werden Listen im Formular verwendet) CSS-Eigenschaften angewandt werden.

Anzeigebeispiel - So sieht's aus: formular.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>legend und fieldset</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
<form action="#" method="post">
<fieldset><legend>Absenderangaben</legend>
<label for="vorname" class="text">Vorname:</label>
<input type="text" name="vorname" id="vorname" size="20" maxlength="40" /><br />
<label for="nachname" class="text">Nachname:</label>
<input type="text" name="nachname" id="nachname" size="20" maxlength="40" />
</fieldset>
</form>
 
</body>
</html>
body {
	font-family: Verdana, Helvetica, sans-serif; 
	font-size: 0.8em;
}
 
 
fieldset {
	border: 2px solid green;
	background-color: lightgreen;
	line-height: 1.8em;
	width: 22em;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
}
 
legend {
	border: 1px solid black;
	font-weight: bold;
	background-color: darkgreen;
	color: white;
	line-height: 1.4em;
	-moz-border-radius: 3.5px;
	-webkit-border-radius: 3.5px;
	-khtml-border-radius: 3.5px;
	border-radius: 3.5px;
}
 
label {
	float: left;
	text-align: right;
	width: 7em;
	margin-right: 1em;
	white-space: pre;
}
 
br {
	clear: left;
}