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> </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.