Table of Contents

Class HTMLInputElement

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of input elements.

[Value("HTMLInputElement")]
public class HTMLInputElement : HTMLElement
Inheritance
HTMLInputElement
Inherited Members

Remarks

-HTML element implementing this interface: input

See also on MDN

Constructors

HTMLInputElement() 

public HTMLInputElement()

Properties

Accept

The accept property of the HTMLInputElement interface reflects the {{HTMLElement("input")}} element's accept attribute, generally a comma-separated list of unique file type specifiers providing a hint for the expected file type for an <input> of type file. If the attribute is not explicitly set, the accept property is an empty string.

[Value("accept")]
public string Accept { get; set; }

Property Value

string

A string representing the element's accept value or an empty string if no accept is explicitly set.

Remarks

-Type
-Multiple
-Capture
-File type specifiers
-Using files from web applications
-File API

See also on MDN

Align 

[Value("align")]
public string Align { get; set; }

Property Value

string

Alpha

NOTE
Experimental
The alpha property of the HTMLInputElement interface reflects the {{htmlelement("input")}} element's alpha attribute, which indicates whether the CSS color's alpha component can be manipulated by the end user and does not have to be fully opaque. It is only relevant to color controls. 
[Value("alpha")]
public bool Alpha { get; set; }

Property Value

bool

A boolean value.

Remarks

-<input type="color">

See also on MDN

Alt

The alt property of the HTMLInputElement interface defines the textual label for the button for users and user agents who cannot use the image. It reflects the {{htmlelement("input")}} element's alt attribute.

[Value("alt")]
public string Alt { get; set; }

Property Value

string

A string.

Remarks

The alt property is valid for the image type only. It should be a non-empty string giving the label that would be appropriate for an equivalent button if the image was unavailable.

-Alt
-HTMLButtonElement
-button
-input
-img
-Good alt text, bad alt text — Making your content perceivable on WCAG.com (2021)
-An alt Decision Tree on W3C Web Accessibility Initiative (WAI)

See also on MDN

Autocomplete

The autocomplete property of the HTMLInputElement interface indicates whether the value of the control can be automatically completed by the browser. It reflects the {{htmlelement("input")}} element's autocomplete attribute.

[Value("autocomplete")]
public string Autocomplete { get; set; }

Property Value

string

A string; the value of the autocomplete attribute ("on", "off", a <token-list>), or the empty string "" if unspecified.

Remarks

-input
-Value
-HTML autocomplete attribute
-ARIA aria-autocomplete attribute
-Turning off autocompletion

See also on MDN

Capture

The capture property of the HTMLInputElement interface reflects the {{HTMLElement("input")}} element's capture attribute. Only relevant to the <input> of type file, the property and attribute specify whether, a new file should be captured from a user-facing (user) or outward facing (environment) camera or microphone. The type of file is defined the accept attribute. If the attribute is not explicitly set, the capture property is an empty string.

[Value("capture")]
public string Capture { get; set; }

Property Value

string

A string; Generally either user or environment, or an empty string ("").

Remarks

-Type
-Multiple
-Accept
-Files
-File type specifiers
-Using files from web applications
-File API

See also on MDN

Checked

The checked property of the HTMLInputElement interface specifies the current checkedness of the element; that is, whether the form control is checked or not.

[Value("checked")]
public bool Checked { get; set; }

Property Value

bool

A boolean.

Remarks

The boolean checked property is relevant to the radio (<input type="radio">) and checkbox (<input type="checkbox">) input types.

The presence of the HTML checked attribute indicates the checkbox is checked by default. It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change; only the HTMLInputElement's checked IDL property is updated. The checked attribute is reflected by the DefaultChecked property.

When a radio input checked property is true, all other radio inputs with the same Name are false. If any radio button in a same-named group of radio buttons is Required, as long as one button in the group is checked, the 'ValidityState' object's read-only 'ValidityState.ValueMissing' property for each radio button in the group will be false.

A checkbox's value is only included in the submitted data upon form submission if checked is true. The value of the Indeterminate property has no effect on a checkbox's checked value.

-input
-Validity
-:checked pseudo-class

See also on MDN

ColorSpace

NOTE
Experimental
The colorSpace property of the HTMLInputElement interface reflects the {{HTMLElement("input")}} element's colorspace attribute, which indicates whether the color space of the serialized CSS color is sRGB (the default) or display-p3. It is only relevant to color controls. 
[Value("colorSpace")]
public string ColorSpace { get; set; }

Property Value

string

A string containing the value of the colorspace attribute.

Remarks

-<input type="color">

See also on MDN

DefaultChecked

The defaultChecked property of the HTMLInputElement interface specifies the default checkedness state of the element. This property reflects the {{htmlelement("input")}} element's checked attribute.

[Value("defaultChecked")]
public bool DefaultChecked { get; set; }

Property Value

bool

A boolean.

Remarks

The boolean checked attribute is valid for the radio (<input type="radio">) and checkbox (<input type="checkbox">) input types. The presence of the attribute sets the defaultChecked property to true.

-input
-:default pseudo-class
-:checked pseudo-class

See also on MDN

DefaultValue

The defaultValue property of the HTMLInputElement interface indicates the original (or default) value of the {{HTMLElement("input")}} element. It reflects the element's value attribute.

[Value("defaultValue")]
public string DefaultValue { get; set; }

Property Value

string

A string representing the default, or original, value of the <input> element.

Remarks

-Value
-Type

See also on MDN

DirName

The dirName property of the HTMLInputElement interface is the directionality of the element and enables the submission of that value. It reflects the value of the {{htmlelement("input")}} element's dirName attribute. This property can be retrieved or set.

[Value("dirName")]
public string DirName { get; set; }

Property Value

string

A string. The direction of the element.

Remarks

Valid only for hidden, text, search, url, tel, and email <input> types, the dirname attribute controls how the element's directionality is submitted. When included, the form control will submit with two name/value pairs: the first being the name and value, and the second being the value of the dirname attribute as the name, with a value of ltr or rtl as set by the browser.

-DirName
-dir attribute
-Sending form data

See also on MDN

Disabled

The HTMLInputElement.disabled property is a boolean value that reflects the disabled HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.

[Value("disabled")]
public bool Disabled { get; set; }

Property Value

bool

A boolean value.

Remarks

See also on MDN

Files

The HTMLInputElement.files property allows you to access the FileList selected with the <input type="file"> element.

[Value("files")]
public FileList? Files { get; set; }

Property Value

FileList

A FileList object listing the selected files, if any, or null if the HTMLInputElement is not of type="file".

Remarks

-Files

See also on MDN

Form

The form read-only property of the HTMLInputElement interface returns an HTMLFormElement object that owns this {{HTMLElement("input")}}, or null if this input is not owned by any form.

[Value("form")]
public HTMLFormElement? Form { get; }

Property Value

HTMLFormElement

An HTMLFormElement or null.

Remarks

-HTMLInputElement
-HTMLFormElement
-input
-HTML form attribute
-HTML forms guide

See also on MDN

FormAction

The formAction property of the HTMLInputElement interface is the URL of the program that is executed on the server when the form that owns this control is submitted. It reflects the value of the <input>'s formaction attribute.

[Value("formAction")]
public string FormAction { get; set; }

Property Value

string

A string. The URL for form submission.

Remarks

This property is valid only for submit and image <input> elements.

Its value overrides the Action property of the HTMLFormElement interface if the form is submitted via the input. This property can be retrieved or set.

-FormEnctype
-FormMethod
-FormNoValidate
-FormTarget
-<input type="submit">
-<input type="image">
-Sending form data

See also on MDN

FormEnctype

The formEnctype property of the HTMLInputElement interface is the {{Glossary("MIME_type", "MIME type")}} of the content sent to the server when the <input> with the formEnctype is the method of form submission. It reflects the value of the <input>'s formenctype attribute.

[Value("formEnctype")]
public string FormEnctype { get; set; }

Property Value

string

A string.

Remarks

This property is valid only for submit and image <input> elements.

Its value overrides the Enctype property of the HTMLFormElement interface if the form is submitted via the input. This property can be retrieved or set. If not set, the value is the empty string ("").

-FormAction
-FormMethod
-FormNoValidate
-FormTarget
-Enctype
-<input type="submit">
-<input type="image">
-Sending form data

See also on MDN

FormMethod

The formMethod property of the HTMLInputElement interface is the {{Glossary("HTTP")}} method used to submit the {{HtmlElement("form")}} if the {{HTMLElement("input")}} element is the control that submits the form. It reflects the value of the <input>'s formmethod attribute.

[Value("formMethod")]
public string FormMethod { get; set; }

Property Value

string

A string; "post", "get", "dialog", or "".

Remarks

This property is valid only for submit and image <input> elements.

The value overrides the Method property of the HTMLFormElement interface if the form is submitted via the input. This property can be retrieved or set. If set with an empty or invalid value, the invalid default value is "get". If not set at all, the value is the empty string ("").

-FormAction
-FormEnctype
-FormNoValidate
-FormTarget
-Method
-<input type="submit">
-<input type="image">
-Sending form data

See also on MDN

FormNoValidate

