HTML Form

A form is a way for users to input information and interact with a webpage. In most cases, the information submitted by users is sent to the server. For example, a website’s search bar is a type of form.

A form consists of one or more elements, such as text fields, buttons, radio buttons, or checkboxes. These elements are known as controls.

`<form>`

Introduction

The <form> tag is used to define a form, which acts as a container for all the form elements.

1
2
3

<form>
  <!-- Various form controls -->
</form>

The code above represents the basic structure of a form.

Here’s a common example:

<form action="https://example.com/api" method="post">
  <label for="POST-name">Username:</label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="Submit">
</form>

In this example, the form includes three controls: a <label> tag, a text input field, and a submit button. The text input field has a name attribute set to “user,” which means the browser will send a key-value pair to the server with the key “user” and the value being what the user entered.

When the user types a username, such as “foobar,” into the text field and clicks the submit button, the browser will send a POST request to https://example.com/api with the data user=foobar.

The <form> element has the following attributes:

accept-charset: Specifies the character encodings accepted by the server, separated by spaces. By default, it matches the encoding of the webpage.
action: The URL where the form data will be sent.
autocomplete: Determines if the browser can automatically fill in missing values for a control. Possible values are off (do not autofill) and on (autofill).
method: The HTTP method used to submit the data. Possible values are post (send form data as the HTTP request body), get (send form data as part of the URL query string), and dialog (used within a <dialog> element).
enctype: Specifies the MIME type for the data being sent when the method attribute is post. Possible values include application/x-www-form-urlencoded (default), multipart/form-data (for file uploads), and text/plain.
name: The name of the form, which should be unique within the page. Note that if a control does not have a name attribute, its value will not be sent as a key-value pair to the server.
novalidate: A boolean attribute that indicates whether the form should bypass validation when submitted.
target: Specifies where to display the response from the server. Possible values include _self (current window), _blank (new window), _parent (parent frame), _top (topmost frame), or the name attribute of an <iframe> (display the response in that <iframe>).

`enctype` Attribute

The enctype attribute of the <form> tag specifies the MIME type of the data sent to the server when using the POST method. This attribute can have the following values:

application/x-www-form-urlencodedThis is the default encoding type. It encodes form data as key-value pairs where both the key (control name) and value are URL-encoded. Spaces are replaced with +, non-alphanumeric characters are replaced with %HH (where HH is the hexadecimal value), and newlines are represented as CR LF. Key-value pairs are separated by = and each pair is separated by &.
multipart/form-dataThis encoding type is mainly used for file uploads. When uploading large files, the data is split into multiple parts. Each part has its own HTTP headers, including Content-Disposition with a value of form-data and a name attribute representing the control name.

1	Content-Disposition: form-data; name="mycontrol"

Here is an example of a file upload form:

<form action="https://example.com/api" enctype="multipart/form-data" method="post">
  Username: <input type="text" name="submit-name"><br>
  File: <input type="file" name="files"><br>
  <input type="submit" value="Upload"> <input type="reset" value="Clear">
</form>

In this example, if the user enters “Larry” as the username and selects a file named file1.txt, the browser sends the data as follows:

Content-Type: multipart/form-data; boundary=--AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

... contents of file1.txt ...
--AaB03x--

The browser splits the form data into multiple parts. The Content-Type header specifies the multipart/form-data format and the boundary --AaB03x which separates the data chunks. Each chunk starts with a Content-Disposition header indicating the control name (submit-name or files) and, for file uploads, includes the filename and content type. The data following these headers is the actual value of the control, with file data included as well.

`<fieldset>`, `<legend>`

The <fieldset> element is a block-level container used to group related form controls together.

Example:

<form>
  <fieldset>
    <p>Age: <input type="text" name="age"></p>
    <p>Gender: <input type="text" name="gender"></p>
  </fieldset>
</form>

In the above code, the two input fields are grouped within a box.

Attributes of <fieldset> include:

disabled: A boolean attribute that, when set, makes all controls within the <fieldset> disabled and appear grayed out.
form: Associates the <fieldset> with a <form> element by specifying the <form>‘s id.
name: Sets the name of the control group.

