Bootstrap form controls Video Lecture - Learn Bootstrap From Basics

this is part 21 of bootstrap tutorial in
this video we'll discuss the standard
form controls supported by bootstrap
here is the list all types of input
controls are supported in our previous
video we used input type equals text and
input type equals password in addition
to these two types all html5 types like
date number email address URL etc are
also supported one important thing to
keep in mind is that the type attribute
is required for bootstrap to fully style
these input controls the HTML required
for this form is right here all I have
done is two things use the type
attribute of the input element and I
have also used the form control
bootstrap class so right here we have
input type equals text type equals state
email number URL at the moment we are
not using bootstrap notice I've
commented the reference to bootstrap
stylesheet so if we view this page in
the browser this is how it looks like at
the moment notice the form is not very
pretty
now let's uncomment the bootstrap style
sheet reference save our changes and
when we reload this page look at how
good the form looks now I'll have all
this HTML available on my blog in case
you need it
exterior control is also supported by
bootstrap we use this control to capture
multiple lines of text from the user
let's look at an example I'm going to
replace all these developments with
another development notice here we are
using the text area element and we are
using the same bootstrap class form
control so let's save our changes and
when we reload this page we should get
text area control style by bootstrap at
the moment we have got 5 rows to get
these 5 rows we have set the rows
attribute to 5 if you want 10 rows set
it to 10 when we reload this page we
should get a text area with 10 rows
checkboxes are also supported we use
these controls to allow the user to
select any number of options from the
list of available options to get a check
box we are going to use a development
with class set to
check box and inside this development we
are going to use a label element inside
the label element we are going to use
input type equals checkbox the value for
this check box is going to be option 1
without any space between option and
number 1 and the display label is also
going to be option 1 but with a single
space between option and number one so
this is going to give us a check box
style by bootstrap let's make two more
copies of this the value for the second
check box is going to be option to
display label also option two the value
for third check box option three display
label also option three when we reload
this page we should get three check
boxes style by bootstrap at the moment
all the check boxes are enabled meaning
we can either check or uncheck them if
you want a check box to be disabled all
you have to do is use disabled attribute
on that check box with the disabled
attribute in place when we reload this
page the last check box should be
disabled look at this now I cannot check
or uncheck this look at what happens to
the cursor when I move it over the check
box look at that the cursor style
changes to a stop sign indicating that
this is disabled but then when I hover
the mouse over the display text it
doesn't change to a stop sign if you
want the cursor to change to a stop sign
even when we hover over the displayed
text all we have to do is on the
development which contains the disabled
checkbox use disabled class so with
disabled class in place when we reload
this page notice when I have the mouse
ADA over this the display text or the
check box itself we have the cursor
style changing to a stop sign at the
moment the check boxes are stacked on
top of each other instead if you want
these check boxes side-by-side in the
same line as you can see here there are
two modifications we have to do to this
HTML first we need to remove the parent
development second on this label element
I'm going to use checkbox in line class
let's do the same modification for the
rest of the checkboxes that we have so
first remove the parent develop
and second on the label element use
checkbox inline class let's do that with
the last checkbox as well I'm going to
remove this button also let's save our
changes and when we reload this page
notice those three checkboxes are in the
same line side by side next let's
discuss radio buttons we use radio
buttons to allow the user to select only
one option from the list of available
options let's look at an example to get
a radio button we use a development with
class set to radio inside this
development we use a label element and
inside this label element we use input
type equals radio let's say the value of
this radio button is going to be 1 the
display label is going to be option 1 so
this is going to give us a radio button
style by bootstrap let's make two more
copies of this the value for the second
radio button is going to be 2 and the
display text option 2 for the third
radio button value 3 display label
option 3 let's save our changes and when
we reload this page we should get three
radio buttons tile by bootstrap at the
moment the problem is the user is able
to select all the three radio buttons we
want these radio buttons to be mutually
exclusive meaning the user should be
able to select only one radio button for
these radio buttons to be mutually
exclusive we will have to use name
attribute let's say the name attribute
value is radio group and this name
attribute value can be anything and it
has to be same for all these radio
buttons if you want it to behave like a
group and you want those radio buttons
to be mutually exclusive so let's see
what changes now when we reload this
page notice the radio buttons are now
mutually exclusive to disable a radio
button just like with checkboxes you use
disabled attribute and if you want you
know the cursor style to be a stop sign
when you hover over this display label
then on this development use disabled
class so let's save our changes
when we reload this page the last radio
button should be disabled when I hover
the mouse either over the displayed text
or the radio button itself the cursor
style should change to a stop sign and
at the moment we have the radio button
stacked on top of each other if you want
them side-by-side in the same line again
this is very similar to checkboxes
simply remove the parent development on
the label element use radio in line
class let's do the same thing with the
rest of the radio buttons we have remove
the parent development on the label
element use radio in line class let's do
that even with the last radio button
let's save our changes and when we
reload this page notice the radio
buttons are in the same line side by
side
finally let's discuss the select element
select element provides us with a
drop-down list a drop-down list limits
the user to select only one option from
the list of available options let's look
at an example to get a drop-down list we
use the Select element with a class set
to the same form control bootstrap class
and then we specify our options let's
include five options so I'm going to
make four more copies of this and then
change display text accordingly let's
save our changes when we reload this
page notice we get a drop-down list
let's include an HTML break here so we
get some space on the top so here we
have a single select list or a drop down
list which basically limits the user to
select only one option from the list of
these five available options if you want
a multi select list then all you have to
do is on the select element use multiple
attribute so when we reload this page
notice we get a multi select list if you
want to select multiple items hold down
the ctrl key and then select the options
that you want to select
thank you for listening and have a great
day