Form Elements

Overview of Form Elements

Form Element	Tag(s)	Ideal Usage
Button	`<input />` or `<button></button>`	Frequently used with JavaScript to provide functionality involving form elements without requiring that the form data be submitted (although that is still possible, depending on the specific markup used)
Checkboxes	`<input />`	One or more items should be selected from a set of items
Color Input Fields	`<input />`	Selecting a color value
Date Input Fields	`<input />`	Selecting a date
Date-Time Input Fields	`<input />`	Selecting a date and time
Email Input Fields	`<input />`	Email addresses
Hidden Fields	`<input />`	These values are not seen by the user, unless the user views the source code for the page. Often these are values that the script receiving the data needs but that users do not provide.
Month Input Fields	`<input />`	Selecting a month and year
Number Input Fields	`<input />`	Numerical data
Password Input Fields	`<input />`	Any values to obscure during entry, although no additional protection or encryption is given to this data
Range Input Fields	`<input />`	Selecting a value using a slider control
Search Input Fields	`<input />`	Search engine query text entry
Select Menus	`<select></select>` with one `<option></option>` per item	Numerous items that would otherwise be difficult to display due to layout constraints.
Time Input Fields	`<input />`	Specifying a time
Telephone Input Fields	`<input />`	Telephone numbers
Text Input Fields	`<input />`	Short, single-line data such as First Name, Last Name, Address Line 1, etc.
Textarea Boxes	`<textarea></textarea>`	Freeform, unstructured data. Useful for comments fields.
File Upload Fields	`<input />`	Uploading a file; contains the file name and path. A server-side script is needed to handle the file when the form is submitted.
Radio Buttons	`<input />`	Best used when only a single item should be selected from a group of items.
Reset Button	`<input />` or `<button></button>`	When clicked all the form data is emptied out.
Submit Button	`<input />` or `<button></button>`	When clicked the form data is sent to the script indicated in the `<form></form>` tag.
URL Input Fields	`<input />`	Web addresses
Week Input Fields	`<input />`	Selecting a week and year

The `<form></form>` Tag

All of the form elements should be within <form></form> tags, which are block-level.
There is one set of these tags per form.
Forms cannot be nested or overlap (the data mixup would be a disaster).

Attribute	Usage and Effect	Values	Include / Optional
action	Contains the path information to a server-side script that will be sent the form data when the form is submitted.	filename and path	Always include
autocomplete	Turns off the browser's default auto-complete behavior for elements within this form.	`off`	Optional
enctype	This determines how data is encoded when it is sent to the script.	`application/x-www-form-urlencoded` (the default; characters are encoded so they do not get mangled in transit) `multipart/form-data`	Optional; only needed if sending file data (`<input type="file" />`) and then `multipart/form-data` must be specified, otherwise the file data will be corrupted.
method	Determines how form data is sent to the script. Using `"get"` results in the form data being sent via the URL, which has length limitations but allows the variables being sent to be bookmarked, because they are all in the URL. Using `"post"` sends the data in the body of an HTTP POST request, which avoids the length limitations of `"get"` but cannot be bookmarked. It also will prompt the user whether they want to re-post the data if they reload the page and will warn the user about data being empty or missing if they try to go back.	`get` (the default) `post`	Always include

Rules for Variable Names

Every form element accepts a name attribute, which is associated with the data that is provided.

There are rules to follow in variable naming:

Never have spaces in variable names.
If you want to have a multi-word variable name, separate the words with underscores or just camelCase the spelling.
The only form elements where the same name is reused is for a group of radio buttons (definitely) or a group of checkboxes (potentially).

Input Fields (`<input />`)

