Bootstrap styling can be applied to several different types of form elements including inputs text areas
checkboxes radio buttons and select menus bootstrap also supports all HDMI L5 input types such as text
password email no time week and so on an important consideration is that inputs will not be styled if
their type is not properly declared
on this general page.
We have a number of different types of form elements.
We covered the input field elements in the last lesson so we'll take a look at the text area to begin
with to create a text area create a div and set the class to form group create a label for your text
area and remember to apply the four attribute and set it to comment
the text area is created using the text area tags set a class inside the text area element and set it
to form control you can specify the length of your text area by creating a rose attribute and setting
the value.
In this case our text area is five rows in length.
If we set it to 10 you can see that the text area will become larger
the next element we have here is a checkbox
to create a checkbox start with the div and set the class to checkbox create a label element input your
input inside the label tags and we have two checkboxes here check option 1 and Option 2
to create a radio button.
Start with a div and set the class to radio and it's more or less the same as the checkbox.
You can create a label and insert your input element right into the label.
And keep in mind that the difference between a checkbox and a radio button is with radio buttons you
typically only want the user to be able to select one option and for that reason the name attribute
is very important.
When you give two radio buttons the same name the user can only select one option
our next element here is a select menu and to make one first create a div.
Set the class to form group Next create a label for the select list insert your select tags and set
the class to form control
eat.
Create each option using the option tags.
So here we have four options and it's just a numerical value one two three four.
If we were to change this to something else
you can see that the value changes in the menu.
You can also create a select menu that allows multiple options to be selected to do so creative and
set the class to form group create a label for the menu.
And create a select element and create a multiple attribute.
So we have a select element created.
Here's our multiple attribute.
Also create a class attribute and set that to form control and create your options.
The same way we did in the previous in the previous select menu.
Here we have five options and it's just the numbers one two three four 5 on the right hand side here
you can see we can select multiple options by holding the control key or if you want to select large
groups of options or the shift key and we can select all of them at once.