Form Elements

Form Design different form elements


Enter your first name
Enter your last name
Optional middle name or initial
Select your date of birth

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

Please provide a valid full name.
Please provide a valid email address.
Select your date of birth
Please select how you heard about us.
Please enter a message between 20 and 100 characters.

Form Basic Elements different form elements


Form Buttons Sessions

Text areasSessions

 

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.