input
Summary
The input element (<input/>) is a multipurpose element for representing form widgets. The type of widget depends on the type attribute.
Overview Table
The input element behavior varies depending on the value of its type attribute:
- type=button
- type=checkbox
- type=color
- type=date
- type=datetime-local
- type=email
- type=file
- type=hidden
- type=image
- type=month
- type=number
- type=password
- type=radio
- type=range
- type=reset
- type=time
- type=search
- type=submit
- type=tel
- type=text (default if type is not set or empty)
- type=url
- type=week
Other valid attributes for the input element are accept
, alt
, autocomplete
, autofocus
, checked
, dirname
, disabled
, form
, formaction
, formenctype
, formmethod
, formnovalidate
, formtarget
, height
, list
, max
, maxlength
, min
, multiple
, name
, pattern
, placeholder
, readonly
, required
, size
, src
, step
, value
, width
, and global element attributes. Note that some attributes do not apply for certain types.
Internationalization topics related to the input
element:
Examples
This example uses the input element to create different types of input controls.
<form action="http://example.org/survey" method="post">
<p>Name</p>
<br/><input name="control1" type="text" value="Your Name"/>
<p>Password</p>
<br><input type="password" name="control2"/>
<p>Color</p>
<br><input type="radio" name="control3" value="0" checked="checked"/>Red
<input type="radio" name="control3" value="1"/>Green
<input type="radio" name="control3" value="2"/>Blue
<p>Comments</p>
<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>
Usage
To cater for international users see: Managing text direction in form controls
Notes
For code samples, see Form controls part 1 and Form controls part 2: validation on the Windows Internet Explorer sample site.
Firefox will, unlike other browsers, by default, persist the dynamic disabled state and (if applicable) dynamic checkedness of an input across page loads. Setting the value of the autocomplete
attribute to off
disables this feature; this works even when the autocomplete
attribute would normally not apply to the input by virtue of its type
. See Mozilla bug #654072.
Safari Mobile for iOS applies a default style of opacity
: 0.4
to disabled textual input elements. Other major browsers don’t currently share this particular default style.
Related specifications
See also
Related articles
HTML
input
External resources
http://www.w3.org/TR/html-markup/input.html#input
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]