To make a form interactive, you need to add form elements. There are controls to enter and select data, elements that describe controls, elements that group fields, and buttons to submit a form.
What are form elements?
You see two
<input type="text"> and
<input type="file">. Why do they look different?
Based on the element name and the type attribute, browsers show different user interfaces, use different validation rules, and provide many other features. Using the appropriate form control helps you build better forms.
Labels for form elements
Say you want to add an input where the user can enter their favorite color.
For this, you need to add an
<input> element to your form.
But, how does the user know that they should fill in their favorite color?
To describe form controls, use a
<label> for each form control.
<label for="color">What is your favorite color?</label> <input type="text" id="color" name="color">
for attribute on the label element matches the
id attribute on the input.
Capturing user input
As the name suggests, the
<input> element is used to gather input from users.
<label for="color">What is your favorite color</label> <input type="text" id="color" name="color">
As mentioned before, the
id attribute connects the
<input> to the
What about the name and type attribute in this example?
The name attribute
name attribute to identify the data the user enters with the control.
If you submit the form, this name is included in the request.
Say that you named a form control
mountain and the user entered
the request includes this information as
Try to change
the name of the form control to
If you do this correctly, and submit the form,
hill is visible in the URL.
The input type
There are different
types of form controls, all
with useful built-in features that work across different browsers and platforms. Based on the
attribute, the browser renders different user interfaces, shows different on-screen keyboards, uses
different validation rules, and more. Let's see how to change the type.
type="checkbox" the browser now renders a checkbox instead of a text field.
The checkbox also comes with additional attributes.
You can set the
checked attribute, to show it as checked.
There are various other types you can choose. We have a detailed look in a later module.
Allow multiple lines of text
Say, you need a field where a user can write a comment.
For this, wouldn't it be great if they can enter multiple lines of text?
This is the purpose of the
<label for="comment">Comment</label> <textarea id="comment" name="comment"></textarea>
Pick from a list of options
How do you give users a list of options to select from?
You can use a
<select> element to achieve this.
<label for="color">Color</label> <select id="color" name="color"> <option value="orange">Orange</option> <option value="pink">Pink</option> </select>
First, you add a
As with all other form controls, you connect it to a
<label> with the
and give it a unique name using the
In between the start and end tag of the
you can add multiple
<option> elements, each representing one selection.
Each option has a unique
value attribute, so you can tell them apart when processing the form data.
The text inside the option element is the human-readable value.
If you submit the form using this
<select> without changing the selection,
the request will include
color=orange. But how does the browser know which option should be used?
The browser uses the first option in the list, unless:
<option>element has the
- The user chooses another option.
Pre-select an option
selected attribute you can pre-select one option.
This becomes the default, regardless of the order in which
<option> elements are defined.
Grouping form controls
Sometimes you need to group form controls. You can use the
<fieldset> element to do that.
<fieldset> <legend>What is your favorite web technology</legend> <label for="html">HTML</label> <input type="radio" name="webfeature" value="html" id="html"> <label for="css">CSS</label> <input type="radio" name="webfeature" value="css" id="css"> </fieldset>
Did you notice the
<legend> element inside the
<fieldset> element? What do you think it is used for?
If your answer is "to describe the group of form controls", you're right!
<fieldset> element requires a
just as every form control needs an associated
<legend> also has to be the very first element in the
<legend> element, you can define the form controls which should be part of the group.
Submitting a form
After learning how to add form controls, and group them, you may wonder how a user can submit a form?
The first option is to use a
After a user clicks the Submit button,
the browser makes a request to the URL specified in the
with all data from the form controls.
You can also use an
<input> element with
type="submit" instead of a
The input looks and behaves just like a
<button>. Instead of using a
<label> element to describe
<input>, use the
value attribute instead.
<input type="submit" value="Submit">
In addition, a form can also be submitted by using the
Enter key when a form field has focus.
Check your understanding
Test your knowledge of form elements
How do you connect a
<label> to a form control?
What do you use for a multi-line form control?
How can you submit a form?