legend und fieldset

====== 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 ^ | | action, method | Innerhalb der Tags befindet sich das Formular.| | | | **action:** Zieldatei des Formulars beim Absenden, **method:** Methode der Datenübermittlung (POST oder GET)| |

...

| - | Fasst verschiedene Felder eines Formulars zu einem Block zusammen | | ... | - | Gibt dem

eine Bezeichnung, die angezeigt wird | | ... | 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 | | | 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. [[http://elearn.bgamstetten.ac.at/info/CSS/formular.html|Anzeigebeispiel - So sieht's aus: formular.html]]






legend und fieldset





Absenderangaben
Vorname:


Nachname:


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;
}