Skip to content

Instantly share code, notes, and snippets.

@kidsil
Created October 13, 2011 09:18
Show Gist options
  • Save kidsil/1283821 to your computer and use it in GitHub Desktop.
Save kidsil/1283821 to your computer and use it in GitHub Desktop.
The perfect Form Design
<html>
<head>
<style type="text/css">
label {
display:inline-block;
vertical-align:top; /* if you have a big text area, this would make the label stay at the top */
width:120px;
}
input,textarea {
display:inline-block;
width:150px;
}
</style>
</head>
<body>
<form>
<div class="form_row">
<label for="user">User</label>
<input type="text" id="user" />
</div>
<div class="form_row">
<label for="pass">Password</label>
<input type="text" id="pass" />
</div>
<div class="form_row">
<label for="email">Email</label>
<input type="text" id="email" />
</div>
</form>
</body>
@alexejk
Copy link

alexejk commented Oct 13, 2011

Why not use ol's and li's instead of divs with classes set? same effect, less code :D

@kidsil
Copy link
Author

kidsil commented Oct 14, 2011

you mind giving an example? I'm curious :)

@alexejk
Copy link

alexejk commented Oct 18, 2011

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment