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:

Bootstrap Login Form #1

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:

Bootstrap Registration Form

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

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