The formNoValidate property of the HTMLInputElement interface is a boolean value indicating if the {{htmlelement("form")}} will bypass constraint validation when submitted via the input. It reflects the <input> element's formnovalidate attribute.

[Value("formNoValidate")]
public bool FormNoValidate { get; set; }

Property Value

bool

A boolean.

Remarks

This property is valid only for submit and image <input> elements.

Its value overrides the NoValidate property of the HTMLFormElement interface if the form is submitted via the input. This property can be retrieved or set.

-ReportValidity()
-CheckValidity()
-FormAction
-FormEnctype
-FormMethod
-FormTarget
-<input type="submit">
-<input type="image">
-form
-NoValidate
-FormNoValidate
-Learn: Client-side form validation
-Guide: Constraint validation

See also on MDN

FormTarget

The formTarget property of the HTMLInputElement interface is the tab, window, or iframe where the response of the submitted {{HtmlElement("form")}} is to be displayed. It reflects the value of the {{HTMLElement("input")}} element's formtarget attribute.

[Value("formTarget")]
public string FormTarget { get; set; }

Property Value

string

A string.

Remarks

This property is valid only for submit and image <input> elements.

Its value overrides the Target property of the HTMLFormElement interface if the form is submitted via the input. This property can be retrieved or set. If not set, the value is the empty string ("").

-FormAction
-FormEnctype
-FormNoValidate
-FormMethod
-Target
-<input type="submit">
-<input type="image">
-Sending form data

See also on MDN

Height

The height property of the HTMLInputElement interface specifies the height of a control. It reflects the {{htmlelement("input")}} element's height attribute.

[Value("height")]
public ulong Height { get; set; }

Property Value

ulong

A number.

Remarks

The height property is valid for the image type only. It defines the vertical dimension of the image button, in pixels. If CSS sizing properties apply to the control, the value is the height of the content box of the rendered control, not the value of the height attribute. If no height is set and CSS does not impact the control's size, the height will be the intrinsic height of the image. If the image didn't load, the value will be the height of the alt text. The height will be 0 if the height is not known; if no height is set, CSS doesn't impact the height, the image didn't load, and either the value of the Alt is the empty string or no src is set.

-Width
-Src
-Alt
-HTMLButtonElement
-button
-input
-img
-CSS inline-size property
-CSS height property
-CSS aspect-ratio property
-CSS box sizing module

See also on MDN

Indeterminate

The indeterminate property of the HTMLInputElement interface returns a boolean value that indicates whether the checkbox is in the indeterminate state. For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked. The indeterminate state can only be set via JavaScript and is only relevant to checkbox controls.

[Value("indeterminate")]
public bool Indeterminate { get; set; }

Property Value

bool

A boolean.

Remarks

It is unrelated to the Checked property, and an indeterminate checkbox can be either checked or unchecked. Being indeterminate only affects the checkbox's appearance (see example below), not its presence when submitted (which is controlled by the checkedness).

-HTMLInputElement
-Checked
-input
-Indeterminate state checkboxes
-CSS :indeterminate property

See also on MDN

Labels

The HTMLInputElement.labels read-only property returns a
NodeList of the {{HTMLElement("label")}} elements associated with the
input element, if the element is not hidden. If the element has the
type hidden, the property returns null.

[Value("labels")]
public NodeList? Labels { get; }

Property Value

NodeList

A NodeList containing the <label> elements associated
with the <input> element.

Remarks

See also on MDN

List

The list read-only property of the HTMLInputElement interface returns the HTMLDataListElement pointed to by the list attribute of the element, or null if the list attribute is not defined or the list attribute's value is not associated with any <datalist> in the same tree.

[Value("list")]
public HTMLDataListElement? List { get; }

Property Value

HTMLDataListElement

An HTMLDataListElement or null.

Remarks

NOTE

This is a read-only property. To associate a <datalist> with an element, set the value of the list attribute with SetAttribute(string, string).

-Value
-Type
-HTMLDataListElement
-HTMLOptionElement
-HTMLCollection
-input
-datalist
-option

See also on MDN

Max

The max property of the HTMLInputElement interface reflects the {{HTMLElement("input")}} element's max attribute, which generally defines the maximum valid value for a numeric or date-time input. If the attribute is not explicitly set, the max property is an empty string.

[Value("max")]
public string Max { get; set; }

Property Value

string

A string representing the element's max value or an empty string if no max is explicitly set.

Remarks

-input of type input/range, input/number, input/date, input/month, input/week, and input/time
-Min
-Value
-Type

See also on MDN

MaxLength

The maxLength property of the HTMLInputElement interface indicates the maximum number of characters (in {{glossary("UTF-16", "UTF-16 code units")}}) allowed to be entered for the value of the {{HTMLElement("input")}} element, and the maximum number of characters allowed for the value to be valid. It reflects the element's maxlength attribute. -1 means there is no limit on the length of the value.

[Value("maxLength")]
public long MaxLength { get; set; }

Property Value

long

A number representing the element's maxlength if present, or -1.

Remarks

NOTE

Browser generally prevent users from entering more characters than the maxlength attribute allows. Should the length be longer, the element is considered invalid and the ValidityState object's TooLong property will be true.

-Value
-MinLength
-TooLong

See also on MDN

Min

The min property of the HTMLInputElement interface reflects the {{HTMLElement("input")}} element's min attribute, which generally defines the minimum valid value for a numeric or date-time input. If the attribute is not explicitly set, the min property is an empty string.

[Value("min")]
public string Min { get; set; }

Property Value

string

A string representing the element's min value or an empty string if no min is explicitly set.

Remarks

-input of type input/range, input/number, input/date, input/month, input/week, and input/time
-Max
-Value
-Type

See also on MDN

MinLength

The minLength property of the HTMLInputElement interface indicates the minimum number of characters (in {{glossary("UTF-16", "UTF-16 code units")}}) required for the value of the {{HTMLElement("input")}} element to be valid. It reflects the element's minlength attribute. -1 means there is no minimum length requirement.

[Value("minLength")]
public long MinLength { get; set; }

Property Value

long

A number representing the element's minlength if present or -1.

Remarks

NOTE

If the input has a value, and that value has fewer characters than the minlength attribute requires, the element is considered invalid and the ValidityState object's TooShort property will be true.

-Value
-MaxLength
-TooShort

See also on MDN

Multiple

The HTMLInputElement.multiple property indicates if an input can have more than one value. Firefox currently only supports multiple for <input type="file">.

[Value("multiple")]
public bool Multiple { get; set; }

Property Value

bool

A boolean value.

Remarks

-FileList
-Bug 523771 - Support <input type=file multiple>

See also on MDN

Name

The name property of the HTMLInputElement interface indicates the name of the {{HTMLElement("input")}} element. It reflects the element's name attribute.

[Value("name")]
public string Name { get; set; }

Property Value

string

A string representing the element's name.

Remarks

-Value
-Type

See also on MDN

Pattern

The pattern property of the HTMLInputElement interface represents a regular expression a non-null input value should match. It reflects the input element's pattern attribute.

[Value("pattern")]
public string Pattern { get; set; }

Property Value

string

A string.

Remarks

The pattern property is valid for text, search, url, tel, email, and password types. It defines a regular expression that the input's Value must match in order for the value to pass constraint validation.

If a non-null value doesn't conform to the constraints set by the pattern value, the 'ValidityState' object's read-only 'ValidityState.PatternMismatch' property will be true.

-input
-Value
-Client-side validation
-:valid and :invalid pseudo-classes

See also on MDN

Placeholder

The placeholder property of the HTMLInputElement interface represents a hint to the user of what can be entered in the control. It reflects the {{htmlelement("input")}} element's placeholder attribute.

[Value("placeholder")]
public string Placeholder { get; set; }

Property Value

string

A string.

Remarks

-input
-Value
-{{cssxref("::placeholder")}} pseudo-element
-:placeholder-shown pseudo-class

See also on MDN

ReadOnly

The readOnly property of the HTMLInputElement interface indicates that the user cannot modify the value of the {{htmlelement("input")}}. It reflects the {{htmlelement("input")}} element's readonly boolean attribute; returning true if the attribute is present and false when omitted.

[Value("readOnly")]
public bool ReadOnly { get; set; }

Property Value

bool

A boolean.

Remarks

Unlike a form control with a true Disabled property, a true readOnly property value does not prevent the user from clicking or selecting in the control.

While the HTML readonly attribute is ignored if the type is hidden, range, color, checkbox, radio, file, submit, reset, button, and image, the readOnly property is true for these input types if the attribute is present, false otherwise.

-input
-Disabled
-:read-only pseudo-class

See also on MDN

Required

The required property of the HTMLInputElement interface specifies that the user must fill in a value before submitting a form. It reflects the {{htmlelement("input")}} element's required attribute.

[Value("required")]
public bool Required { get; set; }

Property Value

bool

A boolean.

Remarks

While the HTML boolean required attribute is ignored if the type is hidden, range, color, submit, reset, button, and image, the required property is true for these input types if the attribute is present, false otherwise.

If a required input doesn't have a value, the 'ValidityState' object's read-only 'ValidityState.ValueMissing' property will be true.