The <legend> element is used to provide a title for the <fieldset>. It is usually the first element inside the <fieldset> and appears as a label at the top of the box.

Example:

<fieldset>
  <legend>Student Information</legend>
  <p>Age: <input type="text" name="age"></p>
  <p>Gender: <input type="text" name="gender"></p>
</fieldset>

In this example, the title “Student Information” is displayed at the top of the <fieldset> box.

`<label>`

The <label> element is an inline element that provides a description for form controls, helping users understand their purpose.

Example:

1 2	<label for="user">Username:</label> <input type="text" name="user" id="user">

Here, the text “Username:” is associated with the input field.

The <label> element enhances accessibility, especially for small controls like checkboxes and radio buttons, by allowing users to click the label to select the associated control. The for attribute links the label to the corresponding control by its id.

You can also nest controls within a <label>, eliminating the need for the for attribute.

Example:

1
2
3

<label>Username:
  <input type="text" name="user">
</label>

Attributes of <label>:

for: Specifies the id of the associated control.
form: Associates the label with a form element by specifying the form’s id. If this attribute is not set, the label must be inside a <form> element.

A single control can have multiple associated <label> elements:

Example:

1
2
3

<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>

In this case, the input field has two labels associated with it.

`<input>`

Overview

The <input> tag is an inline element used to receive user input. It is a self-closing tag and does not require a closing tag.

It comes in various types, depending on the value of the type attribute. The default type is text, which creates a single-line input field.

1
2
3

<input>
<!-- Equivalent to -->
<input type="text">

The code above generates a single-line text input field where users can enter text.

The <input> tag has many attributes, some of which are specific to certain types and will be discussed in the “Types” section. Here are some common attributes applicable to all types:

autofocus: A boolean attribute that, when set, makes the input field automatically receive focus when the page loads.
disabled: A boolean attribute that disables the control. When enabled, the control appears grayed out and is viewable but not interactive.
form: Associates the input with a form by specifying the form’s id. When this attribute is set, the control can be placed anywhere on the page; otherwise, it must be inside a <form>.
list: Associates the input with a <datalist> by specifying the id of the datalist. This provides a predefined list of options for the input.
name: The name of the control, used as the key in key-value pairs when submitting data to the server. Only controls with a name attribute are submitted.
readonly: A boolean attribute that makes the input field read-only. Users can see but not modify the content.
required: A boolean attribute that makes the input field mandatory.
type: Defines the type of the input control. Detailed types are covered in the “Types” section.
value: Specifies the initial value of the input field.

Types

The type attribute determines the form of the <input> element. It can take various values, including:

1) text

type="text" creates a standard text input field for single-line text. Line breaks are automatically removed if entered by the user.

1 2	<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

This text input field has several additional attributes:

maxlength: The maximum number of characters allowed. It should be a non-negative integer.
minlength: The minimum number of characters required. It must be a non-negative integer and less than maxlength.
pattern: A regular expression that the input must match. For example, to require 4 to 8 English letters, use pattern="[a-z]{4,8}". If the input does not match, the browser will display a warning and prevent form submission.
placeholder: A sample value displayed in the input field when it is empty. It disappears once the user starts typing.
readonly: A boolean attribute that makes the input field read-only, allowing only viewing but not editing.
size: Specifies the visible width of the input field in characters. It is a positive integer, defaulting to 20. Characters beyond this width require horizontal scrolling to view.
spellcheck: Determines whether spell checking is enabled for the input field. Possible values are true or false.

2) Search

The type="search" creates a text input field specifically for search queries, similar to type="text". Some browsers display a clear button inside the input field that allows users to quickly erase all input.

Example:

<form>
  <input type="search" id="mySearch" name="q" placeholder="Enter search term..." required>
  <input type="submit" value="Search">
</form>

3) Button

The type="button" creates a button with no default behavior. It typically requires JavaScript to define the action for the button click.

Example:

1	<input type="button" value="Click">

It’s generally recommended to use the <button> element instead, as it is semantically clearer and supports more complex content, such as images.

4) Submit

The type="submit" creates a button that submits the form to the server.

Example:

1	<input type="submit" value="Submit">

If the value attribute is not specified, the default text “Submit” is displayed.

This type supports the following attributes to override form settings:

formaction: URL to submit the form data.
formenctype: Encoding type of the form data.
formmethod: HTTP method for submission (GET or POST).
formnovalidate: Boolean value to skip form validation.
formtarget: Specifies where to display the response from the server.

5) Image

The type="image" uses an image as a submit button, behaving like type="submit".

Example:

1	<input type="image" alt="Login" src="login-button.png">

The image acts as a clickable button to submit the form.

Attributes include:

alt: Alternative text if the image fails to load.
src: URL of the image.
height: Image display height in pixels.
width: Image display width in pixels.
formaction: URL to submit the form data.
formenctype: Encoding type of the form data.
formmethod: HTTP method for submission (GET or POST).
formnovalidate: Boolean value to skip form validation.
formtarget: Specifies where to display the response from the server.

Clicking the image button submits additional parameters x and y, indicating the mouse click position relative to the image. If the image button has a name attribute, the coordinates are prefixed with this name (e.g., position.x=52&position.y=55). This feature is often used for map interactions.

6) Reset

type="reset" creates a reset button. When clicked, it resets all form controls to their initial values.

1	<input type="reset" value="Reset">

If the value attribute is not set, the browser displays a default label, typically “Reset.”

This control is rarely used as it resets all entered values, which might not be desirable. It’s often better to avoid it.

7) Checkbox

type="checkbox" creates a checkbox that allows users to select or deselect an option.

1 2	<input type="checkbox" id="agreement" name="agreement" checked> <label for="agreement">Agree</label>

The above code displays a clickable checkbox before the text. Clicking it selects or deselects the option. The checked attribute makes the checkbox selected by default.

By default, the value attribute is “on.” For the example above, selecting the checkbox submits agreement=on, while deselection results in no submission for that item.

Checkboxes related to each other can be grouped within a <fieldset>.

<fieldset>
  <legend>Your Interests</legend>
  <div>
    <input type="checkbox" id="coding" name="interest" value="coding">
    <label for="coding">Coding</label>
  </div>
  <div>
    <input type="checkbox" id="music" name="interest" value="music">
    <label for="music">Music</label>
  </div>
</fieldset>

If both checkboxes are selected, the submission includes interest=coding&interest=music.

8) Radio

type="radio" creates a radio button, where only one option in a group can be selected at a time.

<fieldset>
  <legend>Gender</legend>
  <div>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
  </div>
  <div>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label>
  </div>
</fieldset>

In this example, only one gender can be selected. Ensure all radio buttons in a group share the same name attribute. The selected value is submitted to the server.

Relevant attributes:

checked: Boolean attribute indicating if the option is selected by default.
value: The value sent to the server when selected, defaulting to “on.”

9) Email

type="email" creates an input field that only accepts valid email addresses. The browser automatically validates the format before submission.

1	<input type="email" pattern=".+@foobar.com" size="30" required>

This code generates a required field that only accepts emails ending in foobar.com.

The multiple Boolean attribute allows multiple comma-separated email addresses.

1	<input id="emailAddress" type="email" multiple required>

When both multiple and required are set, zero emails are allowed, making the field optional.

Relevant attributes:

maxlength: Maximum number of characters allowed.
minlength: Minimum number of characters required.
multiple: Allows multiple comma-separated emails.
pattern: Regex pattern that input must match.
placeholder: Placeholder text when the input is empty.
readonly: Boolean attribute indicating if the field is read-only.
size: Display length of the input field in characters.
spellcheck: Enables spellcheck, with possible values true or false.

The type="email" field can also use the <datalist> tag to offer suggestions.

<input type="email" size="40" list="defaultEmails">

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

When the input field is focused, a dropdown list with five suggestions appears for user reference.

10) Password

The type="password" creates a password input field where the user’s input is obscured, typically displayed as asterisks (*) or dots (·).

1	<input type="password" id="pass" name="password" minlength="8" required>

