You Are Here

HTML Form Elements

HTML form contains HTML form elements. HTML form elements are different types of input elements like checkboxes, text fields, submit buttons, radio buttons, etc.

The <input> Element:

The input element is used to create form fields, to take input from the user. We can use different input fields to collect information from the users.
The input element can be displayed in different ways, depending on the type attribute.

Example:

<form>
Enter your name: <br>
<input type="text" name="username">
</form>
Try it
Note: You will learn more about input types later in this tutorial.

The <select> Element:

HTML <select> element is used to create a drop-down list of option. The drop-down list will appear when we click on the form element and allows the user to choose one of the options.
The <option> element is used to define the possible options to select from. The <option> tag is put inside the <select> tag. The first item in the drop-down list is selected by default, to define the pre-selected option you can add the selected attribute to the option.

Example:

<select name="Technologies">
<option value="HTML"> HTML </option>
<option value="CSS"> CSS </option>
<option value="javaScript"> Javascript </option>
<option value="Bootstrap"> Bootstrap </option>
</select>
Try it

Visible Values:

The size attribute is used to specify the number of visible values of the drop-down list.

Example:

<select name="Technologies" size="3">
<option value="HTML"> HTML </option>
<option value="CSS"> CSS </option>
<option value="javaScript"> Javascript </option>
<option value="Bootstrap"> Bootstrap </option>
</select>
Try it

Allow Multiple Selections:

The multiple attribute is used to allow the users to select more than one value from the drop-down list.

Example:

<select name="Technologies" size="3" multiple>
<option value="HTML"> HTML </option>
<option value="CSS"> CSS </option>
<option value="javaScript"> Javascript </option>
<option value="Bootstrap"> Bootstrap </option>
</select>
Try it

The <textarea> Element:

The <textarea> element is used inside the form which allows the user to input the text over multiple lines.

Example:

<textarea name="message" rows="10" cols="30">
Enter your detail information here...
</textarea>
Try it
The rows attribute specifies the number of lines in a text area.
The col attribute specifies the width of a text area.
You can use CSS to define the size of the text area.

Example:

<textarea name="message" style="width:200px; height:200px;">
Enter your detail information here...
</textarea>
Try it

The <button> Element:

The <button> element is used to create a clickable button within the HTML form on your webpage.

Example:

<button type="button"> Click Me! </button>
Try it

HTML5 Form Elements:

HTML5 added the following form elements:
  • <datalist>
  • <output>

The <datalist> Element:

The <datalist> element specifies a set of pre-defined options for an <input> element, which can be used to provide the quick choices for an input field. To bind the<datalist> element together the list attribute of the input element is used.

Example:

<form action="/sample_page.php">
<input list="technologies" name="technology">
<datalist id="technologies">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="jQuery">
<option value="Bootstrap">
</datalist>
<input type="submit">
</form>
Try it

The <output> Element:

The HTML <output> tag is used for representing the result of a calculation.

Example:

<form onsubmit="return false" oninput="z.value = parseInt(x.value) + parseInt(y.value)">
<input name="x" id="x" type="number" step="any"> +
<input name="y" id="y" type="number" step="any"> =
<output name="z" for="x y"></output>
</form>
Try it

Ask a Question

Your email address will not be published. Required fields are marked *