Improving Forms with Twitter Bootstrap

The first time I wrote about Twitter Bootstrap in this blog was to start with forms. Today’s entrance is for improving the knowledge when creating and using forms. Let’s go!

Forms with Bootstrap

The tag form is needed for creating a form, but also, it’s very important to include the attribute role=form. The best way to manage the data is by creating groups: create a DIV with the class form-group, and so, all its content (inputs controls) will be treat with the same behaviour. If you know about grids in Bootstrap, form-group can be similar to class row for grids.

Let’s go further, and inside every form group, it is desirable to use the tag label, and the for attibute for indicating the input to link with. You can use also the class control-label for giving the Bootstrap aspect as well.

When using input, you have the need to assing a value to the type attibute of the type of data you need (a text, a number, a date, email, …). Maybe you’re not aware of, but at the beginning of this blog, I already wrote about the new HTML5 tags (in spanish) and some of them where related to input tag. Now you have several new types, such as number, text or even email. For a better use of the inputs tags, it is neccesary to assing an id and a name, that must be the same that the attibute for of the label related to this inpus. It’s also a good practive (when using Bootstrap) to include the class form-control and also, you can use the attibute placeholder for specifying a text related to the info demanded to the input when there are no data yet (I like a lot this attribute!).

While you can control the width of labels by including Bootstrap classes (such as grids), this is not valid for inputs, and we must act applying other different classes, or even surround by a DIV. Example code:

<form class="form-horizontal">
<div class="form-group">
<label for="dato" class="control-label col-md-3">Dato:</label>
<div class="col-md-6">
<input type="text" name="dato" id="dato" class="form-control"  placeholder="Dato"  />
</div>
</div>
</form>

Improving controls

The fact that you have to assign Bootstrap classes to almost every DIV is for obtaining Bootstrap appearance, and this also applies to inputs controls. In this case, the DIV container having only inputs controls to improve need to include the class class-group, indicating that we want to improve the appearance of control. If inside an input toy want to include some text, you must include a spam tag with the class input-group-addon.

Form example

Here you have a HTML code using all explained in this entrance:

<form class="form-horizontal">
<div class="form-group">
<label for="username" class="control-label col-md-3">Username:</label>
<div class="col-md-6">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" class="form-control" name="username" id="username" />
</div>
</div>
</div>
</form>

And this is the results, that you can see here:

Creating groups of buttons instead of radio buttons

In a previos entrance you could read about buttons with Twitter Bootstrap and how you can create beautiful buttons just by adding two simple classes. Also, you can give this button appearence to other tags such as a or even labels. A new way to show radio controls is by using the class btn-group, with input tags with type radio, and you’ll see different. You need to include also the property data-toggle=buttons in orther to take effect!

And the HTML code:

<form class="form-horizontal">
<div class="form-group">
<div class="col-md-offset-3 btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" id="first" name="sample" />
Uno
</label>
<label class="btn btn-primary">
<input type="radio" id="second" name="sample" />
Dos
</label>
<label class="btn btn-primary">
<input type="radio" id="tres" name="sample" />
Tres
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default col-md-offset-3 col-md-4">Enviar formulario</button>
</div>
</form>

You can click here to see in action all that I’ve shown to you here in this entrance!

Happy coding using Bootstrap!!