Introduction to HTML Forms

Question 1

what does the Form element do

Answer 1

Just like a physical form, an HTML <form> element is responsible for collecting information to send somewhere else. Every time we browse the internet we come into contact with many forms and we might not even realize it. There’s a good chance that if you’re typing into a text field or providing an input, the field that you’re typing into is part of a <form>!

Question 2

how a from works

Answer 2

How a Form Works

We can think of the internet as a network of computers which send and receive information. Computers need an HTTP request to know how to communicate. The HTTP request instructs the receiving computer how to handle the incoming information. More information can be found in our article about HTTP requests.

The <form> element is a great tool for collecting information, but then we need to send that information somewhere else for processing. We need to supply the <form> element with both the location of where the <form>‘s information goes and what HTTP request to make. Take a look at the sample <form> below:

<form>
</form>

In the above example, we’ve created the skeleton for a <form> that will send information to example.html as a POST request:

The action attribute determines where the information is sent.
The method attribute is assigned a HTTP verb that is included in the HTTP request.

Note: HTTP verbs like POST do not need to be capitalized for the request to work, but it’s done so out of convention. In the example above we could have written method=”post” and it would still work.

The <form> element can also contain child elements. For instance, it would be helpful to provide a header so that users know what this <form> is about. We could also add a paragraph to provide even more detail. Let’s see an example of this in code:

<form>
<h1>Creating a form</h1>
<p>Looks like you want to learn how to create an HTML form. Well, the best way to learn is to play around with it.</p>
</form>

The example above doesn’t collect any user input, but we’ll do that in the next exercise. For now, let’s practice making the foundation of an HTML <form>!

Question 3

what is the <form> used for

Answer 3

The <form> element is a great tool for collecting information

<form> </form>

Question 4

what does the action and method attribute do

Answer 4

The action attribute determines where the information is sent.
The method attribute is assigned a HTTP verb that is included in the HTTP request.

Question 5

how to add information to a from using <h1> and <p>

Answer 5

<form>
<h1>Creating a form</h1>
<p>Looks like you want to learn how to create an HTML form. Well, the best way to learn is to play around with it.</p>
</form>

Question 6

how to add text input into a form using <input></input>

Answer 6

The first value for the type attribute we’re going to explore is “text”. When we create an <input></input> element with type=”text”, it renders a text field that users can type into

<form>
<input></input>
</form>

Question 7

what is the type=”text” for in a input field

Answer 7

type=”text”, it renders a text field that users can type into. Note that the default value of type is “text”. It’s also important that we include a name attribute for the <input></input> — without the name attribute, information in the <input></input> won’t be sent when the <form> is submitted.

Question 8

what is the value=”” for in input field

Answer 8

After users type into the <input></input> element, the value of the value attribute becomes what is typed into the text field. The value of the value

Question 9

what is the name attribute for input field

Answer 9

The value of the value attribute is paired with the value of the name attribute and sent as text when the form is submitted. For instance, if a user typed in “important details” in the text field created by our <input></input> element:

When the form is submitted, the text: “first-text-field=important details” is sent to /example.html because the value of the name attribute is “first-text-field” and the value of value is “important details”.

Question 10

why do we need a lable element for a form

Answer 10

For a user to properly identify an <input></input> we use the appropriately named <label> element.</label>

Question 11

how do add a lable

Answer 11

The <label> element has an opening and closing tag and displays text that is written between the opening and closing tags. To associate a <label> and an <input></input>, the <input></input> needs an id attribute. We then assign the for attribute of the <label> element with the value of the id attribute of <input></input>, like so:</label></label></label>

<form>
<label>What do you want to eat?</label>
<br></br>
<input></input>
</form>

Question 12

how to add the password input using <input></input>

Answer 12

An <input></input> element will replace input text with another character like an asterisk () or a dot (). The code below provides an example of how to create a password field:

<form>
<label>Password: </label>
<input></input>
</form>

Question 13

when the password is submitted how will the data be shown

Answer 13

Even though the password field obscures the text of the password, when the form is submitted, the value of the text is sent. In other words, if “hunter2” is typed into the password field, “user-password=hunter2” is sent along with the other information on the form.

Question 14

explain using adding numbes into a for musing type=’number’

Answer 14

setting type=”number” for an <input></input> we can restrict what users type into the input field to just numbers (and a few special characters like -, +, and .). We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute. Below is the code needed to render an input field for numbers:

<form>
<label> Years of experience: </label>
<input></input>
</form>

Question 15

how to set up number using type= number step = 1

Answer 15

setting type=”number” for an <input></input> we can restrict what users type into the input field to just numbers (and a few special characters like -, +, and .). We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute. Below is the code needed to render an input field for numbers:

<form>
<label> Years of experience: </label>
<input></input>
</form>

Question 16

how to add a range slider input on the amount of numbers using type “range”

Question 17

how to set min and max levels of slider

Answer 17

To set the minimum and maximum values of the slider we assign values to the min and max attribute of the <input></input>. We could also control how smooth and fluid the slider works by assigning the step attribute a value. Smaller step values will make the slider move more fluidly, whereas larger step values will make the slider move more noticeably. Take a look at the code to create a slider:

<form>
<label> Volume Control</label>
<input></input>
</form>

Question 18

how to add a check box input using type”check box”

Answer 18

form>

<p>Choose your pizza toppings:</p>

<label>Extra cheese</label>
<input></input>
<br></br>
<label>Pepperoni</label>
<input></input>
<br></br>
<label>Anchovy</label>
<input></input>
</form>

Question 19

adding radio buttons using <option>Pizza</option>

Answer 19

<form>
<label>What's for lunch?</label>
<select>
<option>Pizza</option>
<option>Curry</option>
<option>Salad</option>
<option>Ramen</option>
<option>Tacos</option>
</select>
</form>

Question 20

how to add a data list using <datalist></datalist>

Answer 20

he <datalist> is used with an <input></input> element. The <input></input> creates a text field that users can type into and filter options from the <datalist>. Let’s go over a concrete example:</datalist></datalist>

<form>
<label>Ideal city to visit?</label>
<input></input>

<datalist>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</datalist>
</form>

Question 21

how to submit form using <form>
<input></input>
</form>

Question 22

review

Answer 22

he purpose of a <form> is to allow users to input information and send it.
The <form>‘s action attribute determines where the form’s information goes.
The <form>‘s method attribute determines how the information is sent and processed.
To add fields for users to input information we use the <input></input> element and set the type attribute to a field of our choosing:

Setting type to "text" creates a single row field for text input.
Setting type to "password" creates a single row field that censors text input.
Setting type to "number" creates a single row field for number input.
Setting type to "range" creates a slider to select from a range of numbers.
Setting type to "checkbox" creates a single checkbox that can be paired with other checkboxes.
Setting type to "radio" creates a radio button that can be paired with other radio buttons.
Setting type to "text" and adding the list attribute will pair the <input> with a <datalist> element if the list of <input> and the id of <datalist> are the same.
Setting type to "submit" creates a submit button.

A <select> element is populated with <option> elements and renders a dropdown list selection.
A <datalist> element is populated with <option> elements and works with an <input></input> to search through choices.
A <textarea> element is a text input field that has a customizable area.
When a <form> is submitted, the name of the fields that accept input and the value of those fields are sent as name=value pairs</textarea></option></datalist></option></select>