input element | HTMLInputElement object

Creates input controls that can be defined by the type attribute. For example, input type=file, input type=password, input type=text, or input type=tel fields.

View Sample

HTML5 A vocabulary and associated APIs for HTML and XHTML

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5

HTML information

Closing Tag	required
CSS Display	inline
HTML Element Categories	flow phrasing interactive

DOM Information

Inheritance Hierarchy

Node

Element

HTMLElement

HTMLInputElement

Members

The HTMLInputElement object has these types of members:

Events
Properties

Events

The HTMLInputElement object has these events.

Event	Description
oninvalid	Provides specified alert text if an input element is invalid.

Properties

The HTMLInputElement object has these properties.

Property	Access type	Description
accept		Sets or retrieves a comma-separated list of content types.
align		Sets or retrieves how the object is aligned with adjacent text.
alt		Sets or retrieves a text alternative to the graphic.
animation	Read/write	Specifies shorthand values that define animation properties for object properties identified in the @keyframes at-rule of the animations-name property.
animationDelay	Read/write	Specifies the offset within an animation cycle (the amount of time from the start of a cycle) before the animation is displayed for a set of corresponding object properties identified in the CSS @keyframes at-rule specified by the animation-name property.
animationDirection	Read/write	Specifies the direction of play for an animation cycle.
animationDuration	Read/write	Specifies the length of time to complete one cycle of the animation.
animationFillMode	Read/write	Specifies whether the effects of an animation are visible before or after it plays.
animationIterationCount	Read/write	Specifies the number of times an animation cycle is played.
animationName	Read/write	Identifies one or more animation names. An animation name selects a CSS @keyframes at-rule.
animationPlayState	Read/write	Specifies whether an animation is playing or paused.
animationTimingFunction	Read/write	Specifies the intermediate property values to be used during a single cycle of an animation on a set of corresponding object properties identified in the CSS @keyframes at-rule specified by the animation-name property.
backfaceVisibility	Read/write	Gets or sets a value that specifies whether the back face (reverse side) of an object is visible.
checked		Sets or retrieves the state of the check box or radio button.
complete		Retrieves whether the object is fully loaded.
constructor		Returns a reference to the constructor of an object.
dynsrc		This property is deprecated. Sets or retrieves the address of a video clip or VRML world to display in the window.
hspace		Sets or retrieves the horizontal margin for the object.
loop		Sets or retrieves the number of times a sound or video clip will loop when activated.
lowsrc		Sets or retrieves a lower resolution image to display.
msGridColumn	Read/write	Gets or sets a value that specifies in which column of the grid to place the object.
msGridColumnAlign	Read/write	Gets or sets a value that specifies the horizontal alignment of the object within the grid column.
msGridColumns	Read/write	Gets or sets one or more values that specify the width of each grid column within the object.
msGridColumnSpan	Read-only	Gets or sets a value that specifies the number of columns of the grid that the object spans.
msGridRow	Read/write	Gets or sets a value that specifies in which row of the grid to place the object.
msGridRowAlign	Read/write	Gets or sets a value that specifies the vertical alignment of the object within the grid row.
msGridRows	Read/write	Gets or sets one or more values that specify the height of each grid row within the object.
msGridRowSpan	Read/write	Gets or sets a value that specifies the number of rows of the grid that the object spans.
perspective	Read/write	Gets or sets a value that represents the perspective from which all child elements of the object are viewed.
perspectiveOrigin	Read/write	Gets or sets one or two values that represent the origin (the vanishing point for the 3-D space) of an object with an perspective property declaration.
start		Sets or retrieves when a video clip file should begin playing.
transformStyle	Read/write	Gets or sets a value that specifies how child elements of the object are rendered in 3-D space.
transition	Read/write	Gets or sets one or more shorthand values that specify the transition properties for a set of corresponding object properties identified in the transition-property property.
transitionDelay	Read/write	Gets or sets one or more values that specify the offset within a transition (the amount of time from the start of a transition) before the transition is displayed for a set of corresponding object properties identified in the transition property.
transitionDuration	Read/write	Gets or sets one or more values that specify the durations of transitions on a set of corresponding object properties identified in the transition-property property.
transitionProperty	Read/write	Gets or sets a value that identifies the CSS property name or names to which the transition effect (defined by the transition-duration, transition-timing-function, and transition-delay properties) is applied when a new property value is specified.
transitionTimingFunction	Read/write	Gets or sets one or more values that specify the intermediate property values to be used during a transition on a set of corresponding object properties identified in the transition-property property.
useMap		Sets or retrieves the URL, often with a bookmark extension (#name), to use as a client-side image map.
value		Sets or retrieves the displayed value for the control object. This value is returned to the server when the control object is submitted.
vspace		Sets or retrieves the vertical margin for the object.

Standards information

Remarks

In IE8 Standards mode, the title attribute is preferred over the alt attribute when specified as a pop-up tooltip. This applies only when the type attribute is set to image. For more info, see Defining Document Compatibility.

Note For code samples, see Form controls part 1 and Form controls part 2: validation on the Windows Internet Explorer sample site.

Examples

This example uses the input element to create different types of input controls.

JavaScript


<!DOCTYPE html>
<html>

<head>
  <title>Title Here</title>
</head>

<body>
  <form action="http://intranet/survey" method="post">
    Name
    <br />
    <input name="control1" type="text" value="Your Name">
    <br />
    <br />
    Password
    <br />
    <input type="password" name="control2">
    <br />
    <br />
    Color
    <br />
    <input type="radio" name="control3" value="0" checked>Red
    <input type="radio" name="control3" value="1">Green
    <input type="radio" name="control3" value="2">Blue
    <br />
    <br />
    Comments
    <br />
    <input type="text" name="control4" size="20,5" maxlength="250">
    <p><input name="control5" type="checkbox" checked>Send receipt</p>
    <p><input type="submit" value="OK"> <input type="reset" value="Reset"></p>
  </form>
</body>

</html>