4.10.7.1.10. Week state (type=week) When an input element's type attribute is in the Week state, the rules in this section apply. The input element represents a control for setting the element's value to a string representing a specific week. If the element is mutable, the user agent should allow the user to change the week represented by its value, as obtained by parsing a week from it. User agents must not allow the user to set the value to a non-empty string that is not a valid week string. If the user agent provides a user interface for selecting a week, then the value must be set to a valid week string representing the user's selection. User agents should allow the user to set the value to the empty string. Constraint validation: While the user interface describes input that the user agent cannot convert to a valid week string, the control is suffering from bad input. See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls. The value attribute, if specified and not empty, must have a value that is a valid week string. The min attribute, if specified, must have a value that is a valid week string. The max attribute, if specified, must have a value that is a valid week string. The step attribute is expressed in weeks. The step scale factor is 604,800,000 (which converts the weeks to milliseconds, as used in the other algorithms). The default step is 1 week. The default step base is −259,200,000 (the start of week 1970-W01). When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest week for which the element would not suffer from a step mismatch. The algorithm to convert a string to a number, given a string input, is as follows: If parsing a week string from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z") to midnight UTC on the morning of the Monday of the parsed week, ignoring leap seconds. The algorithm to convert a number to a string, given a number input, is as follows: Return a valid week string that represents the week that, in UTC, is current input milliseconds after midnight UTC on the morning of 1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0Z"). The algorithm to convert a string to a Date object, given a string input, is as follows: If parsing a week from input results in an error, then return an error; otherwise, return a new Date object representing midnight UTC on the morning of the Monday of the parsed week. The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid week string that represents the week current at the time represented by input in the UTC time zone. The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods. The value IDL attribute is in mode value. The input and change events apply. The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, multiple, pattern, placeholder, size, src, and width. The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; select(), setRangeText(), and setSelectionRange() methods. 4.10.7.1.11 Time state (type=time) When an input element's type attribute is in the Time state, the rules in this section apply. The input element represents a control for setting the element's value to a string representing a specific time. If the element is mutable, the user agent should allow the user to change the time represented by its value, as obtained by parsing a time from it. User agents must not allow the user to set the value to a non-empty string that is not a valid time string. If the user agent provides a user interface for selecting a time, then the value must be set to a valid time string representing the user's selection. User agents should allow the user to set the value to the empty string. Constraint validation: While the user interface describes input that the user agent cannot convert to a valid time string, the control is suffering from bad input. See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls. The value attribute, if specified and not empty, must have a value that is a valid time string. The min attribute, if specified, must have a value that is a valid time string. The max attribute, if specified, must have a value that is a valid time string. The step attribute is expressed in seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). The default step is 60 seconds. When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest time for which the element would not suffer from a step mismatch. The algorithm to convert a string to a number, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to the parsed time on a day with no time changes. The algorithm to convert a number to a string, given a number input, is as follows: Return a valid time string that represents the time that is input milliseconds after midnight on a day with no time changes. The algorithm to convert a string to a Date object, given a string input, is as follows: If parsing a time from input results in an error, then return an error; otherwise, return a new Date object representing the parsed time in UTC on 1970-01-01. The algorithm to convert a Date object to a string, given a Date object input, is as follows: Return a valid time string that represents the UTC time component that is represented by input. The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods. The value IDL attribute is in mode value. The input and change events apply. The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, multiple, pattern, placeholder, size, src, and width. The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; select(), setRangeText(), and setSelectionRange() methods. 4.10.7.1.12 Local Date and Time state (type=datetime-local) The input element represents a control for setting the element's value to a string representing a local date and time, with no time-zone offset information. See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls, and the implementation notes regarding localization of form controls. The value attribute, if specified and not empty, must have a value that is a valid local date and time string. The min attribute, if specified, must have a value that is a valid local date and time string. The max attribute, if specified, must have a value that is a valid local date and time string. The step attribute is expressed in seconds. The step scale factor is 1000 (which converts the seconds to milliseconds, as used in the other algorithms). The default step is 60 seconds. See the note on historical dates in the Date and Time state section. The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods. The value IDL attribute is in mode value. The input and change events apply. The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, multiple, pattern, placeholder, size, src, and width. The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; select(), setRangeText(), and setSelectionRange() methods. The following example shows part of a flight booking application. The application uses an input element with its type attribute set to datetime-local, and it then interprets the given date and time in the time zone of the selected airport. <fieldset> <legend>Destination</legend> <p><label>Airport: <input type=text name=to list=airports></label></p> <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p></fieldset><datalist id=airports> <option value=ATL label="Atlanta"> <option value=MEM label="Memphis"> <option value=LHR label="London Heathrow"> <option value=LAX label="Los Angeles"> <option value=FRA label="Frankfurt"></datalist> If the application instead used the datetime type, then the user would have to work out the time-zone conversions himself, which is clearly not a good user experience! 4.10.7.1.13 Number state (type=number) When an input element's type attribute is in the Number state, the rules in this section apply. The input element represents a control for setting the element's value to a string representing a number. This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs. For example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input (converting it to the format required for submission as described above). The value attribute, if specified and not empty, must have a value that is a valid floating-point number. The min attribute, if specified, must have a value that is a valid floating-point number. The max attribute, if specified, must have a value that is a valid floating-point number. The step scale factor is 1. The default step is 1 (allowing only integers, unless the min attribute has a non-integer value). The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, placeholder, readonly, required, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods. The value IDL attribute is in mode value. The input and change events apply. The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, multiple, pattern, size, src, and width. The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; select(), setRangeText(), and setSelectionRange() methods. Here is an example of using a numeric input control: <label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label> The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes. A simple way of determining whether to use type=number is to consider whether it would make sense for the input control to have a spinbox interface (e.g. with "up" and "down" arrows). Getting a credit card number wrong by 1 in the last digit isn't a minor mistake, it's as wrong as getting every digit incorrect. So it would not make sense for the user to select a credit card number using "up" and "down" buttons. When a spinbox interface is not appropriate, type=text is probably the right choice (possibly with a pattern attribute). 4.10.7.1.14 Range state (type=range) When an input element's type attribute is in the Range state, the rules in this section apply. The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state. The value attribute, if specified, must have a value that is a valid floating-point number. The min attribute, if specified, must have a value that is a valid floating-point number. The default minimum is 0. The max attribute, if specified, must have a value that is a valid floating-point number. The default maximum is 100. The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum. The step scale factor is 1. The default step is 1 (allowing only integers, unless the min attribute has a non-integer value). When the element is suffering from a step mismatch, the user agent must round the element's value to the nearest number for which the element would not suffer from a step mismatch, and which is greater than or equal to the minimum, and, if the maximum is not less than the minimum, which is less than or equal to the maximum. If two numbers match these constraints, then user agents must use the one nearest to positive infinity. For example, the markup <input type="range" min=0 max=100 step=20 value=50> results in a range control whose initial value is 60. The algorithm to convert a string to a number, given a string input, is as follows: If applying the rules for parsing floating-point number values to input results in an error, then return an error; otherwise, return the resulting number. The algorithm to convert a number to a string, given a number input, is as follows: Return a valid floating-point number that represents input. The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods. The value IDL attribute is in mode value. The input and change events apply. The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, multiple, pattern, placeholder, readonly, required, size, src, and width. The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; select(), setRangeText(), and setSelectionRange() methods. Here is an example of a range control using an autocomplete list with the list attribute. This could be useful if there are values along the full range of the control that are especially important, such as preconfigured light levels or typical speed limits in a range control used as a speed control. The following markup fragment: <input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"><datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"></datalist> ...with the following style sheet applied: input { height: 75px; width: 49px; background: #D5CCBB; color: black; } ...might render as: 
Note how the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties. The colors were similarly derived from the style sheet. The tick marks, however, were derived from the markup. In particular, the step attribute has not affected the placement of tick marks, the UA deciding to only use the author-specified completion values and then adding longer tick marks at the extremes. Note also how the invalid value +50 was completely ignored. For another example, consider the following markup fragment: <input name=x type=range min=100 max=700 step=9.09090909 value=509.090909> A user agent could display in a variety of ways, for instance: 
Or, alternatively, for instance: 
The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to maintain the same resolution for the tick marks, despite the differences in width. 4.10.7.1.15 Color state (type=color) When an input element's type attribute is in the Color state, the rules in this section apply. The input element represents a color well control, for setting the element's value to a string representing a simple color. The value attribute, if specified and not empty, must have a value that is a valid simple color. The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete and list content attributes; list and value IDL attributes. The value IDL attribute is in mode value. The input and change events apply. The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width. The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods. 4.10.7.1.16 Checkbox state (type=checkbox) When an input element's type attribute is in the Checkbox state, the rules in this section apply. The input element represents a two-state control that represents the element's checkedness state. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection. If the element's indeterminate IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state. The control is never a true tri-state control, even if the element's indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of a third state. - input .
indeterminate [ = value ] -
When set, overrides the rendering of checkbox controls so that the current value is not visible. The following common input element content attributes and IDL attributes apply to the element: checked, and required content attributes; checked and value IDL attributes. The value IDL attribute is in mode default/on. The change event applies. The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, list, max, maxlength, min, multiple, pattern, placeholder, readonly, size, src, step, and width. The following IDL attributes and methods do not apply to the element: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods. The input event does not apply. The input element represents a control that, when used in conjunction with other input elements, forms a radio button group in which only one control can have its checkedness state set to true. If the element's checkedness state is true, the control represents the selected control in the group, and if it is false, it indicates a control in the group that is not selected. The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions: A document must not contain an input element whose radio button group contains only that element. If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script). The following common input element content attributes and IDL attributes apply to the element: checked and required content attributes; checked and value IDL attributes. The value IDL attribute is in mode default/on. The change event applies. The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, list, max, maxlength, min, multiple, pattern, placeholder, readonly, size, src, step, and width. The following IDL attributes and methods do not apply to the element: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods. The input event does not apply. 4.10.7.1.18 File Upload state (type=file) When an input element's type attribute is in the File Upload state, the rules in this section apply. The input element represents a list of selected files, each file consisting of a file name, a file type, and a file body (the contents of the file). File names may contain partial paths, e.g. in the case that a user has selected an entire directory hierarchy. Path components should be separated from each other using "\" (U+005C) character. If the element is mutable, the user agent should allow the user to change the files on the list, e.g. adding or removing files. Files can be from the filesystem or created on the fly, e.g. a picture taken from a camera connected to the user's device. Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing. Unless the multiple attribute is set, there must be no more than one file in the list of selected files.
The accept attribute may be specified to provide user agents with a hint of what file types will be accepted. If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following: - The string
audio/* - Indicates that sound files are accepted.
- The string
video/* - Indicates that video files are accepted.
- The string
image/* - Indicates that image files are accepted.
- A valid MIME type with no parameters
- Indicates that files of the specified type are accepted.
- A string whose first character is a "." (U+002E) character
- Indicates that files with the specified file extension are accepted.
The tokens must not be ASCII case-insensitive matches for any of the other tokens (i.e. duplicates are not allowed). To obtain the list of tokens from the attribute, the user agent must split the attribute value on commas. User agents may use the value of this attribute to display a more appropriate user interface than a generic file picker. For instance, given the value image/*, a user agent could offer the user the option of using a local camera or selecting a photograph from their photo collection; given the value audio/*, a user agent could offer the user the option of recording a clip using a headset microphone. User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens. Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format. For example, consider an application that converts Microsoft Word documents to Open Document Format files. Since Microsoft Word documents are described with a wide variety of MIME types and extensions, the site can list several, as follows: <input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> On platforms that only use file extensions to describe file types, the extensions listed here can be used to filter the allowed documents, while the MIME types can be used with the system's type registration table (mapping MIME types to extensions used by the system), if any, to determine any other extensions to allow. Similarly, on a system that does not have file names or extensions but labels documents with MIME types internally, the MIME types can be used to pick the allowed files, while the extensions can be used if the system has an extension registration table that maps known extensions to MIME types used by the system. Extensions tend to be ambiguous (e.g. there are an untold number of formats that use the ".dat" extension, and users can typically quite easily rename their files to have a ".doc" extension even if they are not Microsoft Word documents), and MIME types tend to be unreliable (e.g. many formats have no formally registered types, and many formats are in practice labeled using a number of different MIME types). Authors are reminded that, as usual, data received from a client should be treated with caution, as it may not be in an expected format even if the user is not hostile and the user agent fully obeyed the accept attribute's requirements. For historical reasons, the value IDL attribute prefixes the filename with the string "C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the filename from the value IDL attribute in a backwards-compatible way is non-trivial. The following function extracts the filename in a suitably compatible manner: function extractFilename(path) { if (path.substr(0, 12) == "C:\\fakepath\\") return path.substr(12); // modern browser var x; x = path.lastIndexOf('/'); if (x >= 0) // Unix-based path return path.substr(x+1); x = path.lastIndexOf('\\'); if (x >= 0) // Windows-based path return path.substr(x+1); return path; // just the filename} This can be used as follows: <p><input type=file name=image onchange="updateFilename(this.value)"></p><p>The name of the file you picked is: <span id="filename">(none)</span></p><script> function updateFilename(path) { var name = extractFilename(path); document.getElementById('filename').textContent = name; }</script>
The following common input element content attributes apply to the element: The following common input element content attributes and IDL attributes apply to the element: accept, multiple, and required; files and value IDL attributes. The value IDL attribute is in mode filename. The change event applies. The following content attributes must not be specified and do not apply to the element: alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, list, max, maxlength, min, pattern, placeholder, readonly, size, src, step, and width. The element's value attribute must be omitted. The following IDL attributes and methods do not apply to the element: checked, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setRangeText(), setSelectionRange(), stepDown(), and stepUp() methods. The input event does not apply. | 
