Form Elements in HTML

HTML form elements: In HTML form there are multiple types of elements that are used to perform different tasks. In this tutorial on form elements in HTML, we will learn about different types of elements in HTML forms.
Submitted by Shivang Yadav, on December 23, 2019

1) The <input> Element

The <input> element is used to get input from the user in an HTML form.

<input> tag is used to get input using input element, the type attribute of the input element is used to define inputs of multiple types in HTML.

Syntax:

<input name="email" type="text" />

For the input element there are more values which will be discussed later.

2) The <select> Element

The select element is used to define the drop-down list (select Box) in the HTML form.

The <select> tag is used to define the list. Also, two more tags are required with the <select> tag for the work. They are <value> and <selected>.

The <value> tag defines an option that can be selected in the drop-down list.

The <selected> tag is used to define the element which is preselected in the form. By default, if no option is marked selected the first element is selected.

Syntax:

<select name="bikes">
    <option value="value" selected> text </option>
    . . .
</select>

In select tags, you can also select the number of options that are visible directly to the user without clicking on dropdown.

This is done by using the size attribute.

Syntax:

<select name="name" size="3"> ... </select>

This will show 3 options directly.

In the select box, the user is allowed to select more that one (multiple) options. This is done by adding multiple attributes.

Syntax:

<select multiple> ... </select>

3) The <textarea> Element

The <textarea> element is used to define the text area input i.e. a multi-line input field in the HTML form.

This element needs the rows and cols attribute to be defined to set the number of rows and columns the <textarea> will occupy.

Syntax:

<textarea rows="5" cols="10"> text_to_displayed </textarea>

The dimensions of the <textarea> can also be defined using stylesheet in HTML.

Syntax:

<textarea style="width:100px; height: 250px;"> text_to_displayed </textarea>

4) The <Button> Element

The <button> element is HTML form is used to add a button to the form that can be clicked to perform actions in the form.

Syntax:

<button type="button" onclick="action_performed"> text </button>

5) The <datalist> Element

The <datalist> element in HTML form is used to define a list of data elements that are predefined for the input element. It will create a drop-down of all the input options available.

To connect the <input> element to the <datalist>, the id of the datalist is to be referred by the list attribute of the input tag.

Syntax:

<input list="datalist_id"/>
<datalist="datalist_id">
    <option>... </option>
    <option>... </option>
    <option>... </option>
</datalist>

6) The <output> Element

The <output> element in HTML form is used to return the result of some calculations that are done in realtime in the form.

<output> tag is used to define the output. Also, one on the input tag is used to define the operation.

Syntax:

<oninput="output_name.value= parseInt(input1.value) * parseInt(input2.value) "> 0
    <input name="input1">
    <input name="input2">
    <output name="output_name" for="input1 input2"></output>

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples