Lets be honest, I’m a coder not a designer. And like many coders who are not designers, I use Twitter Bootstrap a lot. It’s a great framework that works really well, but sometimes I get frustrated by the amount of mark-up I end up adding to style my forms.
Take the following login form example:
<div class="container">
<h2>A simple login form</h2>
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text"
class="form-control"
id="username">
<p class="help-block">
Hint: it might be your email address</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
class="form-control"
id="password">
</div>
<div>
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit"
class="btn btn-default">Login</button>
</form>
</div>
I guess that’s pretty straightforward and the end result isn’t bad – something like this:
A Bootstrap Login Form
But on a more complex form I don’t like all of my input fields to be the same width – I like the field widths to reflect the type of content that will go into those fields. It’s hard to create a good example that doesn’t require a huge amount of sample code here, but let’s change my login example to be a registration form. I’m not suggesting this is a good registration form, but say I wanted to capture:
- An email address that doubles as a username
- A password
- A first name and a last name
- A personal question and answer for resetting a password later
An email address can be fairly long – say 25-30 characters? First names, last names (surnames) and your average password are probably not so long, but I can live with those form elements lining up with the email address field. On the other hand, if the user is going to type a question and an answer to that question, the length of those could be much longer. So I’m going to end up with a form that looks something like this:
A Bootstrap Registration Form
Unfortunately that results in a good few extra “div” elements and grid column classes. Here’s the code:
<div class="container">
<h2>A simple registration form</h2>
<form>
<div class="form-group">
<label for="email">Email address</label>
<div class="row">
<div class="col-xs-3">
<input type="text"
class="form-control"
id="email">
</div>
</div>
<p class="help-block">
This will also act as your login username</p>
</div>
<div class="form-group">
<label for="password">Password</label>
<div class="row">
<div class="col-xs-3">
<input type="password"
class="form-control"
id="password">
</div>
</div>
</div>
<div class="form-group">
<label for="first">First name</label>
<div class="row">
<div class="col-xs-3">
<input type="text"
class="form-control"
id="first">
</div>
</div>
</div>
<div class="form-group">
<label for="last">Last name</label>
<div class="row">
<div class="col-xs-3">
<input type="text"
class="form-control"
id="last">
</div>
</div>
</div>
<div class="form-group">
<label for="question">Your secret question</label>
<div class="row">
<div class="col-xs-9">
<input type="text"
class="form-control"
id="question">
</div>
</div>
<p class="help-block">
This will be used if you need to reset your password</p>
</div>
<div class="form-group">
<label for="answer">Answer to your secret question</label>
<div class="row">
<div class="col-xs-9">
<input type="text"
class="form-control"
id="answer">
</div>
</div>
</div>
<button type="submit"
class="btn btn-primary">Register</button>
</form>
</div>
And what happens if I decide to change my form layout to be horizontal? Well that involves a fair amount of work because it involves significantly different mark-up. Here’s my registration form marked up for a horizontal layout:
<div class="container">
<h2>A horizontal registration form</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="email"
class="col-xs-2 control-label">Email address</label>
<div class="col-xs-3">
<input type="text"
class="form-control"
id="email">
</div>
<p class="help-block col-xs-offset-2 col-xs-8 clearfix">
This will also act as your login username</p>
</div>
<div class="form-group">
<label for="password"
class="col-xs-2 control-label">Password</label>
<div class="col-xs-3">
<input type="password"
class="form-control"
id="password">
</div>
</div>
<div class="form-group">
<label for="first"
class="col-xs-2 control-label">First name</label>
<div class="col-xs-3">
<input type="text"
class="form-control"
id="first">
</div>
</div>
<div class="form-group">
<label for="last"
class="col-xs-2 control-label">Last name</label>
<div class="col-xs-3">
<input type="text"
class="form-control"
id="last">
</div>
</div>
<div class="form-group">
<label for="question"
class="col-xs-2 control-label">Question</label>
<div class="col-xs-9">
<input type="text"
class="form-control"
id="question">
</div>
<p class="help-block col-xs-offset-2 col-xs-8 clearfix">
This will be used if you need to reset your password</p>
</div>
<div class="form-group">
<label for="answer"
class="col-xs-2 control-label">Answer</label>
<div class="col-xs-9">
<input type="text"
class="form-control"
id="answer">
</div>
</div>
<div class="row">
<div class="col-xs-offset-2 col-xs-9">
<button type="submit"
class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
And here’s how that looks:
A Horizontal Bootstrap Registration Form
Is it just me or does that all seem a bit too difficult?
These examples are fairly trivial, but once you get into more complex forms I just find it all a bit painful. Of course code generators, view helpers and the like can hide a lot of that pain, but I still think I must be missing something???