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:
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:
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:
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???