Form Elements

Form Design different form elements


Form Design different form elements


Star Rating

Star Ratings Hover and click on a star
You gave a rating of 0 star(s)

Also you can give a default rating by adding attribute data-rating

You gave a rating of 4 star(s)

Registration Form Click to validate

M: F:

Skiing
Running
Eating
Sleeping


Validate form

Form Basic Elements different form elements


Form Buttons Sessions

Text areas Sessions

 

Form Input Grid form input

Form Design different form elements


Horizontal labels

Using the grid system you can control the position of the labels. The form example below has the col-md-10 which sets the width to 10/12 and center-margin which centers it.

Vertical labels

For making labels vertical you have two options, either use the apropiate grid .col- class or wrap the form in the form-vertical class.

Inline Form

Add .form-inline to your form (which doesn't have to be a <form>) for left-aligned and inline-block controls.