Attribute	Usage and Effect	Values	Include / Optional	Recommendations
autocomplete	Controls whether browsers will autocomplete previously entered values as the user types.	`on` `off`	Optional	Usually applied to username and credit card fields to prevent auto-populating values. Typically ignored for password fields. If the input field is associated with a datalist, setting `autocomplete="off"` is recommended, in order to avoid any issues between the autocomplete options and the datalist.
disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript can still modify the form element value.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled elements don't send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
list	Allows you to associate a text input with a type-ahead set of options, which are created through a `<datalist>` that has `<option>` tags.	The id value assigned to the `<datalist>`	Optional	Only necessary if using a datalist.
max	Maximum number to accept for numerical inputs. Supported for `date`, `datetime-local`, `month`, `week`, `time`, `number` and `range` inputs.	Number without a unit (e.g., `10`)	Optional	Only specify this if you want a maximum in certain input types (`number` and `range`).
maxlength	Sets the maximum number of characters accepted by the input field.	Number without a unit (e.g., `60`)	Optional	Consider the data being entered, its formatting, and how many characters that would potentially involve (especially if localizing this form for other languages / countries is a factor).
min	Minimum number to accept for numerical inputs Supported for `date`, `datetime-local`, `month`, `week`, `time`, `number` and `range` inputs.	Number without a unit (e.g., `3`)	Optional	Only specify this if you want a minimum in certain input types (`number` and `range`).
minlength	Sets the minimum number of characters accepted by the input field.	Number without a unit (e.g., `60`)	Optional	Consider the data being entered, its formatting, and how many characters that would potentially require (especially if localizing this form for other languages / countries is a factor).
name	This is the variable name assigned to the data; the script needs this information.	Variable name (no spaces)	Always include	At your discretion; always assign a unique value for inputs because you do not want to lose data.
pattern	Used to specify a custom regular expression pattern for the data.	Regular expression	Optional	Only use this if you are also specifying `required="required"`. The pattern will override the built-in validation for the field.
placeholder	This value is shown inside the field until the user enters a value.	Character data	Optional	Use at your discretion, but note that it does not take the place of an always-visible label for the input. The placeholder text vanishes as the user begins typing, so if this is the only label for the form element the user will likely forget what the form element was supposed to contain (especially if they get distracted).
readonly	Prevents the form element from having data entered or modified. The element can receive focus, be tabbed to, and its data is sent when the form is submitted. Typically data changes to `readonly` fields are via JavaScript.	`readonly="readonly"` or just `readonly`	Optional	Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
required	Prevents form submission if the field is empty or, depending on the type, fails basic format checking (such as for email fields). Attempts to submit the form will show an error message as a tooltip.	`required="required"` or just `required`	Optional	For more nuanced control of the validation patterns, add the `pattern` attribute with the desired regular expression pattern to match the value against. Be careful not to hide required fields from display, as that makes for a very problematic user experience. The form submission cannot proceed and the user has no idea (or little idea) what is going wrong.
size	Sets the width of the input field in characters.	Number without a unit (e.g., `12`) The default is generally around 15	Optional	Try different values and keep in mind that font size and font family have an impact. Often the `width` property in CSS is used, which overrides this attribute.
step	Amount to increase a number input by, when using the up / down controls that browsers usually provide. Also, and most importantly, defines what numbers are valid.	Number (e.g., `2`) `any`	Optional	Only specify this if you want to set a step amount and to make some values (not on the steps) invalid. If you need to allow decimal values, then `"any"` is the value to specify. Supported for `date`, `datetime-local`, `month`, `week`, `time`, `number` and `range` inputs.
type	Specifies the form element to render.	`color` `date` `datetime-local` `email` `month` `number` `password` `range` `search` `tel` (phone number) `text` (the default and fallback if other value is unsupported) `time` `url` `week`	Always include	Specify `"text"` unless you have specialized data being entered If you specify `"password"` then the data in the field is obscured by dots / asterisks (note: the data is not encrypted so this only protects your data from someone looking over your shoulder)
value	If you want some information to appear in the input when the page loads, specify that text as the value for this attribute; if you don't want anything in the input leave this attribute out entirely - whatever the user specifies becomes the value.	Character data	Optional	Only specify this if you want pre-set information to appear in the input field when the page loads.

Text Input Example

See the Pen Text Input by Jason Withrow (@jwithrow) on CodePen.

Text Input with Datalist Example

See the Pen Datalist by Jason Withrow (@jwithrow) on CodePen.

Textarea Boxes (`<textarea></textarea>`)

Attribute	Usage and Effect	Values	Include / Optional	Recommendations
cols	Sets the starting width of the box in characters. Many browsers allow the bottom right corner to be dragged to increase width (and height).	Number without a unit (e.g., `12`)	Always include	At your discretion; try different values and keep in mind that font size and font family impacts the width. The `width` CSS property overrides this attribute.
disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript can still modify the form element value.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled fields do not send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
name	This is the variable name assigned to the data; the script needs this information.	Variable name (no spaces)	Always include	At your discretion; always assign a unique value for textarea boxes because you do not want to lose data.
placeholder	This value is shown inside the field until the user enters a value.	Character data	Optional	At your discretion; does not take the place of an always-visible label for the textarea.
readonly	Prevents the form element from having data entered or modified. The element can receive focus, be tabbed to, and its data is sent when the form is submitted. Typically data changes to `readonly` fields are via JavaScript.	`readonly="readonly"` or just `readonly`	Optional	Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
rows	Sets the starting height of the box in rows. Many browsers allow the bottom right corner to be dragged to increase height (and width).	Number without a unit (e.g., `12`)	Always include	At your discretion; try different values and keep in mind that font size and font family impacts the size. Often the CSS `height` property is used to set the height; it overrides this attribute.

Textarea Example

See the Pen Textarea by Jason Withrow (@jwithrow) on CodePen.

