/

HTML / CSS / JavaScript Tutorial

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


Desktop view | Switch to Mobile