How to use HTML Forms
How We Use Forms to Handle User Input
How we use Forms in our HTML
The purpose of a <form> is to allow users to input information and send it.
The <form>can have different attributes determining the form’s behavior.
We use the action attribute to determine where the user’s information goes.
We can also use the method attribute which determines how the user’s information is sent and processed.
The user’s information or form data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="POST").
It is important to remember when we are using method="get"that it will append our form data into the URL in name/value pairs. The length of the URL will also be limited. We shouldn't send sensitive information using method="get"because this information will be visible in the URL.
method="POST" appends form data inside the body of the HTTP request (data won’t show up in the URL). This method also doesn’t have a size limitation and keep in mind that form submissions with post cannot be bookmarked.
A simple example of making our form would look like this:
<form action="submission.html" method="POST"></form>
Labels Provide Identification for a Specific Input
When we want to create an input field in our form we need to use the <input> tag, but in order for the user to understand the input we need to use a <label>.
The <label> is going to display some information to the user about what information they need to enter, maybe it's asking for a username, or asking to choose between dark or light mode.
In order for our <label> to work, we need to “pair” it with our <input>.
To associate our <label> with an <input> we use the for attribute and make sure that it matches the id of our <input>.
An example of this pairing will look like this:
<form action="submission.html" method="POST">
<label for="car">What is your favorite care?</label>
<input type="text" name="car" id="car">
</form>Input Elements are Used to Render Input Fields on a Webpage
CheckBox
There are a variety of different input types that we can use to collect information from the user. One example of these input types is "checkbox" which will render a single checkbox item to the page. We can list as many check box options as we want as long as they all use the same name attribute.
<input type="checkbox" name="colors" value="blue">Blue <br>
<input type="checkbox" name="colors" value="red">Red <br>
<input type="checkbox" name="colors" value="green">Green <br>Number
Sometimes we might want to restrict what the user can enter. If we need a number from the user but we don’t want them entering text we can use the number type.
<input type="number" name="total">Range
We might also want to receive a value from the user but only within a set range of numbers, let's say 0-10, then we can use range type.
When we use the range type we can specify a min, max as well as a step which allows the user to increment by only our step value.
<input type="range" name="rating" min="0" max="10" step="0.1">Submittable Input
HTML <input> elements can have a type attribute set to submit, used as <input type="submit">. With this attribute a submit button will be rendered and by default will submit the <form> and execute it’s action.
We can set the submit button’s value to whatever we want our submit button to read.
Understanding HTML Forms
It is easy to see HTML forms as a way of organizing the tasks we have for the users to complete.
If we need to get information from the user we will need them to fill out a form so we start by creating a form.
Next we need to have labels that inform the users what sort of information they need to enter and in which fields.
Then we need to add the desired input elements and match them to our labels so that the information being entered is organized and going to the correct places.
After a bit of practice soon you’ll be building forms for your users in no time.
