HTML Element: <input>
[this page | pdf | back links]
The HTML <input> element indicates a
(single-line) input control into which the user can enter data. It is used
within a <form>
element. There are many different types of <input>
element that vary depending on the type attribute of
the element, including:
-
button, checkbox, color, date, datetime, datetime-local, email, file,
hidden, image, month, number, password, radio, range, reset, search, submit,
tel, text, time, url, week
In HTML markup <input> elements are empty (they
only involve attributes). Labels for input elements can be defined using the <label>
element.
The
attributes it
can take (other than HTML global
attributes and HTML
event attributes) include:
Attribute
|
Description
|
More
|
accept
|
Specifies types of file
accepted by server
|
Here. Only for
type = file
|
alt
|
Specifies alternative
text to show when original content fails to display
|
Here
|
autocomplete
|
Specifies whether
element has autocomplete enabled
|
Here
|
autofocus
|
Specifies whether
element should automatically get focus when page loads
|
Here
|
checked
|
Specifies that the element
should be pre-selected
|
Here. For type=
checkbox or type = radio
|
dirname
|
Specifies text
direction will be submitted
|
Here
|
disabled
|
Specified element(s) to
be disabled
|
Here
|
form
|
Name of the form that
element belongs to
|
Here
|
formaction
|
Where to send form-data
to when form submitted
|
Here. Only
for type = image and type = submit
|
formenctype
|
How form-data should be
encoded before sending it to a server
|
Here. Only
for type = image and type = submit
|
formmethod
|
How to send form-data (i.e. which HTTP method to use)
|
Here. Only
for type = image and type = submit
|
formnovalidate
|
Specifies that form-data should not be validated on submission
|
Here. Only
for type = image and type = submit
|
formtarget
|
Specifies where to display the response that is received after
submitting form
|
Here. Only
for type = image and type = submit
|
height
|
Height of element
|
Here
|
list
|
Refers to <datalist>
that contains pre-defined options
|
Here
|
max
|
Maximum value
|
Here
|
maxlength
|
Maximum number of
characters allowed in an element
|
Here
|
min
|
Minimum value
|
Here
|
multiple
|
Indicates that a user
can enter more than one value
|
Here
|
name
|
Name of element
|
Here
|
pattern
|
Regular expression that
value of element is checked against
|
Here
|
placeholder
|
Short hint describing
expected value of element
|
Here
|
readonly
|
Whether element is
read-only
|
Here
|
required
|
Whether the element
must be filled out before submitting form
|
Here
|
size
|
Specifies width in
characters of element
|
Here
|
src
|
URL of
resource
|
Here
|
step
|
Accepted number
intervals
|
Here
|
type
|
Type of element
|
Here
|
value
|
Value of element
|
Here
|
width
|
Width of element
|
Here
|
Some of these attributes
are valid for only some <input>
element types:
type
|
Valid attributes
|
all
|
autofocus (except for hidden
type), disabled (except for hidden type), form, name,
type, value
|
button
|
-
|
checkbox
|
checked, required
|
color
|
autocomplete, list
|
date
|
autocomplete, max,
min, readonly, required,
step
|
datetime
|
autocomplete, list,
max, min, readonly,
required, step
|
datetime-local
|
autocomplete, list,
max, min, readonly,
required, step
|
email
|
autocomplete, list,
maxlength, multiple, pattern, placeholder,
readonly, required, size
|
file
|
accept, multiple,
required
|
hidden
|
-
|
image
|
alt, formAction,
formEnctype, formMethod, formNoValidate, formTarget,
height, src, width
|
month
|
autocomplete, list,
max, min, readonly,
required, step
|
number
|
autocomplete, list,
max, min, placeholder,
readonly, required, step
|
password
|
autocomplete, maxlength,
pattern, placeholder, readonly, required,
size
|
radio
|
checked, required
|
range
|
autocomplete, list,
max, min, step
|
reset
|
-
|
search
|
autocomplete, list,
maxlength, pattern, placeholder, readonly,
required, size
|
submit
|
formAction, formEnctype,
formMethod, formNoValidate, formTarget
|
text
|
autocomplete, list,
maxlength, pattern, placeholder, readonly,
required, size
|
time
|
autocomplete, list,
max, min, readonly,
required, step
|
url
|
autocomplete, list,
maxlength, pattern, placeholder, readonly,
required, size
|
week
|
autocomplete, list,
max, min, readonly,
required, step
|
It used to accept the align attribute, but this is no longer
supported in HTML 5.
To create or access such an element in JavaScript
see here. The
corresponding HTML DOM
object supports standard
DOM properties and methods, and additional properties with the same name and
meaning as the attributes of the underlying HTML element referred to above
(with the formaction, formenctype, formmethod, formnovalidate,
formtarget, maxlength and readonly properties of the underlying element
corresponding to the formAction,
formEnctype, formMethod, formNoValidate, formTarget,
maxLength and readOnly properties of the DOM object).
It also supports the following additional properties and methods:
Additional properties:
Property
|
Description
|
Applies to type
|
defaultChecked
|
Returns default value
of checked attribute
|
checkbox, radio. See Here
|
defaultValue
|
Sets / returns default
value
|
All. See Here
|
files
|
Returns
a FileList object representing file(s) selected by upload button
|
file. See Here
|
form
|
Returns form that
contains element
|
All. See Here
|
indeterminate
|
Sets / returns value of its indeterminate status
|
checkbox. See Here
|
Additional methods:
Method
|
Description
|
Applies to type
|
select()
|
Selects content of
password field
|
Password. See Here
|
stepDown()
|
Decrements value of relevant
field by specified amount
|
datetime, datetime-local, month, number, range,
time, week. See Here
|
stepUp()
|
Increments value of relevant
field by specified amount
|
datetime, datetime-local,
month, number, range,
time, week
|
The default style
applicable to this element is shown here.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<form action="http://www.nematrian.com/ExpressionEvaluator.aspx">
Evaluate: <input type="text" name="expr" value="3*5">
<input type="submit" value="Go to webpage to evaluate">
</form>
<br><br>Created using JavaScript:<br>
<span id="element"></span>
<script>
var f = document.createElement("FORM");
f.setAttribute("action","http://www.nematrian.com/ExpressionEvaluator.aspx");
var x1 = document.createElement("INPUT");
x1.setAttribute("type","text");
x1.setAttribute("name","expr");
x1.setAttribute("value","3*5");
var x2 = document.createElement("INPUT");
x2.setAttribute("type","submit");
x2.setAttribute("value","Go to webpage to evaluate");
var txt = document.createTextNode("Evaluate: ");
f.appendChild(txt);
f.appendChild(x1);
f.appendChild(x2);
document.getElementById("element").appendChild(f);
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | HTML Elements