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 the form for user input. The type of the input element can be a button, checkbox, file, hidden, image, password, radio, reset, submit or text.

Example


<form action="html4intermediate/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" /> Chicken</p>
  <p><input type="radio" name="pie" value="fish" />; Fish</p>
  <p><input type="radio" name="pie" value="shepherds" /> Shepherds</p>
  <p>Submit your information:</p>
  <p><input type="submit" value="Submit" /></p>
</form>

Required Attributes

NONE

Optional Attributes

accept - limited browser support - use the server to validate file uploads.

align - this attribute is deprecated, use CSS instead.

alt - attribute specifies 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="http://server2client.com/images/chickenpiesmall.jpg"
       alt="Chicken Pie" />

checked - specifies 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="checked" />
<input type="checkbox" name="pie" value="Fish" id="fish" />

<!-- Radio button example -->
<input type="radio" name="pie" value="Chicken" id="chicken" />
<input type="radio" name="pie" value="Fish" id="fish" checked="checked" />

disabled - specifies an input element to be disabled until a certain condition occurs.

Works with all type attribute values except password.


<input type="text" name="name" disabled="disabled" />

maxlength - specifies an input elements maximum character length.

Only used when the type attribute value is text or password.


<input type="text" name="name" maxlength="50" />

name - specifies a name for the input element.

Allows the server or some JavaScript to identify the data.


<input type="text" name="someName" />

readonly - specifies that an input field is protected and not modifiable.

Works with all type attribute values except password.


<input type="text" readonly="readonly" />

src - specifies attribute specifies the URL of the image (the actual location where the image is stored).

Only used when the type attribute value is image.


<input type="image"
       src="http://server2client.com/images/chickenpiesmall.jpg"
       alt="Chicken Pie" />

type - specifies the type of input element.


<input type="button" value="Click" />
<input type="checkbox" name="pie" value="Chicken" id="chicken" />
<input type="hidden" value="someValue" />
<input type="image"
       src="http://server2client.com/images/chickenpiesmall.jpg"
       alt="Chicken Pie" 
       value="Chicken" />
<input type="radio" name="pie" value="Chicken" id="chicken" />
<input type="reset" value="Reset" />
<input type="password" value="someValue" />
<input type="submit" value="Submit" />
<input type="text" value="someValue" />

value - specifies a default value dependant on input type.

Works with all type attribute values except file.


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

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

<!-- defines the value related to the input field -->
<!-- ** the value will be passed to the server on form 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="http://server2client.com/images/chickenpiesmall.jpg"
       alt="Chicken Pie" 
       value="Chicken" />

Common Attributes

accesskey - specifies a keyboard shortcut to an element.


<input accesskey="aKey" />

class - specifies a classname for the element allowing you to apply the style of the predefined class to the content.


<input class="classname" />

id - specifies a unique id for the element allowing you to apply the style of the predefined id to the content.


<input id="idname" />

style - specifies an inline style for the element allowing you to apply the style to the content.


<input style="color:red;text-align:left" />

tabindex - specifies the tab order of the element.


<input tabindex="2" />

title - specifies extra information about the content.


<input title="information about the content" />

Language Attributes

dir - specifies 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" />

lang - specifies a language code for the content of the element.


<input lang="en" />

xml:lang - specifies a language code for the content of the element in XHTML documents.


<input xml:lang="fr" />

Document Event Attributes

NONE

Form Event Attributes

onblur - The JavaScript code to be run when an element loses focus.


<!-- Executes the go() function -->
<input onblur="go()" />

onchange - The JavaScript code to be run when an element changes.


<!-- Executes the go() function -->
<input onchange="go()" />

onfocus - The JavaScript code to be run when an element gains focus.


<!-- Executes the go() function -->
<input onfocus="go()" />

onselect - The JavaScript code to be run when an element is selected.


<!-- Executes the go() function -->
<input onselect="go()" />

Image Event Attributes

NONE

Keyboard Event Attributes

onkeydown - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<input onkeydown="go()" />

onkeypress - The JavaScript code to be run when an element is in focus and keyboard key is pressed down and released.


<!-- Executes the go() function -->
<input onkeydown="go()" />

onkeyup - The JavaScript code to be run when an element is in focus and keyboard key is released.


<!-- Executes the go() function -->
<input onkeydown="go()" />

Mouse Event Attributes

onclick - The JavaScript code to be run when a mouse is clicked on the element.


<!-- Executes the go() function -->
<input onclick="go()" />

ondblclick - The JavaScript code to be run when a mouse is double clicked on the element.


<!-- Executes the go() function -->
<input ondblclick="go()" />

onmousedown - The JavaScript code to be run when the mouse button is pressed down while the cursor is over the element.


<!-- Executes the go() function -->
<input onmousedown="go()" />

onmousemove - The JavaScript code to be run when the mouse button is moved.


<input onmousemove="go()" />

onmouseout - The JavaScript code to be run when the mouse cursor moves off an element.


<!-- Executes the go() function -->
<input onmouseout="go()" />

onmouseover - The JavaScript code to be run when the mouse cursor moves over an element.


<!-- Executes the go() function -->
<input onmouseover="go()" />

onmouseup - The JavaScript code to be run when the mouse button is released while the cursor is over the element.


<!-- Executes the go() function -->
<input onmouseup="go()" />

go to home page Homepage go to top of page Top