Allowed form fields

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.

Global Attributes

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.

Unique Attributes

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.

Checkbox Field

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."

Unique Attributes:

• checked (boolean): Specifies whether the checkbox is selected by default.

Available Options:

• options: An array of options, each with:

  • value (string)

  • label (string)

Color Field

The color field allows users to select a color from a color picker.

Unique Attributes:

• 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.

Datalist Field

The datalist field provides a list of predefined options for other input fields, enhancing usability by offering suggestions.

Unique Attributes:

No unique attributes.

Available Options:

• options: An array of options, each with:

  • value (string)

Date Field

The date field allows users to select a date, displayed as a date picker.

Unique Attributes:

• 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).

Datetime-Local Field

The datetime-local field allows users to input both a date and a time.

Unique Attributes:

• 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).

Email Field

The email field is used for inputting one or more email addresses.

Unique Attributes:

• 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.

File Field

The file field allows users to upload one or more files from their device.

Unique Attributes:

• 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.

Hidden Field

The hidden field stores data that the user cannot see or interact with but is submitted with the form.

Unique Attributes:

• autocomplete (string)

Image Field

The image field creates a graphical submit button using an image.

Unique Attributes:

• 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).

Label Field

The label field associates a text label with a form control, improving accessibility.

Unique Attributes:

No unique attributes.

Month Field

The month field allows users to select a month and year without choosing a specific day.

Unique Attributes:

• 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.

Number Field

The number field allows users to input numeric values.

Unique Attributes:

• 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.

Password Field

The password field allows users to input masked text (e.g., passwords).

Unique Attributes:

• 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.

Radio Field

The radio field allows users to select one option from a group.

Unique Attributes:

• checked (boolean): Indicates whether the radio button is selected by default.

• required (boolean): Specifies that one option must be selected before form submission.

Available Options:

• options: An array of options, each with:

  • value (string)

  • label (string)

Range Field

The range field allows users to select a numeric value within a range, often displayed as a slider.

Unique Attributes:

• 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).

Select Field

The select field creates a dropdown list that allows users to choose one or more options.

Unique Attributes:

• 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.

Available Options:

• options: An array of options, either:

  • option elements, with:

    • value (string)

    • label (string)

  • optgroup elements, containing groups of options.

Search Field

The search field allows users to enter search queries with specialized input handling.

Unique Attributes:

• 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.

Submit Field

The submit field creates a button that submits the form data.

Unique Attributes:

• 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.

Tel Field

The tel field allows users to enter telephone numbers.

Unique Attributes:

• 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.

Text Field

The text field allows users to input text.

Unique Attributes:

• 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.

Textarea Field

The textarea field allows for multi-line text input, offering more space than the text field.

Unique Attributes:

• 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.

Time Field

The time field allows users to input a time (hours, minutes, and optionally seconds).

Unique Attributes:

• 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).

URL Field

The url field is used for inputting valid URLs.

Unique Attributes:

• 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.

Week Field

The week field allows users to select a specific week within a year.

Unique Attributes:

• 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.

---