[#BOOTSTRAP] HowTo: use forms with Bootstrap 3 (well not expect much…)

Hello!

During these days I have seen many people that becames the most happy people in the world when they start to work with Bootstrap, also if you use it with AngularJs so it seems better than a few strawberries with chocolate!

Today I have to work a little with forms and there is a series of lessons that I’ve been learned :

-There is a series of classes to organize the contents of a form, such as form-horizontal and form-inline

-There are a series of classes to define the labels for the controls and specific styles of controls

Here is an very bad example:

   1: <!DOCTYPE html>

   2: <html xmlns="http://www.w3.org/1999/xhtml">

   3: <head>

   4:     <title>Form 1</title>

   5:     <meta name="viewport" content="width=device-width, initial-scale=1.0">

   6:     <link href="Content/bootstrap/bootstrap.css" rel="stylesheet">

   7: </head>

   8: <body>

   9:     <div class="container">

  10:         <form class="form-horizontal">

  11:             <fieldset>

  12:                 <legend>Form 1</legend>

  13:                 <div class="controls">

  14:                     <label>Field 1</label>

  15:                     <input type="text" placeholder="1 type something ..." />

  16:                 </div>

  17:                 <div class="controls">

  18:                     <label>Fieldazo 2</label>

  19:                     <input type="text" placeholder="2 type something ..." />

  20:                 </div>

  21:             </fieldset>

  22:         </form>

  23:     </div>

  24:     <script src="scripts/jquery-1.9.1.js"></script>

1:

   2:     <script src="scripts/bootstrap.js">

</script>

  25: </body>

  26: </html>

The result we have is the following (much more ugly that hitiing you your mother)

Now, grouping controls in a DIV with the class control-list, and defining the class control-label for the label of each, and with some more… and have a more enjoyable form.

   1: <div class="container">

   2:     <form class="form-horizontal">

   3:         <fieldset>

   4:             <legend>Form 1</legend>

   5:             <div class="control-list">

   6:                 <label class="control-label">Field 1</label>

   7:                 <div class="controls">

   8:                     <input type="text" placeholder="1 type something ..." />

   9:                 </div>

  10:             </div>

  11:             <div class="control-list">

  12:                 <label class="control-label">Fieldazo 2</label>

  13:                 <div class="controls">

  14:                     <input type="text" placeholder="2 type something ..." />

  15:                 </div>

  16:             </div>

  17:         </fieldset>

  18:     </form>

  19: </div>

The above example of code guente allows us to get a form that does not throw to the inhabitants of the underworld

Before proceeding to more advanced examples (nor is the head I of for more), it is best to read the official CSS support in the FORMS section of Bootstrap > > http://getbootstrap.com/css/#forms

For example the use of the class form-group with form-horizontal for grouping content horizontally, model validation, etc.

Reference: http://getbootstrap.com/css/#forms

Greetings @ La Finca

El Bruno

Google