Custom Search
| Syntax | HTML syntax - This element does not require a closing tag.
<input> XHTML syntax - This element is opened and closed, within a single tag, by adding a space followed by a forward slash at the end of the tag. <input /> |
|---|---|
| Usage | The <input> tag is one of several tags used to create form controls. There are various types of form controls like buttons, text entry boxes, etc. Form controls are used to collect input from the user or the web page itself. The <input> tag is generally used inside of a form element to create various types of form controls. A form element is created using a <form> tag. The title attribute should be used with the <input> tag when a label is not used. This will help make the control more accessible for non-visual browsers. HTML Example using various controls. <form action="example_input.php" method="post"> <p> Checkbox: <input type="checkbox" name="checktest" value="on" title="checkbox sample"><br> RadioButton1: <input type="radio" name="rbtest" value="one" title="radio button1 sample"><br> RadioButton2: <input type="radio" name="rbtest" value="two" checked="checked" title="radio button2 sample"><br> Text: <input type="text" name="texttest" title="text input sample"><br> Password: <input type="password" name="passtest" title="pwd sample"><br> <input type="submit" value="Send"> <input type="reset"> </p> </form>  XHTML Example using various controls. <form action="example_input.php" method="post"> <p> Checkbox: <input type="checkbox" name="checktest" value="on" title="checkbox sample" /><br /> RadioButton1: <input type="radio" name="rbtest" value="one" title="radio button1 sample" /><br /> RadioButton2: <input type="radio" name="rbtest" value="two" checked="checked" title="radio button2 sample" /><br /> Text: <input type="text" name="texttest" title="text input sample" /><br /> Password: <input type="password" name="passtest" title="pwd sample" /><br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form>  HTML Example using button type with JavaScript. It is not a requirement for the <input> tag to be used inside of a form element. For example, the <input> tag can be used with a scripting language like Javascript to give it functionality. <input type="button" value="Go To Little Web Hut"
onclick="window.location='http://www.littlewebhut.com'">XHTML Example using button type with JavaScript. It is not a requirement for the <input> tag to be used inside of a form element. For example, the <input> tag can be used with a scripting language like Javascript to give it functionality. <input type="button" value="Go To Little Web Hut"
onclick="window.location='http://www.littlewebhut.com'" /> |
| Content Model | The <input> element cannot contain any tags. |
| Required | Tag Specific | Core | Focus | Events | Language |
|---|---|---|---|---|---|
| alt accept align checked disabled ismap1 maxlength name onchange onselect readonly size src type usemap value2 | id class style title | accesskey3 onblur onfocus tabindex3 | onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup | dir lang xml:lang4 | |
| Notes: 1. HTML only. 2. Attribute is required when the type attribute = "radio" or "checkbox" and is optional otherwise. 3. Attribute can be used for all values of the type attribute except for "hidden". 4. XHTML only. | |||||
| Attribute | Description |
|---|---|
| alt | The alt attribute specifies alternate text for an image in the event that the image cannot be displayed. This attribute can be used when the type attribute = "image". HTML Example using the image type. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest">
</p>
</form>XHTML Example using the image type. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest" />
</p>
</form> |
| accept | The accept attribute specifies a comma separated list of content types that the server will handle correctly when processing the form data. This attribute can be used when the type attribute = "file". HTML Example using the file type. <form action="example_input.php" method="post" enctype="multipart/form-data">
<p>
Select the File: <input type="file" name="filetest" accept="image/gif">
<br>
<input type="submit" value="Send"> <input type="reset">
</p>
</form>XHTML Example using the file type. <form action="example_input.php" method="post" enctype="multipart/form-data">
<p>
Select the File: <input type="file" name="filetest" accept="image/gif" />
<br />
<input type="submit" value="Send" /> <input type="reset" />
</p>
</form> |
| align | The align attribute specifies the alignment for an image. Valid values are "bottom", "left", "middle", "right", or "top". This attribute can be used when the type attribute = "image". HTML Example using the image type with the align attribute. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest"
align="right">
</p>
</form>XHTML Example using the image type with the align attribute. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest"
align="right" />
</p>
</form>Note: This attribute has been deprecated. |
| checked | The checked attribute specifies that the checkbox or radio button will be checked by default. This attribute can be used when the type attribute = "checkbox" or "radio". HTML Example using the checkbox type. <form action="example_input.php" method="post">
<p>
Checkbox: <input type="checkbox" name="checktest" value="on"
checked="checked"><br>
<input type="submit" value="Send"> <input type="reset">
</p>
</form>XHTML Example using the checkbox type. <form action="example_input.php" method="post">
<p>
Checkbox: <input type="checkbox" name="checktest" value="on"
checked="checked" /><br />
<input type="submit" value="Send" /> <input type="reset" />
</p>
</form> |
| disabled | The disabled attribute is used to disable the control so that it will not accept user input. This attribute can be used for all values of the type attribute except for "hidden". HTML Example using the text type with the disabled attribute. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" disabled="disabled"><br>
<input type="submit" value="Send"> <input type="reset">
</p>
</form>XHTML Example using the text type with the disabled attribute. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" disabled="disabled" /><br />
<input type="submit" value="Send" /> <input type="reset" />
</p>
</form> |
| ismap | The ismap attribute is used to specify the use of a server-side image map. This attribute can be used when the type attribute = "image". Note: HTML only. |
| maxlength | The maxlength attribute specifies the maximum number of characters that a user may enter when using the password or text entry controls. This attribute can be used when the type attribute = "password" or "text". HTML Example using the text type with maxlength and size. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" size="10" maxlength="10"
value="sample"><br>
<input type="submit" value="Send">
<input type="reset">
</p>
</form>XHTML Example using the text type with maxlength and size. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" size="10" maxlength="10"
value="sample" /><br />
<input type="submit" value="Send" />
<input type="reset" />
</p>
</form> |
| name | The name attribute assigns a name to the control. Some control names are paired with their current value and submitted with the form. A script can also reference the control using the name attribute. This attribute can be used for all values of the type attribute except for "reset". HTML Example using the text type with maxlength and size. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" size="10" maxlength="10"
value="sample"><br>
<input type="submit" value="Send">
<input type="reset">
</p>
</form>XHTML Example using the text type with maxlength and size. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" size="10" maxlength="10"
value="sample" /><br />
<input type="submit" value="Send" />
<input type="reset" />
</p>
</form> |
| onchange | The onchange attribute is used to specify a script to be be run when the control loses its focus, if its value has changed. |
| onselect | The onselect attribute is used to specify a script to be be run when text is selected in a text field. |
| readonly | The readonly attribute prevents the control from being changed. This attribute can be used when the type attribute = "password" or "text". HTML Example using the text type with the readonly attribute. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" readonly="readonly"
value="sample"><br>
<input type="submit" value="Send"> <input type="reset">
</p>
</form>XHTML Example using the text type with the readonly attribute. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" readonly="readonly"
value="sample" /><br />
<input type="submit" value="Send" /> <input type="reset" />
</p>
</form> |
| size | The size attribute specifies the initial width of the control. When the type attribute is "password" or "text", the width is specified as the number of characters. When the type attribute is something other than "password" or "text", the width is specified in pixels. HTML Example using the text type with maxlength and size. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" size="10" maxlength="10"
value="sample"><br>
<input type="submit" value="Send">
<input type="reset">
</p>
</form>XHTML Example using the text type with maxlength and size. <form action="example_input.php" method="post">
<p>
Text: <input type="text" name="texttest" size="10" maxlength="10"
value="sample" /><br />
<input type="submit" value="Send" />
<input type="reset" />
</p>
</form> |
| src | The src attribute specifies the URL of an image. This attribute can be used when the type attribute = "image". HTML Example using the image type. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest">
</p>
</form>XHTML Example using the image type. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest" />
</p>
</form> |
| type | The type attribute specifies the type of control that will be created. The default type is text. Possible values are "button", "checkbox", "file", "hidden", "image", "password", "radio", "reset", "submit", or "text". The "button" type creates a button that does not submit a value with the form but instead it can be used with a scripting language, like Javascript, to give it functionality. HTML Example using button type with JavaScript. The button type creates a button that does not submit a value with the form but instead it can be used with a scripting language, like Javascript, to give it functionality. <input type="button" value="Go To Little Web Hut"
onclick="window.location='http://www.littlewebhut.com'">XHTML Example using button type with JavaScript. The button type creates a button that does not submit a value with the form but instead it can be used with a scripting language, like Javascript, to give it functionality. <input type="button" value="Go To Little Web Hut"
onclick="window.location='http://www.littlewebhut.com'" />HTML Example using the checkbox type. The checkbox type creates a control that can function as an on/off switch. <form action="example_input.php" method="post"> <p> Checkbox: <input type="checkbox" name="checktest" value="on" checked="checked"><br> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the checkbox type. The checkbox type creates a control that can function as an on/off switch. <form action="example_input.php" method="post"> <p> Checkbox: <input type="checkbox" name="checktest" value="on" checked="checked" /><br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> HTML Example using the file type. The file type creates a control which allows a file, selected by the user, to be uploaded when the form is submitted. <form action="example_input.php" method="post" enctype="multipart/form-data"> <p> Select the File: <input type="file" name="filetest" accept="image/gif"> <br> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the file type. The file type creates a control which allows a file, selected by the user, to be uploaded when the form is submitted. <form action="example_input.php" method="post" enctype="multipart/form-data"> <p> Select the File: <input type="file" name="filetest" accept="image/gif" /> <br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> HTML Example using the hidden type. The hidden type creates a control that is not visible on the web page. Its value is embedded in the web page itself. <form action="example_input.php" method="post"> <p> <input type="hidden" name="hidetest" value="hide test"> <input type="submit" value="Send"> </p> </form> XHTML Example using the hidden type. The hidden type creates a control that is not visible on the web page. Its value is embedded in the web page itself. <form action="example_input.php" method="post"> <p> <input type="hidden" name="hidetest" value="hide test" /> <input type="submit" value="Send" /> </p> </form> HTML Example using the image type. The image type creates a control that allows an image to function as a submit button. When the image is clicked with a pointing device, the X-Y coordinates of the clicked location are sent along with any other form data. The X-Y coordinates are in pixels and are measured from the top left corner of the image. The coordinate data is sent as name.x and name.y where name is the value of the name attribute and x and y are the coordinate values. Note: If the server uses the passed coordinates to take different actions, then non-graphical browsers will be disadvantaged. Therefore, other approaches should be considered. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest">
</p>
</form>XHTML Example using the image type. The image type creates a control that allows an image to function as a submit button. When the image is clicked with a pointing device, the X-Y coordinates of the clicked location are sent along with any other form data. The X-Y coordinates are in pixels and are measured from the top left corner of the image. The coordinate data is sent as name.x and name.y where name is the value of the name attribute and x and y are the coordinate values. Note: If the server uses the passed coordinates to take different actions, then non-graphical browsers will be disadvantaged. Therefore, other approaches should be considered. <form action="example_input.php" method="post">
<p>
Submit: <input type="image" src="yel.gif" alt="submit" name="imgtest" />
</p>
</form>HTML Example using the password type. The password type creates a text entry field that does not display the entered characters on the web page. <form action="example_input.php" method="post"> <p> Password: <input type="password" name="passtest" size="10" maxlength="10" value=""> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the password type. The password type creates a text entry field that does not display the entered characters on the web page. <form action="example_input.php" method="post"> <p> Password: <input type="password" name="passtest" size="10" maxlength="10" value="" /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> HTML Example using the radio type. The radio type creates a radio button. A radio button is an on/off switch where multiple radio buttons can be grouped together. Only one radio button, in a group, can be selected at a time. Groups are created by setting the name attribute, for multiple radio buttons, to the same value. <form action="example_input.php" method="post"> <p> one: <input type="radio" name="rbtest" value="one"><br> two: <input type="radio" name="rbtest" value="two" checked="checked"><br> three: <input type="radio" name="rbtest" value="three"><br> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the radio type. The radio type creates a radio button. A radio button is an on/off switch where multiple radio buttons can be grouped together. Only one radio button, in a group, can be selected at a time. Groups are created by setting the name attribute, for multiple radio buttons, to the same value. <form action="example_input.php" method="post"> <p> one: <input type="radio" name="rbtest" value="one" /><br /> two: <input type="radio" name="rbtest" value="two" checked="checked" /><br /> three: <input type="radio" name="rbtest" value="three" /><br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> HTML Example using the submit and reset types. The submit type creates a button that is used to submit the form. The reset type creates a button that resets all of the controls, in the current form, to their initial values. <form action="example_input.php" method="post"> <p> Checkbox: <input type="checkbox" name="checktest" value="on"><br> Text: <input type="text" name="texttest"><br> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the submit and reset types. The submit type creates a button that is used to submit the form. The reset type creates a button that resets all of the controls, in the current form, to their initial values. <form action="example_input.php" method="post"> <p> Checkbox: <input type="checkbox" name="checktest" value="on" /><br /> Text: <input type="text" name="texttest" /><br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> HTML Example using the text type. The text type creates a text entry field. <form action="example_input.php" method="post"> <p> Text: <input type="text" name="texttest" size="10" maxlength="10" value="sample"><br> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the text type. The text type creates a text entry field. <form action="example_input.php" method="post"> <p> Text: <input type="text" name="texttest" size="10" maxlength="10" value="sample" /><br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> |
| usemap | The usemap attribute is used to point to a <map> tag. The <map> tag specifies a client-side image map. This attribute can be used when the type attribute = "image". |
| value | The value attribute specifies the initial value of a control. This attribute is required when the type attribute = "radio" or "checkbox" and is optional otherwise. This attribute can be used for all values of the type attribute except for "image". HTML Example using the value attribute. <form action="example_input.php" method="post"> <p> one: <input type="radio" name="rbtest" value="one"><br> two: <input type="radio" name="rbtest" value="two" checked="checked"><br> three: <input type="radio" name="rbtest" value="three"><br> <input type="submit" value="Send"> <input type="reset"> </p> </form> XHTML Example using the value attribute. <form action="example_input.php" method="post"> <p> one: <input type="radio" name="rbtest" value="one" /><br /> two: <input type="radio" name="rbtest" value="two" checked="checked" /><br /> three: <input type="radio" name="rbtest" value="three" /><br /> <input type="submit" value="Send" /> <input type="reset" /> </p> </form> Note: Attribute is required when the type attribute = "radio" or "checkbox" and is optional otherwise. |
| id | The id attribute assigns a unique name to a tag. This allows style sheets or scripts to reference the tag. See id Example |
| class | The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example |
| style | The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example |
| title | The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example |
| accesskey | The accesskey specifies a shortcut key for a tag. The action that is taken when an access key is invoked depends on the tag and may also depend on the browser. For example, if it is used with an <a> tag, some browsers may follow the link when the access key is invoked and other browsers may give focus to the link. See accesskey Example Note: Attribute can be used for all values of the type attribute except for "hidden". |
| onblur | The onblur attribute specifies a script to be run when the tag loses focus. See onblur Example |
| onfocus | The onfocus attribute specifies a script to be run when the tag receives focus. See onfocus Example |
| tabindex | The tabindex attribute specifies the tabbing position of the tag. The tabbing sequence runs from lower values to higher values. The valid range of values is between 0 and 32767. See tabindex Example Note: Attribute can be used for all values of the type attribute except for "hidden". |
| onclick | The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example |
| ondblclick | The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example |
| onkeydown | The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example |
| onkeypress | The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example |
| onkeyup | The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example |
| onmousedown | The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example |
| onmousemove | The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example |
| onmouseout | The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example |
| onmouseover | The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example |
| onmouseup | The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example |
| dir | The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example |
| lang | The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example |
| xml:lang | The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example Note: XHTML only. |
| Example using various controls.Example using button type with JavaScript.Example using the image type.Example using the file type.Example using the image type with the align attribute.Example using the checkbox type.Example using the text type with the disabled attribute.Example using the text type with maxlength and size.Example using the text type with the readonly attribute.Example using the hidden type.Example using the password type.Example using the radio type.Example using the submit and reset types. |