In this section, we will get familiar with those elements that are used in HTML form and will see how to use them in an HTML document.

Elements of Form in HTML

A form in an HTML document is not just one entity but a combination of multiple elements, each serving a purpose to create a complete form. For example, the HTML <input> element is used to create text boxes, or password fields, check boxes, etc. Or the <select> element is used to create a drop-down menu where users can select a specific item from the list. Or there’s another element called <button> that we can use and create a button in a form so that users can click and submit their data to a server.

As you can see, a form is created using multiple HTML elements.

Alright, now let’s introduce some of these elements and see how they work in HTML.

List of Form Elements

Here are some of the elements that could be used as part of a form in an HTML document:

HTML <input>: The <input> element is used to create different input fields. For example, using this element we can create checkbox field, radio button, text-box, password-box etc. in a form. This element has an attribute called `type` and the value we set for this attribute defines the shape of the input field on the page. Please check the HTML <input> attributes section to if you’re interested in learning more about other attributes of this element.

HTML <label>: Using this element, we can set a label for the input fields of a form. For example, you have a username field in your form and want to label it with the word `Username`. So you can use the <label> element and set the value “Username” within the body of this element.

HTML <select>: The HTML <select> element is used to create a drop-down list with multiple items in it so that people can select one or more of the items.

HTML <textarea>: This element is used to create a text field where people can enter comments or lengthy text.

HTML <button>: This element is used to create a button in a form.

HTML <input> Element

As mentioned before, the input element is used to create a field where users can enter data.

The field we create using this element depends on the value that is set for its `type` attribute.

For example, if we set the value `text` then the created field will be a text box. Or if we set the value `password`, we get a password box where every character we type will be hidden behind bullet points.

Note: please check the HTML input type sections to learn more about other values we could use for this attribute.

HTML <input> Element Syntax:

This is how we use this element:

<input type = “value”>

The element itself only has one tag. The `type` attribute is used to set the type of field that should be created in the form.

Example: using <input> element in HTML

See the Pen using <input> element in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <select> Element

The HTML <select> element is used to create a drop-down menu with multiple items in it. Now, depending on whether we’ve used the `multiple` attribute, we can select one or more items from the list. Thus, when submitting the form data to a server, the items that we’ve selected will be sent to the sever as well.

HTML <select> Element Syntax:

This is the syntax of this element:

<select>

<option> item 1</option>

<option> item 2 </option>

</select>

In order to add items to a drop-down menu, we use the <option> element. Each time we use the <option> element, the content within this element will be used as a new element in the list.

Example: using <select> element in HTML

See the Pen using <select> element in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <textarea> Element

HTML <textarea> element is used to create an input field where people can insert multiple lines of text data. The main purpose of using the <textarea> element is to create fields that are good for inserting lengthy text content.

HTML <textarea> Element Syntax:

<textarea>

content…

</textarea>

You can insert content within the body of the <textarea> element as well, which will be shown in the body of the field that is created as a result.

Example: using <textarea> element in HTML

See the Pen using <textarea> element in HTML by Omid Dehghan (@odchan1) on CodePen.