-input
-Validity
-:required pseudo-class

See also on MDN

SelectionDirection

The selectionDirection property of the HTMLInputElement interface is a string that indicates the direction in which the user is selecting the text.

[Value("selectionDirection")]
public string? SelectionDirection { get; set; }

Property Value

string

A string. It can have one of the following values:

NOTE
On Windows, the direction indicates the position of the caret relative to the selection: a "forward" selection has the caret at the end of the selection and a "backward" selection has the caret at the start of the selection. Windows has no "none" direction.
NOTE
On Mac, the direction indicates which end of the selection is affected when the user adjusts the size of the selection using the arrow keys with the Shift modifier: the "forward" direction means the end of the selection is modified, and the "backward" direction means the start of the selection is modified. The "none" direction is the default on Mac, it indicates that no particular direction has yet been selected. The user sets the direction implicitly when first adjusting the selection, based on which directional arrow key was used.

Remarks

-SelectionDirection property
-SelectionStart property
-SelectionEnd property
-SetSelectionRange(ulong, ulong, string) method

See also on MDN

SelectionEnd

The selectionEnd property of the HTMLInputElement interface is a number that represents the end index of the selected text. When there is no selection, this returns the offset of the character immediately following the current text input cursor position.

[Value("selectionEnd")]
public ulong? SelectionEnd { get; set; }

Property Value

ulong?

A non-negative number.

Remarks

NOTE

According to the WHATWG forms spec selectionEnd property applies only to inputs of types text, search, URL, tel, and password. In modern browsers, throws an exception while setting selectionEnd property on the rest of input types. Additionally, this property returns null while accessing selectionEnd property on non-text input elements.

If selectionEnd is less than selectionStart, then both are
treated as the value of selectionEnd.

-SelectionEnd property
-SelectionStart property
-SetSelectionRange(ulong, ulong, string) method

See also on MDN

SelectionStart

The selectionStart property of the HTMLInputElement interface is a number that represents the beginning index of the selected text. When nothing is selected, then returns the position of the text input cursor (caret) inside of the <input> element.

[Value("selectionStart")]
public ulong? SelectionStart { get; set; }

Property Value

ulong?

A non-negative number.

Remarks

NOTE

According to the WHATWG forms spec selectionStart property applies only to inputs of types text, search, URL, tel, and password. In modern browsers, throws an exception while setting selectionStart property on the rest of input types. Additionally, this property returns null while accessing selectionStart property on non-text input elements.

If selectionStart is greater than selectionEnd, then both are
treated as the value of selectionEnd.

-SelectionStart property
-SelectionEnd property
-SetSelectionRange(ulong, ulong, string) method

See also on MDN

Size

The size property of the HTMLInputElement interface defines the number of visible characters displayed. It reflects the {{htmlelement("input")}} element's size attribute.

[Value("size")]
public ulong Size { get; set; }

Property Value

ulong

An integer.

Remarks

The size property is relevant to the text, search, tel, email, url, and password input type only. The value is a non-negative integer greater than zero. If omitted or invalid, the value is 20.

-MinLength
-MaxLength
-Size

See also on MDN

Src

The src property of the HTMLInputElement interface specifies the source of an image to display as the graphical submit button. It reflects the {{htmlelement("input")}} element's src attribute.

[Value("src")]
public string Src { get; set; }

Property Value

string

A string.

Remarks

The src property is valid for the image type only.

-HTMLButtonElement
-button
-input
-img

See also on MDN

Step

The step property of the HTMLInputElement interface indicates the step by which numeric or date-time {{HTMLElement("input")}} elements can change. It reflects the element's step attribute. Valid values include the string "any" or a string containing a positive floating point number. If the attribute is not explicitly set, the step property is an empty string.

[Value("step")]
public string Step { get; set; }

Property Value

string

A string representing the element's step value or an empty string if no step is explicitly set.

Remarks

-input of type input/range, input/number, input/date, input/month, input/week, and input/time
-Value
-Type

See also on MDN

Type

The type property of the HTMLInputElement interface indicates the kind of data allowed in the {{HTMLElement("input")}} element, for example a number, a date, or an email. Browsers will select the appropriate widget and behavior to help users to enter a valid value.

[Value("type")]
public string Type { get; set; }

Property Value

string

A string representing the type.Its possible values are listed in the attribute's input types section.

Remarks

It reflects the type attribute of the input element.

-Type property
-Type property

See also on MDN

UseMap 

[Value("useMap")]
public string UseMap { get; set; }

Property Value

string

ValidationMessage

