Beispiel: Formular àla CSS
Es gibt sehr viele Anleitungen da draussen im Netz, wie Formulare am besten per CSS zu formatieren seien.
Mir war es wichtig, nicht zuviel Markup zu benötigen und trotzdem eine schöne Lösung zu finden.
Aus diversen anderen Ansätzen wäre das ein möglicher:
Code:
<html>
<head>
<title>Test Formular</title>
<style type="text/css">
fieldset {
margin-bottom: 8px;
padding: 8px;
}
input, textarea {
display: block;
float: left;
margin-top: 0.6em;
padding: 2px;
width: 18em;
height: 2em;
}
input, textarea, button {
background: url(input_bg.gif) repeat-x bottom;
}
textarea {
height: 8em;
}
br {
clear: left;
}
label {
width: 4em;
padding: 5px;
float: left;
line-height: 2em;
}
.rechteBox {
float: right;
text-align: left;
border: 1px dotted gray;
padding: 8px;
height: 100px;
width: 180px;
}
</style>
</head>
<body>
<form id="aspnetform" method="post">
<fieldset>
<legend>Persönlich</legend>
<label for="txtName">Name:</label>
<br type="text" id="txtName" name="txtName" />
<label for="txtAlter">Alter:</label>
<br type="text" id="txtAlter" name="txtAlter" />
<label for="txtText">Text:</label>
</textarea id="txtText" cols="20" name="txtTest">
</fieldset>
<fieldset>
<legend>Internet</legend>
<label for="txtBlog">Blog:</label>
<br type="text" id="txtBlog" name="txtBlog" />
<label for="txtWebsite">Website:</label>
<br type="text" id="txtWebsite" name="txtWebsite" />
</fieldset>
<fieldset>
<legend>Abschluss</legend>
<div class="rechteBox">
<h3>InfoBox</h3>
<p>
Das ist ein Beispiel.
</p>
</div>
<label for="txtSicherheitscode">4 + 7 =</label>
<br type="text" id="txtSicherheitscode" name="txtSicherheitscode" />
</label>
<input type="submit" name="btnSubmit" value="Formular absenden..." />
</fieldset>
<div style="clear: both;" />
</form>
</body>
</html>