Forms are not sexy but they don’t have to be ugly. Here’s the example we worked out in class on Thursday, where a little effort can make a form a lot more readable:
<html>
<head>
<title>layout for forms</title>
<style type="text/css">
span.label {
float: left;
text-align: right;
width: 100px;
padding-right: 5px;
}
div.row {
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1>please fill out this form</h1>
<form>
<div class="row">
<span class="label">name:</span>
<input type="text" size="15" />
</div>
<div class="row">
<span class="label">password: </span>
<input type="password" size="15" />
</div>
<div class="row">
<span class="label">comment:</span>
<textarea rows="5" cols="40"></textarea>
</div>
<div class="row">
<span class="label"> </span>
<input type="submit" value="Send the form" />
</div>
</form>
</body>
</html>
Add your comment below, or trackback from your own site.
Subscribe to these comments.
Be nice. Keep it clean. Stay on topic. No spam.
You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>