Browsers may handle this input type differently, often showing the entered characters for a brief moment before obscuring them. Any newline (U+000A) or carriage return (U+000D) characters entered are automatically removed by the browser.

Attributes for this type include:

maxlength: Maximum number of characters allowed.
minlength: Minimum number of characters required.
pattern: Regular expression the input must match.
placeholder: Text displayed when the input is empty.
readonly: Boolean attribute indicating if the field is read-only.
size: Non-negative integer representing the display length in characters.
autocomplete: Determines if autocomplete is allowed (on, off, current-password, new-password).
inputmode: Specifies the type of data allowed: none(no system input method), text(standard text input), decimal(numbers including decimals), numeric(digits 0-9).

11) File

The type="file" creates a file input field that allows users to select one or more files, commonly used for file uploads.

1	<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

Attributes for this type include:

accept: Specifies the file types allowed, using MIME types or file extensions.
capture: Determines the source for capturing image or video data (user or environment).
multiple: Boolean attribute indicating if multiple files can be selected.

12) Hidden

The type="hidden" creates a control not visible on the page, used to pass hidden information to the server. For example, to prevent CSRF attacks, unique hidden identifiers can be generated for each form.

1	<input id="prodId" name="prodId" type="hidden" value="xm234jq">

This control is invisible to users but submits its value with the form.

13) Number

The type="number" creates a numeric input field, allowing only numbers. A spinner with up and down arrows is typically provided for incrementing or decrementing the value.

1	<input type="number" id="tentacles" name="tentacles" min="10" max="100">

This type supports both integers and decimal values, with optional step increments.

Attributes include:

max: Maximum value allowed.
min: Minimum value allowed.
placeholder: Example value shown when the input is empty.
readonly: Boolean attribute indicating if the field is read-only.
step: Increment step for the value; defaults to 1.

14) Range

The type="range" creates a slider for selecting a value within a specified range. This is often used for volume controls or similar settings.

1	<input type="range" id="start" name="volume" min="0" max="11">

Attributes include:

max: Maximum value allowed, default is 100.
min: Minimum value allowed, default is 0.
step: Increment step, default is 1.
value: Initial value of the slider.

With the <datalist> tag, you can add labels or ticks to the range slider.

<input type="range" list="tickmarks">
<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>

This setup creates a slider with tick marks and labels at specified intervals. Note that horizontal sliders are the default; vertical sliders require CSS adjustments.

14) Url

The type="url" input field only accepts URLs. Before form submission, the browser automatically checks if the URL format is correct; otherwise, it won’t be submitted.

<input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="30"
       required>

In this example, the pattern attribute specifies that the URL must use the HTTPS protocol.

Note that URLs without a protocol are invalid. For instance, foo.com is invalid, while http://foo.com is valid.

The type also supports the following attributes:

maxlength: Maximum number of characters allowed.
minlength: Minimum number of characters required.
pattern: Regular expression that the input must match.
placeholder: Example text displayed when the input is empty.
readonly: Boolean attribute indicating if the field is read-only.
size: Number of characters that the input field should display.
spellcheck: Indicates if spell check is enabled (true or false).

The type="url" can be used with the <datalist> element to create a dropdown list for users to choose from. As users type, the list will narrow to show matching options.

<input id="myURL" name="myURL" type="url"
       list="defaultURLs">

<datalist id="defaultURLs">
  <option value="https://developer.mozilla.org/" label="MDN Web Docs">
  <option value="http://www.google.com/" label="Google">
  <option value="http://www.microsoft.com/" label="Microsoft">
  <option value="https://www.mozilla.org/" label="Mozilla">
  <option value="http://w3.org/" label="W3C">
</datalist>

In the code above, the label attribute of <option> specifies the text shown next to the URL in the dropdown list.

16) tel

The type="tel" input field is used for entering phone numbers. Since phone number formats vary globally, browsers don’t apply default validation, so custom validation is often needed.

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>
<small>Format: 123-456-7890</small>

The code above defines an input field for a 10-digit phone number.

Attributes for this type include:

maxlength: Maximum number of characters allowed.
minlength: Minimum number of characters required.
pattern: A regular expression that the input must match.
placeholder: Example text displayed when the input is empty.
readonly: A boolean attribute indicating if the field is read-only.
size: Number of characters the input field should display.

17) color

The type="color" input allows users to select a color, with values in the #rrggbb format.

1 2	<input type="color" id="background" name="background" value="#e66465">

In Chrome, this code displays a color box with the color #e66465. Clicking the box opens a color picker for selecting a different color.

If no value attribute is specified, the default color is #000000 (black).

18) Date

The type="date" input allows users to select a date in the format YYYY-MM-DD, but does not include time (hours, minutes, or seconds).

1
2
3

<input type="date" id="start" name="start"
       value="2018-07-22"
       min="2018-01-01" max="2018-12-31">

This code displays a date input box with a default date of July 22, 2018. Clicking the input box will open a date picker for selecting a different date.

Attributes:

max: The latest allowed date in the format YYYY-MM-DD.
min: The earliest allowed date in the format YYYY-MM-DD.
step: The interval for selectable dates, in days.

19) Time

The type="time" input allows users to input a time in the 24-hour format. The format is hh:mm, and if seconds are included, it’s hh:mm:ss.

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Business hours: 9 AM to 6 PM</small>

This code creates a time input box where users can select a time between 9:00 and 18:00.

Attributes:

max: The latest allowed time.
min: The earliest allowed time.
readonly: A boolean attribute that prevents users from editing the time.
step: The interval for selectable times, in seconds.

1	<input id="appt" type="time" name="appt" step="2">

In this example, the time picker increments by 2 seconds.

20) Month

The type="month" input allows users to select a year and month in the format YYYY-MM.

1 2	<input type="month" id="start" name="start" min="2018-03" value="2018-05">

This code creates an input box for selecting a month and year, with the default value set to May 2018.

Attributes:

max: The latest allowed month in the format YYYY-MM.
min: The earliest allowed month in the format YYYY-MM.
readonly: A boolean attribute that prevents users from editing the month.
step: The interval for selectable months.

21) Week

The type="week" input allows users to select a week of the year in the format YYYY-Www. For example, 2018-W18 represents the 18th week of 2018.

1 2	<input type="week" name="week" id="camp-week" min="2018-W18" max="2018-W26" required>

This code creates an input box for selecting a week within the specified range.

Attributes:

max: The latest allowed week in the format YYYY-Www.
min: The earliest allowed week in the format YYYY-Www.
readonly: A boolean attribute that prevents users from editing the week.
step: The interval for selectable weeks.

22) datetime-local

The type="datetime-local" input allows users to enter both date and time in the format YYYY-MM-DDThh:mm. Note that seconds are not supported.

1
2
3

<input type="datetime-local" id="meeting-time"
       name="meeting-time" value="2018-06-12T19:30"
       min="2018-06-07T00:00" max="2018-06-14T00:00">

This code creates an input box for selecting both a date and a time, with the default set to June 12, 2018, 19:30.

Attributes:

max: The latest allowed date and time in the format YYYY-MM-DDThh:mm.
min: The earliest allowed date and time in the format YYYY-MM-DDThh:mm.
step: The interval for selectable times, in seconds. The default is 60 seconds.

`<button>`

The <button> element creates a clickable button with no default behavior. Its function is typically defined using the type attribute or scripts.

1	<button>Click</button>

The code above produces a button with the text “Click.”

The <button> element can contain both text and images, forming an image button.

1
2
3

<button name="search" type="submit">
  <img src="search.gif" alt="Search">Search
</button>

Here are the attributes for <button>:

autofocus: Boolean attribute that sets focus to the button when the page loads. Only one element can have this attribute per page.
disabled: Boolean attribute that disables the button, making it gray and unclickable.
name: The button’s name, used with the value attribute to submit data in the format name=value with the form.
value: The button’s value, used with the name attribute to submit data in the format name=value with the form.
type: The button’s type. Possible values are submit (sends form data to the server), reset (resets all form controls to their initial values), and button (no default behavior; action specified by script).
form: Associates the button with a <form> element by its id. If omitted, the button is linked to the nearest parent form.
formaction: URL where the form data is submitted, overriding the action attribute of the <form> element.
formenctype: Encoding type for form data submission, overriding the enctype attribute of the <form> element. Possible values: application/x-www-form-urlencoded (default), multipart/form-data (for file uploads), text/plain.
formmethod: HTTP method for form data submission, overriding the method attribute of the <form> element. Possible values: post or get.
formnovalidate: Boolean attribute that disables local validation when submitting the form, overriding the novalidate attribute of the <form> element.
formtarget: Specifies where to display the response from the server, overriding the target attribute of the <form> element. Possible values: _self (current window), _blank (new window), _parent (parent window), _top (topmost window).

`<select>`

The <select> tag is used to create a dropdown menu.

<label for="pet-select">Pet:</label>

<select id="pet-select" name="pet-select">
  <option value="">--Please select an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="others">Others</option>
</select>

In the above code, the <select> tag creates a dropdown menu with the placeholder text “–Please select an option–” and a dropdown arrow on the right. Clicking the arrow reveals three options for the user to choose from.

Each option is represented by the <option> tag, and the value attribute of the selected option is sent to the server. The selected attribute can be used to set a default option.

<select name="choice">
  <option value="first">First Value</option>
  <option value="second" selected>Second Value</option>
  <option value="third">Third Value</option>
</select>

In this code, “Second Value” is the default selected option when the page loads.

The <select> element has the following attributes:

autofocus: Boolean attribute indicating whether the control should automatically receive focus when the page loads.
disabled: Boolean attribute indicating whether the control is disabled.
form: Associates the select element with a form using its id.
multiple: Boolean attribute indicating if multiple options can be selected. If enabled, most browsers display a scrollable list box, and users can select multiple options by holding down the Shift or Ctrl key.
name: Name of the control.
required: Boolean attribute indicating whether the control is required.
size: Specifies the number of visible options when multiple is set. Additional options will require scrolling.

`<option>`, `<optgroup>`

The <option> tag, used within <select>, <optgroup>, and <datalist>, represents an individual menu item.

Attributes of <option> include:

disabled: Boolean attribute indicating whether the option is disabled.
label: Provides a label for the option. If omitted, it defaults to the option’s text content.
selected: Boolean attribute indicating whether the option is selected by default.
value: The value submitted to the server when the option is selected. If omitted, it defaults to the option’s text content.

The <optgroup> tag is used to group related options within a <select> element:

<label>Pets:
  <select name="pets" multiple size="4">
    <optgroup label="Four-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
    </optgroup>
    <optgroup label="Birds">
      <option value="parrot">Parrot</option>
      <option value="thrush">Thrush</option>
    </optgroup>
  </select>
</label>

In this example, the <select> dropdown uses <optgroup> to organize options into two categories, each with its own label.

Its attribute are as follows:

disabled: A boolean setting that determines whether the group is disabled. When enabled, all menu items in the group are unselectable.
label: The title for the menu item group.

`<datalist>`

The <datalist> element is a container used to provide a list of options for an associated input element, typically for generating input suggestions. It uses <option> elements to define each menu item.

<label for="ice-cream-choice">Ice Cream:</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice">

<datalist id="ice-cream-flavors">
  <option value="Chocolate">
  <option value="Coconut">
  <option value="Mint">
  <option value="Strawberry">
  <option value="Vanilla">
</datalist>

In the code above, the <input> element creates a text input box where users can enter text. The list attribute of <input> specifies the id of the associated <datalist>. The <datalist> provides suggestions as a dropdown menu when the user interacts with the input box. It also auto-filters the options based on the user’s input; for example, typing “Van” will display only “Vanilla.”

Note that <option> elements do not require closing tags in this context.

The <option> tag can also include a label attribute for additional description. In Chrome, this label appears below the value in smaller text.

<datalist id="ide">
  <option value="Brackets" label="by Adobe">
  <option value="Coda" label="by Panic">
</datalist>