Notes Regarding Textarea Values and Behavior

To have a value (not a placeholder) appear within the textbox when the page loads, put that text between the <textarea></textarea> tags.
If the user enters enough data to fill the available rows a vertical scrollbar will appear and the user can keep typing.

Radio Buttons (`<input />`)

Attribute	Usage and Effect	Values	Include / Optional	Recommendations
checked	Selects the indicated radio button as soon as the page loads. Only specify this for one radio button in each grouping (each collection of radio buttons with the same `name`).	`checked="checked"` or just `checked`	Optional	If users typically make a certain selection, that is the one to select by default. It may prove to be a time-saver for them.
disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript can still "check" this radio button.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled fields do not send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
name	This is the variable name assigned to the data; the script needs this information.	Variable name (no spaces)	Always include	Groups of radio buttons must share the same name to function properly.
type	Specifies the form element to render.	`radio`	Always include	This must always be specified, otherwise the input will default to being a text box.
value	This information is associated with the variable from the `name` attribute if that radio button is selected.	Character data	Always include	The value can be whatever you want it to be - it doesn't have to match any visible text next to the radio button.

Radio Button Example

See the Pen Radio Buttons by Jason Withrow (@jwithrow) on CodePen.

Checkboxes (`<input />`)

Attribute	Usage and Effect	Values	Include / Optional	Recommendations
checked	Selects the indicated checkbox(es) when the page loads. Specify for as many checkboxes as desired.	`checked="checked"` or just `checked`	Optional	Pre-selecting common user choices can improve usability.
disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript can still "check" this checkbox.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled fields do not send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
name	This is the variable name assigned to the data; the script needs this information.	Variable name (no spaces)	Always include	Groups of checkboxes can all have different names or share the same name (their `value` data is joined together so no data is lost, assuming that the conventions for that in the server-side scripting language that process the form data are met).
type	Specifies the form element to render.	`checkbox`	Always include	`"checkbox"`
value	This information is associated with the variable from the `name` attribute if that checkbox is selected.	Character data	Always include	The value can be whatever you want it to be - it doesn't have to match any visible text next to the checkbox (for example, the value might be numeric and the text next to it is a word).

Checkbox Example

See the Pen Checkboxes by Jason Withrow (@jwithrow) on CodePen.

Select Menus (`<select></select>` and `<option></option>`)

Element	Attribute	Usage and Effect	Values	Include / Optional	Recommendations
<select> </select> or <option> </option>	disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript can still change the selected option.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled fields do not send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
<select> </select>	multiple	Allows multiple selections in the menu.	`multiple="multiple"` or just `multiple`	Optional	Only include if the `size` is more than `1`, otherwise it will have no effect. If you do provide this attribute, and expect that users may want to select more than one option, provide them with brief instructions about holding down Ctrl, Shift, etc. along with clicking so they know how to make that work.
<select> </select>	name	This is the variable name assigned to the data; the script needs this information so it can associate the data from the drop-down menu with a variable.	Variable name (no spaces)	Always include	Be careful to avoid duplicate `name` values with other select menus or form elements
<option> </option>	selected	Selects the indicated option(s) when the page loads. Only one option can be selected if the `size` of the menu is set to `1` (or if `size` is omitted because the default is `1`).	`selected="selected"` or just `selected`	Optional	If there is a commonly chosen option, use this attribute to pre-select it. That can be a nice time-saver and usability improvement.
<select> </select>	size	The value assigned to this attribute is the height of the menu in rows.	Number without a unit (e.g., `12`)	Optional	If you want a regular select menu leave this attribute out entirely. Values greater than `1` will create a multi-select box.
<option> </option>	value	This information is associated with the variable from the `name` attribute if that option is selected.	Character data	Always include	If the item has no meaning, such as 'Please Choose...' then set `value=""`.

Select Menu Example

See the Pen Select Menus by Jason Withrow (@jwithrow) on CodePen.

Uploading a File (`<input />`)

Attribute	Usage and Effect	Values	Include / Optional	Recommendations
accept	Specifies the MIME (Multipurpose Internet Mail Extensions) types of the files that will be uploaded. When the user is selecting files to upload, the menu of available file choices in the file selector should restrict itself to these types.	MIME values separated by commas (e.g., `image/jpeg, image/png`)	Optional	This is a good attribute to include, as it can cut down on user error when selecting a file to upload.
disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript is never permitted to write to a file upload field, disabled or not. Otherwise malicious actors would upload sensitive system files via hidden upload fields and the user would never realize it was happening.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled fields do not send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
name	This is the variable name assigned to the data (file name and path).	Variable name (no spaces)	Always include	Assign a unique value to this attribute to avoid data loss.
size	Sets the width of the field in characters. The file name (and sometimes directory path) are shown in the field.	Number without a unit (e.g., `40`)	Optional	Try different values and keep in mind that font size and font family impacts the size. Often the CSS `width` property is used to override this attribute.
type	Specifies the form element to render.	`file`	Always include	If this is omitted, the default is a text input field. As a developer, be careful with file uploads, as files placed on the server could contain viruses or other malware. Users may also attempt to upload extremely large files in order to break your scripting and expose server vulnerabilities.

