HTML Form Elements

The different HTML form elements.

The HTML `<form>` Elements

The HTML <form> element can contain one or more of the following form elements:

The HTML Button

The <button> element defines a clickable button that may contain arbitrary content to augment what the standard <input type="button"> provides.

Example

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

Try this code ❯

Note: Always specify the type attribute for a <button> element.

The HTML `<datalist>`

The <datalist> element contains pre defined options for an <input> element.

These listed items would be considered the quick choices for the field, not a limitation of what can be entered.

Example

<label for="browser">Select the browser:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
  <option value="Samsung">
</datalist>

Try this code ❯

The HTML `<fieldset>`

The <fieldset> element allow to group thematically related controls together.

The element usually contains a <legend> element, which labels the grouped form controls.

Example

<form action="action">
<fieldset>
  <legend>User Information:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</fieldset>
</form>

Try this code ❯

The HTML `<input>`

The <input> element specifies an input control for a form.

See input types

Example

<form action="action">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <input type="submit" value="Submit">
</form>

Try this code ❯

The HTML `<legend>`

The <legend> element is used to assign a caption to a set of form fields as defined by a <fieldset> element.

Notes: Under early drafts of the In HTML5 specification, this element is also found in the figure and details elements. This was later replaced by the <dt> element.

Example

<form action="action">
<fieldset>
  <legend>User Information:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</fieldset>
</form>

Try this code ❯

The HTML `<output>`

The <output> element defines a region that will be used to display output from some calculation or form control.

Example

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">50</output>
</form>

Try this code ❯

The HTML `<option>`

The <option> element specifies an item in a selection list defined by a select element.

This element should occur only within the context of a <select> and <datalist> element.

Note: Under HTML specifications, the closing tag for <option> is optional. However, for XHTML compatibility, the closing tag </option> is required.

Example

<label for="lang">Choose a language:</label>

<select id="lang">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JavaScript">JavaScript</option>
</select>

Try this code ❯

The HTML

The <optgroup> element specifies a grouping of items in a selection list defined by option elements so that the menu choices can be presented in a hierarchical menu or similar alternative fashion to improve access through nonvisual browsers.

Notes:

This element should occur only within the context of a select element.
The visual presentation of this element may vary slightly between browsers.
By default, the first option in the <select> tag will be selected. The user can select another option in the dropdown list.

Example

<select>
<optgroup label="Group 1">
  <option>Option 1.1</option>
</optgroup>
<optgroup label="Group 2">
  <option>Option 2.1</option>
  <option>Option 2.2</option>
</optgroup>
<optgroup label="Group 3" disabled>
  <option>Option 3.1</option>
  <option>Option 3.2</option>
  <option>Option 3.3</option>
</optgroup>
</select>

Try this code ❯

The HTML `<select>`

The <select> element defines a selection list within a form. Depending on the form of the selection list, the control allows the user to select one or more list options.

Note: A <select> element must contain at least one <option> element.

Example

<label for="lang">Choose your option:</label>

<select name="language" id="lang">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JavaScript">JavaScript</option>
</select>

Try this code ❯

The HTML `<textarea>`

The <textarea> element specifies a multiline text input field contained within a form.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

Any text between the <textarea> and </textarea> tags is rendered as the default entry for the form control. Content within a textarea element is not interpreted, so white space is preserved and tags themselves are ignored.

Note: A <textarea> tag cannot be a descendent of an <a>a (anchor) or <button> element.

Example

<form action="action">
<label for="demo">textarea demo:</label>
<textarea id="demo" name="textareaText">
Hello world!
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>

Try this code ❯