We can use bootstrap to style form elements.
There are three types of form layouts.
Vertical horizontal and inline forms this sample log in form shows an example of a basic vertical form
labeled with three inputs and one button
to create this.
We start with a form tag remember to always use the roll attribute and set it to form.
This helps improve accessibility for people using screen readers next.
We need to wrap all our form labels and form controls in a do with a class set to form group.
This is used to help browsers interpret optimal spacing
inside our div.
We have a label with a four attribute set to email after our label.
We have our input by setting input type to email.
The input will be validated for proper email format prior to submission and we can test that here.
You can see that when you put an incorrect format and click the Submit button an error appears
next.
It's required to add a class attribute instead it to form control
set an IED.
If you intend to add additional validation or any JavaScript functions to this forum input the place
holder is optional.
It simply sets the default input field.
Text so here you can see it says enter email and that's what the place holder is set to as well.
Next we have our div element setup for the second input which is password most of the code is the same
as the previous input do note that the type has changed to password and the idea has also changed to
p WD.
To create a checkbox.
Start with a div element in set the class to checkbox next.
Create a label element we've inserted the input with type equal to checkbox right before the actual
label which is remember me
as you can see in our browser here.
It's important to note that if you do not include labels for every input screen readers will have difficulty
in interpreting your forms so that's always a good practice
and after all of our inputs we have our button and we've been over buttons a few times so this should
be familiar.
And lastly just close the form.
The Open Forum tag with the closed form type we can convert this form into an inline form by adding
the form inline class to the form element.
So if we set the class to form in line and save the file and refresh.
You can see that all the items are now in a single row.