Home » HTML

Form Elements in HTML

By IncludeHelp Last updated : October 13, 2024

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.

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>

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>

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>

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>

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>