[#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)

image

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

image

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

imageimageimageGoogle

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.