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()" />
Relevant HTML Tutorial
HTML4 Intermediate Tutorials - Lesson 7 - Getting To Grips With Forms