{% extends "app/base_site.html" %} {% block content %}

### Form Elements

## Form Design different form elements

First Name *
Last Name *
Middle Name / Initial
Gender
Male Female
Date Of Birth *

## Form Design different form elements

Default Input
Disabled Input
Read-Only Input
Date Of Birth *

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

Full Name * : Email * : Gender *:

M: F:

Hobbies (2 minimum):

Skiing
Running
Eating
Sleeping

Heard us by *:
Message (20 chars min, 100 max) :
Validate form

## Form Basic Elements different form elements

Default Input
Disabled Input
Read-Only Input
Date Of Birth *
Password
AutoComplete
Select
Select Custom
Select Grouped
Select Multiple
Input Tags
Checkboxes and radios
Normal Bootstrap elements
Option one. select more than one options
Option two. select more than one options
Option one. only select one option
Option two. only select one option
Checkboxes and radios
Normal Bootstrap elements
Checked
Unchecked
Disabled
Disabled & checked
Checked
Unchecked
Disabled
Disabled & Checked
Switch
Checked
Unchecked
Disabled
Disabled Checked

## Form Buttons Sessions

Button addons
Button addons

## Text areasSessions

Resizable Text area

## 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.

First Name *
Last Name *

#### 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.

Email address
Password

#### Inline Form

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

Email address
Email address
Remember me
{% endblock content %}