The validationMessage read-only property of the HTMLInputElement interface returns a string representing a localized message that describes the validation constraints that the {{htmlelement("input")}} control does not satisfy (if any).

[Value("validationMessage")]
public string ValidationMessage { get; }

Property Value

string

A string.

Remarks

If the <input> element is not a candidate for constraint validation (WillValidate is false), or it satisfies its constraints, the value is the empty string ("").

If the element is a candidate for constraint validation (willValidate is true) and the constraints are not met (the Validity object's valid property is false), the value is the error message that would be shown to the user during validation.

-input
-HTMLInputElement
-WillValidate
-Validity
-CheckValidity()
-ReportValidity()
-SetCustomValidity(string)
-Learn: Client-side form validation
-Guide: Constraint validation
-CSS :valid and :invalid pseudo-classes

See also on MDN

Validity

The validity read-only property of the HTMLInputElement interface returns a ValidityState object that represents the validity states this element is in.

[Value("validity")]
public ValidityState Validity { get; }

Property Value

ValidityState

A ValidityState object.

Remarks

-CheckValidity()
-input
-form
-Learn: Client-side form validation
-Guide: Constraint validation

See also on MDN

Value

The value property of the HTMLInputElement interface represents the current value of the {{htmlelement("input")}} element as a string.

[Value("value")]
public string Value { get; set; }

Property Value

string

A string specifying the default value of the input element.

Remarks

This property can also be set directly, for example to set a default value based on some condition.

-input
-ValueAsDate
-ValueAsNumber

See also on MDN

ValueAsDate

The valueAsDate property of the HTMLInputElement interface represents the current value of the {{htmlelement("input")}} element as a {{jsxref("Date")}}, or null if conversion is not possible.

[Value("valueAsDate")]
public Object? ValueAsDate { get; set; }

Property Value

Object

A Date object or null if a conversion is impossible. The date returned should always be interpreted as a UTC time—for example, using methods like getUTCDate() instead of getDate(). If you are not careful, the result may be off by 1—for example, if the user lives in a negative UTC offset (the US, for example), then interpreting the date as a local date will result in the previous day from what the user selected.The month, date, and week input types return a UTC date that represents the first instant of the inputted time span—that is, they are always midnight in UTC. For month, the date is the first day of the month. For week, the date is the Monday of the week. The time input type always has the date set to 1970-01-01.The datetime-local input type does not support the valueAsDate property, because it represents a date and time in the local time zone (a wall clock time), but Date objects represent an absolute point in time. However, some browsers may provide a non-standard implementation. WHATWG is working on integrating the Temporal API with the date/time inputs to account for this use case.

Remarks

This property can also be set directly, for example to set a default date based on some condition. If the provided value is neither null nor a Date object, a TypeError is thrown. If the provided value is null or an invalid date, the input value is set to the empty string.

This property always returns null when accessed on an input that isn't date- or time-based. When setting this property on such an input, an InvalidStateError DOMException is thrown.

-input
-Value
-ValueAsNumber

See also on MDN

ValueAsNumber

The valueAsNumber property of the HTMLInputElement interface represents the current value of the {{htmlelement("input")}} element as a number or NaN if converting to a numeric value is not possible.

[Value("valueAsNumber")]
public double ValueAsNumber { get; set; }

Property Value

double

A number that represents the value of the element or NaN if numeric conversion is impossible.

Remarks

This property can also be set directly, for example to set a default numeric value based on some condition.

-input
-Value
-ValueAsDate

See also on MDN

WebkitEntries

The read-only webkitEntries
property of the HTMLInputElement interface contains an array of file
system entries (as objects based on FileSystemEntry) representing files
and/or directories selected by the user using an input element of
type file, but only if that selection was made using drag-and-drop:
selecting a file in the dialog will leave the property empty.

[Value("webkitEntries")]
public FileSystemEntry[] WebkitEntries { get; }

Property Value

FileSystemEntry[]

An array of objects based on FileSystemEntry, each representing one file
which is selected in the input element. More specifically, files are
represented by FileSystemFileEntry objects, and, if they're allowed,
directories are represented by FileSystemDirectoryEntry objects.

Remarks

The array can only contain directories if the
Webkitdirectory property is
true. This means the <input> element was configured to
let the user choose directories.

NOTE

This property is called webkitEntries in the specification due to its
origins as a Google Chrome-specific API. It's likely to be renamed someday.

-File and Directory Entries API
-HTMLInputElement
-FileSystemEntry
-FileSystem

See also on MDN

Webkitdirectory

The webkitdirectory property of the HTMLInputElement interface reflects the webkitdirectory HTML attribute, which indicates that <input type="file"> elements can only select directories instead of files.

[Value("webkitdirectory")]
public bool Webkitdirectory { get; set; }

Property Value

bool

A Boolean; true if the input element should allow picking only directories or false if only files should be selectable.

Remarks

When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items.
The selected file system entries can be obtained using the WebkitEntries property.

NOTE

This property is called webkitdirectory in the specification due to its origins as a Google Chrome-specific API.

-File and Directory Entries API
-WebkitEntries
-WebkitRelativePath

See also on MDN

Width

The width property of the HTMLInputElement interface specifies the width of a control. It reflects the {{htmlelement("input")}} element's width attribute.

[Value("width")]
public ulong Width { get; set; }

Property Value

ulong

A number.

Remarks

The width property is valid for the image type only. It defines the preferred horizontal size of the image button, in pixels. The property value is the width of the content-box of the rendered button. CSS box model properties impacting the size of the control take precedence.

If no width is set and no CSS width properties impact the control, the width will be the intrinsic width of the image. If the image didn't load, the value will be the maximum intrinsic width of the alt text. The width will be 0 if the width is not known; if no width is set, no CSS dimensions apply, no image loaded, and either the value of the Alt is the empty string or no src is set.

-Height
-Src
-Alt
-HTMLButtonElement
-button
-input
-img
-CSS inline-size property
-CSS width property
-CSS aspect-ratio property
-CSS box sizing module

See also on MDN

WillValidate

The willValidate read-only property of the HTMLInputElement interface indicates whether the {{htmlelement("input")}} element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including:

[Value("willValidate")]
public bool WillValidate { get; }

Property Value

bool

A boolean value.

Remarks

-CheckValidity()
-input
-form
-Learn: Client-side form validation
-Guide: Constraint validation

See also on MDN

Methods

CheckValidity()

The checkValidity() method of the HTMLInputElement interface returns a boolean value which indicates if the element meets any constraint validation rules applied to it. If false, the method also fires an HTMLElementinvalid event on the element. Because there's no default browser behavior for checkValidity(), canceling this invalid event has no effect.

[Value("checkValidity")]
public bool CheckValidity()

Returns

bool

Returns true if the element's value has no validity problems; otherwise, returns false.

Remarks

NOTE

An HTML {{htmlelement("input")}} element with a non-null ValidationMessage is considered invalid, will match the CSS {{cssxref(":invalid")}} pseudo-class, and will cause checkValidity() to return false. Use the SetCustomValidity(string) method to set the ValidationMessage to the empty string to set the Validity state to be valid.

-ReportValidity()
-input
-form
-Learn: Client-side form validation
-Guide: Constraint validation
-CSS :valid and :invalid pseudo-classes

See also on MDN

ReportValidity()

The reportValidity() method of the HTMLInputElement interface performs the same validity checking steps as the CheckValidity() method. In addition, if the HTMLElementinvalid event is not canceled, the browser displays the problem to the user.

[Value("reportValidity")]
public bool ReportValidity()

Returns

bool

Returns true if the element's value has no validity problems; otherwise, returns false.

Remarks

-CheckValidity()
-input
-form
-Learn: Client-side form validation
-Guide: Constraint validation
-CSS :valid and :invalid pseudo-classes

See also on MDN

Select()

The HTMLInputElement.select() method selects all the text
in a textarea element or in an input element
that includes a text field.

[Value("select")]
public GlobalObject.Undefined Select()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-input
-textarea
-HTMLInputElement
-SetSelectionRange(ulong, ulong, string)

See also on MDN

SetCustomValidity(string)

The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.

[Value("setCustomValidity")]
public GlobalObject.Undefined SetCustomValidity(string error)

Parameters

error string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-Learn: Client-side form validation
-Guide: Constraint validation
-'ValidityState'

See also on MDN

SetRangeText(string)

The HTMLInputElement.setRangeText() method replaces a
range of text in an input or textarea element with
a new string.

[Value("setRangeText")]
public GlobalObject.Undefined SetRangeText(string replacement)

Parameters

replacement string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-input
-textarea
-HTMLInputElement
-Selection

See also on MDN

SetRangeText(string, ulong, ulong, SelectionMode)

The HTMLInputElement.setRangeText() method replaces a
range of text in an input or textarea element with
a new string.

[Value("setRangeText")]
public GlobalObject.Undefined SetRangeText(string replacement, ulong start, ulong end, SelectionMode selectionMode = SelectionMode.Select)

Parameters

replacement string
start ulong
end ulong
selectionMode SelectionMode

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-input
-textarea
-HTMLInputElement
-Selection

See also on MDN

SetSelectionRange(ulong, ulong, string)

The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an input or textarea element. This updates the selection state immediately, though the visual highlight only appears when the element is focused.

[Value("setSelectionRange")]
public GlobalObject.Undefined SetSelectionRange(ulong start, ulong end, string direction = null)

Parameters

start ulong
end ulong
direction string

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

Optionally, you can specify the direction in which selection should be considered to have occurred. This lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning.

This method updates the SelectionStart, SelectionEnd, and SelectionDirection properties in one call, regardless of whether the element is focused. The visual selection highlight will only appear when the element has focus.

The element must be of one of the following input types: password, search, tel, text, or url. Otherwise the browser throws an InvalidStateError exception.

If you wish to select all text of an input element, you can use the HTMLInputElement.select() method instead.

-input
-textarea
-HTMLInputElement
-Selection

See also on MDN

ShowPicker()

The HTMLInputElement.showPicker() method displays the browser picker for an input element.

[Value("showPicker")]
public GlobalObject.Undefined ShowPicker()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

This is the same picker that would normally be displayed when the element is selected, but can be triggered from a button press or other user interaction.

Commonly browsers implement it for inputs of these types: "date", "month", "week", "time", "datetime-local", "color", or "file".
It can also be prepopulated with items from a datalist element or autocomplete attribute.

More generally, this method should ideally display the picker for any input element on the platform that has a picker.

-input
-HTMLInputElement
-ShowPicker()
-datalist
-autocomplete

See also on MDN

StepDown(long)

The
HTMLInputElement.stepDown() method decrements the
value of a numeric type of input element by the value of the
step attribute or up
to n multiples of the step attribute if a number is passed as the
parameter.

[Value("stepDown")]
public GlobalObject.Undefined StepDown(long n = 0)

Parameters

n long

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

The method, when invoked, decrements the
value by (step * n), where n
defaults to 1 if not specified, and
step defaults to the
default value for step if not specified.

Valid on all numeric, date, and time input types that support the step attribute,
including input/date, input/month,
input/week, input/time,
input/datetime-local,
input/number, and input/range.

Given <input id="myTime" type="time" max="17:00" step="900" value="17:00">,
invoking myTime.stepDown(3) will change the value to 16:15, decrementing the
time by 3 * 900, or 45 minutes. myTime.stepDown(), with no
parameter, would have resulted in 16:45, as n defaults to
1.

However, calling stepDown on <input type="time" max="17:00" step="900"> would not set the value to 17:00, as one would expect — and as it does for stepUp when the input is <input type="time" min="17:00" step="900">. Instead, the first call to stepDown will set the initial value to 23:45 even though the max attribute is set. The second call will set the value to 17:00. And the third call to will set the value to 16:45.

The method, when invoked, changes the form control's value by the value given in the
step attribute, multiplied by the parameter, within the constraints set
within the form control. The default value for the parameter, if not is passed, is 1.
The method will not cause the value to go below the
min value set or defy the
constraints set by the
step attribute. A
negative value for n will increment the value, but will not increment
beyond the max value.

If the value before invoking the stepDown() method is invalid, for
example, if it doesn't match the constraints set by the step attribute,
invoking the stepDown() method will return a value that does match the form
controls constraints.

If the form control is non time, date, or numeric in nature, and therefore does not
support the step attribute (see the list of supported input types above), or if the step value is set to any, an
InvalidStateError exception is thrown.

-input
-HTMLInputElement
-StepUp(long)
-step,
min and
max attributes

See also on MDN

StepUp(long)

The HTMLInputElement.stepUp() method increments the value
of a numeric type of input element by the value of the
step attribute, or the
default step value if the step attribute is not explicitly set. The method,
when invoked, increments the value by
(step * n), where n defaults to
1 if not specified, and
step defaults to the
default value for step if not specified.

[Value("stepUp")]
public GlobalObject.Undefined StepUp(long n = 0)

Parameters

n long

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

The method, when invoked, changes the form control's value by the value given in the
step attribute, multiplied by the parameter, within the constraints set on
the form control. The default value for the parameter, if no value is passed, is
1. The method will not cause the value to exceed the
set max value, or defy
the constraints set by the
step attribute.

If the value before invoking the stepUp() method is invalid—for example,
if it doesn't match the constraints set by the step attribute—invoking the
stepUp() method will return a value that does match the form controls
constraints.

If the form control is non time, date, or numeric in nature, and therefore does not
support the step attribute (see the list of supported input types in the
table above), or if the step value is set to any, an
InvalidStateError exception is thrown.

-input
-HTMLInputElement
-StepDown(long)
-step,
min and
max attributes

See also on MDN

Edit this page