Formulare gestalten in CSS

Das HTML dazu

<form method="post" action="#">
 
	<p>
		<label for="name">Ihr Name:</label>
		<input type="text" name="name" id="name" />
	</p>
	<p>
		<label for="mail">Ihre E-Mailadresse:</label>
		<input type="text" name="mail" id="mail" />
	</p>
	<p>
		<label for="nachricht">Anfrage:</label>
		<textarea rows="" cols="30" name="nachricht" id="nachricht"></textarea>
	</p>
	<p>
		<label>&nbsp;</label>
		<input type="submit" name="submit" value="Absenden" />
		<input type="reset" name="submit" value="Zurücksetzen" />
	</p>
</form>

Formatierung mithilfe von CSS

label {
	width: 140px;		/* Wichtig: Feste breite */
	float: left;		/* Wichtig: Links gefloatet */
	display: block;		/* Wichtig: Blockelemnt */
}
 
input[type="text"], input[type="password"], textarea {
	font-size: 15px;
	padding: 3px;
	/* weitere Formatierungen */
}
 
textarea { min-height: 100px; }
 
select {
	font-size: 15px;
	padding: 3px;
	/* weitere Formatierungen */
}
 
input[type="submit"], input[type="button"], input[type="reset"] {
	font-size: 15px;
	/* weitere Formatierungen */
}

Vorschau

Die Selektoren sind im Beispiel bereits vorgegeben und auch die Positionierung wurde grundlegend vordefiniert. Natürlich kann man das Formular nun beliebig gestalten mit Rahmenlinien, Farben, Schriftarten, Schatten, etc.