File Upload Example

See the Pen File Upload by Jason Withrow (@jwithrow) on CodePen.

Note that enctype="multipart/form-data" is part of the form element. That is essential for any file upload.

Hidden Fields (`<input />`)

Attribute	Usage and Effect	Values	Include / Optional	Recommendations
name	This is the variable name assigned to the data.	Variable name (no spaces)	Always include	Always assign a unique value to avoid data loss.
type	Specifies the form element to render.	`hidden`	Always include	If this is omitted, the field will be visible and will default to a text input.
value	This value is associated with the `name` when the form is submitted.	Character data	Always include	Because this information is not encrypted or truly hidden from the user, be cautious with what you provide here. Sensitive information should not be passed this way.

Hidden Field Example

Hidden fields are used to pass data to a script without the user seeing that data rendered in the browser.
For example, a hidden field could pass an email address that the form data will be sent to, or if the form spans multiple pages the data from previous pages can be automatically saved in hidden fields on subsequent pages (the script would dynamically write these hidden fields as it generated the subsequent form pages).

Code for a hidden input:

<input type="hidden" name="destination" value="[email protected]" />

Note that these fields are not truly hidden; viewing the source code reveals them.

Buttons (`<input />` or `<button></button>`)

Element	Attribute	Usage and Effect	Values	Include / Optional	Recommendations
<input /> or <button> </button>	disabled	Prevents the form element from being used. It cannot receive focus, be tabbed to, or have data entered by the user. Data is not sent to the script when the form is submitted. JavaScript can still submit and reset the form and can still modify the value of the button.	`disabled="disabled"` or just `disabled`	Optional	Keep in mind that disabled fields do not send their data. Browsers differ in their default styling, so be sure to test in browsers you need to support and apply styles as necessary.
<button> </button>	name	If you have multiple submit buttons this can be used by the script receiving the data to determine what action to take, since any form element with a name has its `value` passed to the script when the form is submitted.	Variable name (no spaces)	Optional	Always assign a unique value.
<button> </button>	type	Specifies the type of button.	`submit` (the default) `button` `reset`	Always include	This is necessary if you want an outcome that differs from the default submit button.
<button> </button>	value	This value is associated with the `name` variable. Unlike `<input />`-based buttons, the `<button>`'s visible text comes from whatever text is inside of the `<button></button>` tags.	Character data	Always include	The default value is generally something very generic, so providing a descriptive value is preferable.
<input />	name	If you have multiple submit buttons this can be used by the script receiving the data to determine what action to take, since any form element with a name has its `value` passed to the script when the form is submitted.	Variable name (no spaces)	Optional	Always assign a unique value.
<input />	type	Specifies the form element to render.	`submit` (the default) `button` `image` `reset`	Always include	Use `"submit"` for a text-based submit button Use `"image"` for a graphical submit button (include `src` and `alt` attributes too) Use `"button"` for a text-based button that does not submit the form when clicked Use `"reset"` to create a reset button
<input />	value	This value is shown as the text in the button.	Character data	Always include	Provide a descriptive value that indicates what is happening when the button is clicked (e.g., "Create Account", "Delete Profile"). The default values tend to be ambiguous.

Standard Submit Button Example and Considerations

If you want to use a standard HTML5 button to submit the form, the type attribute is assigned a value of "submit".
The value attribute determines the label of the button. If this is not specified, the button will read 'Submit Query' in most browsers; otherwise the button will be labeled whatever is specified for the value attribute.

Code for this standard HTML5 submit button is:

<input type="submit" value="Place Order" />

Graphical Submit Button Example and Considerations

You can use an image for the submit button by specifying type="image", such as:
```
<input type="image" src="search.gif" alt="search" />
```
This code displays the search.gif graphic. When that graphic is clicked, the script referenced in the action attribute for the form element has all the form data passed to it.

Reset Button Considerations

It is also possible to create a reset button by specifying type="reset"; clicking this button clears all the fields.
The danger with using a reset button is that the user can accidentally click the button and lose the data already entered.
The action of the reset button cannot be undone.
My recommendation is to avoid using reset buttons. They offer few benefits and can cause a lot of grief, especially on lengthy forms.

Buttons that Do Not Submit the Form

By specifying type="button" you create a button that, when clicked, does not submit the form.
This is frequently used with JavaScript.