HTML <input> tagS2C Home   « HTML <input> tag

Definition

The <input> tag is a self closing tag that is used along with its type attribute to define an area of a form for user input.

The type attribute of the <input> element can be: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text (default), time, url or week.

Use the <label> HTML tag to give the input control a description and to aid accessibility.

Example


<p>Please fill in our Pie Survey:</p>
<form action="../htmlintermediate/simpleform.html"  method="get">
  <p>Name:<input type="text" name="name"></p>
  <p>Which pie do you prefer?:</p>
  <p><input type="radio" name="pie" checked="checked" value="Chicken" id="chicken">
     <label for="chicken">Chicken</label></p>
  <p><input type="radio" name="pie" value="Fish" id="fish">
     <label for="fish">Fish</label></p>
  <p><input type="radio" name="pie" value="Shepherds" id="shepherds">
     <label for="shepherds">Shepherds</label></p>
  <p>Other stuff you wanna tell us about pies:</p>
  <p><textarea rows="3" cols="30" name="comments"></textarea></p>
  <p>Submit your information:</p>
  <p><input type="submit" value="Submit"></p>
</form>

Please fill in our Pie Survey:

Name:

Which pie do you prefer?:

Other stuff you wanna tell us about pies:

Submit your information:

Attributes

The following attributes can be used with the <input> tag.


<input> Specific Attributes
Attribute Value Description Example
acceptaudio/* image/* video/* or

MIME types without parameters or

File extensions starting with a period.		Specifies a comma-separated list of content types that the server accepts.

Only used when the type attribute value is file.		 

<input type="file" 
       accept=".doc,.docx,application/msword">
<input type="file"
       accept="image/*,video/*">
alttextSpecifies an alternate text for the image (provides information if the image cannot be loaded)

Only used when the type attribute value is image.		 

<input type="image" src="../../images/apple.jpg"
       alt="apple">
autocompleteoff and onSpecifies a comma-separated list of content types that the server accepts. 

<input type="text" name="name" 
       autocomplete="off">
autofocusempty string or autofocusSpecifies a field to give focus to on page load. 

<input type="text" name="name" 
       autofocus>
<input type="text" name="name" 
       autofocus="autofocus">
checkedcheckedSpecifies a preselected state for a checkbox or radio button when the page loads.

Only used when the type attribute value is checkbox or radio.		 

<!-- Checkbox button example -->
<input type="checkbox" name="pie" 
       value="Chicken" id="chicken" checked>

<!-- Radio button example -->
<input type="radio" name="pie" 
       value="Fish" id="fish" checked>
dirnametextSpecifies the direction of the text entered in the input field. 

<!-- ** not supported in Firefox ** -->
<input type="text" name="name" 
       dirname="someText">
disabledempty string or disabledSpecifies an input element is to be disabled until a certain condition occurs. 

<input type="text" name="name" 
       disabled>
<input type="text" name="name" 
       disabled="disabled">
formform idThe form that the input element belongs to.

Works with all types except type=password.		 

<input type="text" name="name" 
       form="someForm">
formactionurlSpecifies the url of a file that will process the image or submission.

Only used with type=image or type=submit.		 

<input type="submit" name="name" 
       formaction="someFile">
formenctypeapplication/x-www-form-urlencoded (default)

multipart/form-data

text/plain		Specifies how form-data should be encoded when sending it to a server.

Only used with type=image or type=submit and method="post".		 

<input type="submit" name="name" 
   formenctype="application/x-www-form-urlencoded">
formmethodget

post		Specifies the HTTP method to be used on control submission.

Only used with type=image or type=submit.		 

<input type="submit" name="name" 
       formmethod="post">
formnovalidateempty string or formnovalidateSpecifies no validation to be done on control submission.

Only used with type=submit.		 

<input type="submit" name="name" 
       formnovalidate>
<input type="submit" name="name" 
       formnovalidate="formnovalidate">
formtargetSpecifies where to display the response after control submission.

Only used with type=image or type=submit.		 

<input type="submit" name="name"
       formtarget="_self">
_blankOpens linked document in new window or tab.
_parentOpens linked document in parent frame.
_self (default)Opens linked document in same frame as it was clicked in.
_topOpens linked document in window body
framenameOpens the linked document in a named framename.
heightnumberSpecifies the height of an image in pixels.

Only used with type=image.		 

<input type="image" src="../../images/apple.jpg"
       alt="apple" width="200" 
       height="200">
listlist_idSpecifies a datalist element to use for a list of predefined options where the value must equal the id of a <datalist> tag in the same document. 

<input type="submit" name="name" 
       list="id_of_a_datalist_in_same_document">
maxnumberSpecifies a maximum value for an input date, number or range.

Only used with type=date, type=datetime-local, type=month, type=number, type=range, type=time, or type=week.		 

<!-- ** if value 2020-07-07 you wouldn't ** -->
<!-- ** be able to enter a later date    ** -->
<input type="date" name="name" 
       max="2020-07-07">
maxlengthtextSpecifies an input elements maximum character length.

Only used with type=text or type=password		 

<input type="text" name="name" 
       maxlength="50">
minnumberSpecifies a minimum value for an input date, number or range.

Only used with type=date, type=datetime-local, type=month, type=number, type=range, type=time, or type=week.		 

<!-- ** if value 2020-04-04 you wouldn't  ** -->
<!-- ** be able to enter an earlier date  ** -->
<input type="date" name="name" 
       min="2020-04-04">
minlengthtextSpecifies an input elements minimum character length.

Only used with type=text or type=password		 

<input type="text" name="name" 
       minlength="8">
multiplenameSpecifies the user can enter more than one value in a field.

Only used with type=email or type=file		 

<!-- ** to enter multiple files need to hold ** -->
<!-- ** down CTRL or SHIFT key while selecting ** -->
<!-- ** to enter multiple emails user ** -->
<!-- ** needs to separate with commas ** -->
<input type="file" name="name" 
       multiple>
namenameSpecifies a name for the input element.

Allows the server or some JavaScript to identify the data.		 

<input type="text" name="someName">
patternregexSpecifies a regular expression that input is validated against on form submission.

Only used with type=email, type=password, type=search, type=tel,type=text, or type=url.		 

<input type="text" name="airport_code" 
        pattern="[A-Za-z]{3}>
placeholderregexSpecifies a reminder (word or phrase) to aid with data entry.

Only used with type=email, type=password, type=search, type=tel, type=text, or type=url.		 

<input type="text" name="airport_code" 
       pattern="[A-Za-z]{3} placeholder="LGW>
readonlyempty string or readonlySpecifies that an input field is protected and not modifiable.

Cannot be used with type=password.		 

<input type="text" name="name" 
       readonly>
<input type="text" name="name" 
       readonly="readonly">
requiredempty string or requiredSpecifies an input field must be populated prior to submission.

Only used with type=checkbox, type=date, type=datetime-local, type=email, type=file, type=month, type=number, type=radio, type=tel, type=text, type=time, type=url or type=week.		 

<input type="text" name="name" 
       required>
<input type="text" name="name" 
       required="required">
srcbutton

reset

submit

Specifies the URL of the image (the actual location where the image is stored).

Only used with type=image.		 

<input type="image" name="name"
       src="../../images/apple.jpg" alt="apple">
sizenumberSpecifies the visible width of an input field.

Only used with type=email, type=password, type=search, type=tel, type=text, or type=url.		 

<!-- ** must be a positive integer > 0 ** -->
<input type="date" name="name" size="20">
stepnumberSpecifies the granularity of a valid number.

Only used with type=date, type=datetime-local, type=month, type=number, type=range, type=time, or type=week.		 

<!-- ** if value was 5 some valid values   ** -->
<!-- ** would be -10, -5, 0, 5, 10, 15, 20 ** -->
<input type="number" name="name" step="5">
typebutton

checkbox

color

date

datetime-local

email

file

hidden

image

month

number

password

radio

range

reset

search

submit

tel

text

time

url

week

Specifies the type of input element. 

<input type="button" value="Click">

<!-- ** value attribute is mandatory ** -->
<!-- ** for checkbox input type      ** -->
<input type="checkbox" name="pie" 
       value="Chicken" id="chicken">

<!-- ** An sRGB color - default  ** -->
<!-- ** value is #000000 (black) ** -->
<input type="color" value="#cccccc">

<!-- ** A date displayed in local   ** -->
<!-- ** format (e.g. UK=DD/MM/YYYY) ** -->
<!-- ** not supported in Safari ** -->
<input type="date" name="dateName1">

<!-- ** A date and time displayed in local ** -->
<!-- ** format (e.g. UK=DD/MM/YYYY HH:MM)  ** -->
<!-- ** not supported in Firefox or Safari ** -->
<input type="datetime-local" name="dateName2">

<input type="email" name="someEmail">
<input type="file" name="someName">
<input type="hidden" value="someValue">
<input type="image" src="././apple.jpg" 
       alt="apple" value="Chicken">

<!-- ** A month and year (e.g. June, YYYY) ** -->
<!-- ** not supported in Firefox or Safari ** -->
<input type="month" name="dateName3">

<!-- ** number entry which can be limited by ** -->
<!-- ** following attributes -               ** -->
<!-- ** min, max and step ** integer inputs  ** -->
<input type="number" value="defaultValue">

<input type="password" value="someValue">

<!-- ** the value attribute is mandatory ** -->
<!-- ** for radio input type             ** -->
<input type="radio" name="pie" 
       value="Chicken" id="chicken">

<!-- ** Select a range determined by following **
<!-- **  attributes - min, max and step        **
<!-- ** integer inputs ** (default range 0-100)
<input type="range" value="defaultValue">

<input type="reset" value="Reset">
<input type="search" name="someName">
<input type="submit" value="Submit">

<!-- ** A phone number validated ** -->
<!-- ** by the pattern attribute ** -->
<input type="tel pattern="[0-9]{5}-[0-9]{5}">

<input type="text" value="someValue">

<!-- Input a time for something (e.g. HH MM) -->
<input type="time" value="Reset">

<input type="url" name="someName">

<!-- A week and year (e.g. Week WW, YYYY) -->
<!-- ** not supported in Firefox or Safari ** -->
<input type="week" name="dateName4">
valuetextSpecifies a default value dependant on input type.

works will all niput types apart from type=file.		 

<!-- ** defines text viewable on button ** -->
<input type="button" value="Click">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

<!-- ** defines default value of text field ** -->
<input type="password" value="someValue">
<input type="hidden" value="someValue">
<input type="text" value="someValue">

<!-- ** defines value related to input field ** -->
<!-- ** value passed to server on submission ** -->
<!-- ** the value attribute is mandatory  ** -->
<!-- ** for checkbox and radio input types ** -->
<input type="checkbox" name="pie" 
       value="Chicken" id="chicken">
<input type="radio" name="pie" 
       value="Chicken" id="chicken">
<input type="image" src="../../images/apple.jpg"
       alt="Apple" value="Apple">
widthnumberSpecifies the width of an image in pixels.

Only used with type=image.		 

<input type="image" src="../../images/apple.jpg"
       alt="apple" width="200"  
       height="200">
<input> Global Attributes
Attribute Description Example
Common
classSpecifies a classname for the element allowing you to apply the style of the predefined class to the content. 

<input class="name">
idSpecifies a unique id for the element allowing you to apply the style of the predefined id to the content. 

<input id="name">
styleSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<input style="color:red;">
titleSpecifies an inline style for the element allowing you to apply the style to the content. 

<input title="Content info">
Keyboard
accesskeySpecifies a keyboard shortcut to associate with the element. 

<input accesskey="a">
tabindexSpecifies a tab order for the element. 

<input tabindex="1">
Language
dirSpecifies the directional flow of the content. 

<!-- The text will flow from left to right -->
<input dir="ltr">
<!-- The text will flow from right to left -->
<input dir="rtl">
langSpecifies a language code for the content of the element. 

<input lang="en">
spellcheckSpecifies an inline style for the element allowing you to apply the style to the contentt. 

<!-- Valid values true and false. -->
<!-- Default inherited / browser specific. -->
<input spellcheck="true">
translateSpecifies an inline style for the element allowing you to apply the style to the content. 

<!-- Valid values yes and no. -->
<!-- Default yes. -->
<input translate="no">
Miscellaneous
contenteditableSpecifies whether the content of the element is editable. 

<!-- Valid values true and false. -->
<!-- Default inherited. -->
<input contenteditable="true">
draggableSpecifies whether the element is draggable. 

<!-- Valid values true and false. -->
<!-- Default browser specific. -->
<input draggable="true">
hiddenSpecifies whether the element is not yet, or no longer, relevant. 

<!-- Valid values an empty string or hidden -->
<input hidden> 
<input hidden="hidden">
<input> Event Attributes
Attribute Description Example
Document Element
oncopyThe script to be run when the user copies the content of an element. 

 <!-- Executes go() function -->
<input oncopy="go()">
oncutThe script to be run when the user cuts the content of an element. 

 <!-- Executes go() function -->
<input oncut="go()">
onpasteThe script to be run when the user pastes some content into an element. 

 <!-- Executes go() function -->
<input onpaste="go()">
Drag and Drop
ondragThe script to be run when an element is dragged. 

 <!-- Executes go() function -->
<input ondrag="go()">
ondragendThe script to be run when an element has stopped being dragged. 

 <!-- Executes go() function -->
<input ondragend="go()">
ondragenterThe script to be run when an element has been dragged to a valid drop target. 

 <!-- Executes go() function -->
<input ondragenter="go()">
ondragleaveThe script to be run when an element leaves a valid drop target. 

 <!-- Executes go() function -->
<input ondragleave="go()">
ondragoverThe script to be run when an element is being dragged over a valid drop target. 

 <!-- Executes go() function -->
<input ondragover="go()">
ondragstartThe script to be run at the start of a drag operation. 

 <!-- Executes go() function -->
<input ondragstart="go()">
ondropThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<input ondrop="go()">
Form
onblurThe script to be run when the element loses focus. 

 <!-- Executes go() function -->
<input onblur="go()">
onchangeThe script to be run when object changed and attempt to leave field. 

 <!-- Executes go() function -->
<input onchange="go()">
oncontextmenuThe script to be run when a context menu is triggered. 

 <!-- Executes go() function -->
<input oncontextmenu="go()">
onfocusThe script to be run when the element gets focus. 

 <!-- Executes go() function -->
<input onfocus="go()">
oninputThe script to be run when an element gets user input. 

 <!-- Executes go() function -->
<input oninput="go()">
oninvalidThe script to be run when an element is invalid. 

 <!-- Executes go() function -->
<input oninvalid="go()">
onresetThe script to be run when a dragged element is being dropped. 

 <!-- Executes go() function -->
<input onreset="go()">
onselectThe script to be run when some or all of the contents of an object are selected. 

 <!-- Executes go() function -->
<input onselect="go()">
onsubmitThe script to be run when a form is submitted. 

 <!-- Executes go() function -->
<input onsubmit="go()">
Keyboard
onkeydownThe script to be run when an element is in focus and keyboard key is pressed down. 

 <!-- Executes go() function -->
<input onkeydown="go()">
onkeypressThe script to be run when an element is in focus and keyboard key is pressed down and released. 

 <!-- Executes go() function -->
<input onkeypress="go()">
onkeyupThe script to be run when an element is in focus and keyboard key is released. 

 <!-- Executes go() function -->
<input onkeyup="go()">
Media
onabortThe script code to be run on abort. 

 <!-- Executes go() function -->
<input onabort="go()">
oncanplayThe script to be run when a file has buffered enough so it is ready to start playing. 

 <!-- Executes go() function -->
<input oncanplay="go()">
oncanplaythroughThe script to be run when a file can be played all the way to the end without further need of buffering. 

 <!-- Executes go() function -->
<input oncanplaythrough="go()">
oncuechangeThe script to be run when the cue changes when using the track element. 

 <!-- Executes go() function -->
<input oncuechange="go()">
ondurationchangeThe script to be run when the length of the media is changed. 

 <!-- Executes go() function -->
<input ondurationchange="go()">
onemptiedThe script to be run when a media resource element suddenly becomes empty, usually due to an error. 

 <!-- Executes go() function -->
<input onemptied="go()">
onendedThe script to be run when the media has reach the end. 

 <!-- Executes go() function -->
<input onended="go()">
onloadeddataThe script to be run when media data is loaded and playback can start. 

 <!-- Executes go() function -->
<input onloadeddata="go()">
onloadedmetadataThe script to be run when metadata has been loaded. 

 <!-- Executes go() function -->
<input onloadedmetadata="go()">
onloadstartThe script to be run whenthe media resource has started loading. 

 <!-- Executes go() function -->
<input onloadstart="go()">
onpauseThe script to be run when the media resource has been paused. 

 <!-- Executes go() function -->
<input onpause="go()">
onplayThe script to be run when the media resource starts playback. 

 <!-- Executes go() function -->
<input onplay="go()">
onplayingThe script to be run when when playback has already begun. 

 <!-- Executes go() function -->
<input onplaying="go()">
onprogressThe script to be run when the browser is fetching the media data. 

 <!-- Executes go() function -->
<input onprogress="go()">
onratechangeThe script to be run when the playback rate changes. 

 <!-- Executes go() function -->
<input onratechange="go()">
onseekedThe script to be run when the seeking attribute is set to false indicating that seeking has finished. 

 <!-- Executes go() function -->
<input onseeked="go()">
onseekingThe script to be run when the seeking attribute is set to true indicating that seeking is currently active. 

 <!-- Executes go() function -->
<input onseeking="go()">
onstalledThe script to be run when the browser is unable to continue fetching media data. 

 <!-- Executes go() function -->
<input onstalled="go()">
onsuspendThe script to be run when media data has stopped before being completely loaded. 

 <!-- Executes go() function -->
<input onsuspend="go()">
ontimeupdateThe script to be run when the media resources current playback position has changed. 

 <!-- Executes go() function -->
<input ontimeupdate="go()">
onvolumechangeThe script to be run when the volume has changed or been muted. 

 <!-- Executes go() function -->
<input onvolumechange="go()">
onwaitingThe script to be run when the media resource has paused but is expected to resume. 

 <!-- Executes go() function -->
<input onwaiting="go()">
Mouse
onclickThe script to be run when when a mouse is clicked on an element. 

 <!-- Executes go() function -->
<input onclick="go()">
ondblclickThe script to be run when a mouse is double clicked on an element. 

 <!-- Executes go() function -->
<input ondblclick="go()">
onmousedownThe script to be run when he mouse button is pressed down while the cursor is over an element. 

 <!-- Executes go() function -->
<input onmousedown="go()">
onmousemoveThe script to be run when the mouse button is moved. 

 <!-- Executes go() function -->
<input onmousemove="go()">
onmouseoutThe script to be run when the mouse cursor moves off an element. 

 <!-- Executes go() function -->
<input onmouseout="go()">
onmouseoverThe script to be run when the mouse cursor moves over an element. 

 <!-- Executes go() function -->
<input onmouseover="go()">
onmouseupThe script to be run when the mouse button is released while the cursor is over the element. 

 <!-- Executes go() function -->
<input onmouseup="go()">
onwheelThe script to be run when the mouse wheel rolls up or down over an element. 

 <!-- Executes go() function -->
<input onwheel="go()">
Scroll
onscrollThe script code to be run when the scrollbar of an element is being scrolled. 

 <!-- Executes go() function -->
<input onscroll="go()">
Window - NONE