In this example, Chrome displays “Brackets” with “by Adobe” in smaller text below it in the dropdown list.

`<textarea>`

The <textarea> element is a block-level element used to create a multi-line text input area.

1
2
3

<textarea id="story" name="story" rows="5" cols="33">
This is a long story.
</textarea>

This code creates a text area that is 5 rows high and 33 columns wide.

Attributes for <textarea> include:

autofocus: Boolean attribute that determines if the element should automatically gain focus.
cols: Width of the text area in characters (default is 20).
dir: Text direction, can be “ltr” (left-to-right), “rtl” (right-to-left), or “auto” (determined by browser).
disabled: Boolean attribute that disables the element.
form: Associates the text area with a specific form by id.
maxlength: Maximum number of characters allowed (unlimited if not specified).
minlength: Minimum number of characters required.
name: Name of the text area.
placeholder: Placeholder text shown when the text area is empty.
readonly: Boolean attribute that makes the text area read-only.
required: Boolean attribute that makes the text area required.
rows: Height of the text area in rows.
spellcheck: Enables or disables browser spell checking (true, default, or false).
wrap: Determines text wrapping behavior—hard (insert line breaks), soft (wraps but no line breaks), or off (no wrapping).

`<output>`

The <output> tag is an inline element used to display the result of a user action.

1
2
3

<input type="number" name="a" value="10"> +
<input type="number" name="b" value="10"> =
<output name="result">20</output>

Attributes:

for: Associates with the id of the control, representing the result of that control’s operation.
form: Associates with the id of a form.
name: Name of the control.

`<progress>`

The <progress> tag is an inline element that represents the completion progress of a task, typically displayed as a progress bar.

1	<progress id="file" max="100" value="70"> 70% </progress>

Attributes:

max: The maximum value of the progress bar, must be a positive number. Default is 1.
value: The current value of the progress bar. Must be between 0 and the max value. If max is omitted, this value should be between 0 and 1. If omitted, the progress bar will appear as indeterminate.

`<meter>`

The <meter> tag is an inline element used to display a value within a known range, suitable for showing progress, disk usage, battery level, etc. It is generally displayed as a non-scrolling gauge.

1	<p>The oven's current temperature is <meter min="200" max="500" value="350"> 350 degrees</meter>.</p>

The code above displays a gauge where the left end represents 200, the right end represents 500, and the current position is at 350.

Note that the child elements of the <meter> tag are typically not displayed. They only appear if the browser does not support the <meter> element.

Attributes:

min: The lower bound of the range, must be less than max. Defaults to 0 if omitted.
max: The upper bound of the range, must be greater than min. Defaults to 1 if omitted.
value: The current value, must be between min and max. Defaults to 0 if omitted.
low: The threshold for the “low” range, must be greater than min and less than high and max. Defaults to min if omitted.
high: The threshold for the “high” range, must be less than max and greater than low and min. Defaults to max if omitted.
optimum: The optimal value, must be between min and max. It indicates the best range when used with low and high. Defaults to the midpoint between min and max if omitted.
form: Associates with the id of a form.

In Chrome, the meter bar is color-coded: green for good, yellow for average, and red for poor conditions.

1
2
3

<meter id="fuel" name="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
    at 50/100
</meter>

In this example, the meter is divided into three segments: 0–32, 33–65, and 66–100. Since optimum is 80, the ranges are color-coded as follows: less than 33 is red, between 33 and 65 is yellow, and greater than 65 is green.

Reference Links

HTML Interactive Form Validation, by Chris Dumez

Link to original article:

https://wangdoc.com/html/form

HTML Form

<form>

Introduction

enctype Attribute

<fieldset>, <legend>

<label>

<input>

Overview

Types

<button>

<select>

<option>, <optgroup>

<datalist>

<textarea>

<output>

<progress>

<meter>

Reference Links

`<form>`

`enctype` Attribute

`<fieldset>`, `<legend>`

`<label>`

`<input>`

`<button>`

`<select>`

`<option>`, `<optgroup>`

`<datalist>`

`<textarea>`

`<output>`

`<progress>`

`<meter>`