This page provides a comprehensive list of HTML form field types, detailing their unique attributes and options, along with global attributes that apply to all fields.
The following global attributes are applicable across all field types. They define essential properties related to accessibility, content structure, behavior, and presentation. Reference the Global attributes and Attributes sub-sections of the HTML reference in mdn web docs to try out the attributes and learn more about their specifications.
List of Global Attributes and their corresponding explanations:
accesskey: Defines a shortcut key to activate or focus an element.
class: Assigns one or more class names to an element, used for styling and script interaction.
contenteditable: Indicates whether the content of the element is editable.
dir: Specifies the text direction (ltr, rtl, or auto).
disabled: Disables an element, making it not selectable.
readonly: Prevents modification of the element’s content while still allowing interaction.
draggable: Allows the element to be dragged.
hidden: Hides the element.
id: Assigns a unique identifier to an element.
name: Specifies the name of the form control. Reference the mdn web docs on the name attribute to try it and learn more about its specifications.
itemid: Provides a unique identifier for items when using microdata.
itemprop: Specifies properties for microdata.
itemref: References other items related to the current item for microdata.
itemscope: Defines the scope of an item for microdata.
itemtype: Defines the type of an item for microdata.
lang: Declares the language of the element’s content.
tabindex: Defines the tab order for focusable elements.
title: Provides additional information about an element, often used as a tooltip.
value: Specifies the value of the input element.
The following sections list the unique attributes for each field type. Reference the <input> types sub-section of the HTML Reference section of the mdn web docs to try out and learn more about unique attributes outlined in the subsequent sections.
Note: Global Attributes apply to each of the field types listed in the following sections.
The checkbox field allows users to select multiple options from a list. It is often used to toggle between two states, like "checked" or "unchecked."
checked (boolean): Specifies whether the checkbox is selected by default.
options: An array of options, each with:
value (string)
label (string)
The color field allows users to select a color from a color picker.
autocomplete (string): Specifies if the browser should provide autocomplete suggestions.
list (string): Refers to a <datalist> that provides predefined color options.
required (boolean): Specifies that the field must be filled before form submission.
The datalist field provides a list of predefined options for other input fields, enhancing usability by offering suggestions.
No unique attributes.
options: An array of options, each with:
value (string)
The date field allows users to select a date, displayed as a date picker.
autocomplete (string): Specifies if the browser should suggest previously entered dates.
max (string): Sets the maximum date allowed.
min (string): Sets the minimum date allowed.
required (boolean): Specifies that a date must be selected before submission.
step (string): Specifies the granularity of selectable dates (e.g., steps in days).
The datetime-local field allows users to input both a date and a time.
autocomplete (string)
max (string): Sets the maximum allowed date and time.
min (string): Sets the minimum allowed date and time.
required (boolean): Requires a date and time before form submission.
step (string): Specifies the granularity of selectable times (e.g., steps in minutes).
The email field is used for inputting one or more email addresses.
autocomplete (string)
maxlength (string): Specifies the maximum number of characters allowed.
minlength (string): Specifies the minimum number of characters required.
multiple (boolean): Allows multiple email addresses.
placeholder (string): Displays a hint to the user.
required (boolean): Requires an email address before form submission.
size (string): Sets the visible width of the input.
The file field allows users to upload one or more files from their device.
accept (string): Specifies the types of files accepted by the server (e.g., image/png).
capture (string): Allows capturing images/audio from the camera/microphone if supported.
multiple (boolean): Allows selecting multiple files.
required (boolean): Specifies that at least one file must be uploaded.
The hidden field stores data that the user cannot see or interact with but is submitted with the form.
autocomplete (string)
The image field creates a graphical submit button using an image.
alt (string): Provides alternate text if the image cannot be displayed.
height (string): Specifies the image URL.
src (string): Defines the height of the image (in pixels).
width (string): Defines the width of the image (in pixels).
The label field associates a text label with a form control, improving accessibility.
No unique attributes.
The month field allows users to select a month and year without choosing a specific day.
autocomplete (string)
max (string): Specifies the latest allowed month.
min (string): Specifies the earliest allowed month.
required (boolean): Ensures a selection is made before form submission.
step (string): Defines the interval for month selection.
The number field allows users to input numeric values.
autocomplete (string)
max (number): Sets the maximum allowed value.
min (number): Sets the minimum allowed value.
required (boolean): Requires a numeric value before submission.
step (number): Specifies the allowed increment for numbers.
The password field allows users to input masked text (e.g., passwords).
autocomplete (string)
maxlength (string): Limits the number of characters allowed.
minlength (string): Sets the minimum number of characters required.
pattern (string): Specifies a regular expression for validation.
placeholder (string): Provides a hint to the user.
required (boolean): Specifies that the field must be filled.
size (string): Defines the visible width of the input.
The radio field allows users to select one option from a group.
checked (boolean): Indicates whether the radio button is selected by default.
required (boolean): Specifies that one option must be selected before form submission.
options: An array of options, each with:
value (string)
label (string)
The range field allows users to select a numeric value within a range, often displayed as a slider.
autocomplete (string)
max (number): Sets the maximum allowed value.
min (number): Sets the minimum allowed value.
step (number):Defines the granularity of the range (e.g., steps in increments of 1 or 10).
The select field creates a dropdown list that allows users to choose one or more options.
autocomplete (string)
multiple (boolean): Allows multiple selections if set to true.
required (boolean): Specifies that the user must select at least one option.
size (string): Defines the number of visible options in the dropdown.
options: An array of options, either:
option elements, with:
value (string)
label (string)
optgroup elements, containing groups of options.
The search field allows users to enter search queries with specialized input handling.
autocomplete (string)
dirname (string): Submits the text directionality of the search field with the form.
maxlength (string): Limits the number of characters allowed in the input.
minlength (string): Specifies the minimum number of characters.
placeholder (string): Provides a hint about the expected input.
required (boolean): Ensures that a search term is entered before submission.
The submit field creates a button that submits the form data.
data-sitekey (string): Used in conjunction with reCAPTCHA to verify form submissions.
data-callback (string): Defines a JavaScript function to be executed after submission.
data-action (string): Defines an action to be associated with the submit button.
width (string): Defines the width of the submit button.
The tel field allows users to enter telephone numbers.
autocomplete (string)
maxlength (string): Limits the number of characters allowed.
minlength (string): Sets the minimum number of characters required.
pattern (string): Provides a pattern for validation (e.g., for formatting telephone numbers).
placeholder (string): Displays a hint about the expected input.
required (boolean): Specifies that a telephone number must be entered before submission.
size (string): Defines the visible width of the input.
The text field allows users to input text.
autocomplete (string)
maxlength (string): Limits the number of characters allowed.
minlength (string): Specifies the minimum number of characters.
pattern (string): Provides a regular expression for validation.
placeholder (string): Displays a hint for the expected input.
required (boolean): Ensures that a value is entered before form submission.
size (string): Specifies the visible width of the text input.
The textarea field allows for multi-line text input, offering more space than the text field.
autocomplete (string)
cols (number): Defines the visible width of the textarea in characters.
rows (number): Defines the visible height of the textarea in lines.
maxlength (string): Limits the number of characters allowed.
minlength (string): Sets the minimum number of characters required.
placeholder (string): Provides a hint about the expected input.
spellcheck (string): Enables or disables spell checking.
wrap (string): Controls text wrapping behavior (e.g., "hard" or "soft").
required (boolean): Specifies that input is mandatory before form submission.
The time field allows users to input a time (hours, minutes, and optionally seconds).
autocomplete (string)
max (string): Sets the latest allowable time.
min (string): Sets the earliest allowable time.
required (boolean): Requires a time to be entered before form submission.
step (string): Specifies the time granularity (e.g., steps in seconds).
The url field is used for inputting valid URLs.
autocomplete (string)
maxlength (string): Sets the maximum number of characters allowed.
minlength (string): Specifies the minimum number of characters required.
placeholder (string): Provides a hint for the expected input.
required (boolean): Ensures that a valid URL is entered before form submission.
The week field allows users to select a specific week within a year.
autocomplete (string)
max (string): Specifies the latest week that can be selected.
min (string): Specifies the earliest week that can be selected.
required (boolean): Requires a week to be selected before form submission.
step (string): Specifies the granularity of week selection.