HTML Home
HTML Tags Reference
Selected Reading
Copyright © 2014 by tutorialspoint
|
HTML <input> tag
Advertisements
Function:
The HTML <input> tag is used within a form to declare an input element - a control that allows the user to input data.
Difference between HTML and XHTML:
In HTML the <input> tag has no end tag.
In XHTML the <input> tag must be properly closed.
Example:
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>
|
This will produce following result:
Online Practice:
To Become more comfortable - Do Online Practice
Attributes:
| Attribute | Value | Description |
|---|
| type | button
checkbox
file
hidden
image
password
radio
reset
submit
text | Specifies the type of control. |
| accept | content types | Specifies a comma-separated list of content types that the server accepts. |
| accept-charset | charset list | Specifies a list of character encodings that the server accepts. The default value is "unknown". |
| align | left
right
top
texttop
middle
absmiddle
baseline
bottom
absbottom | Defines the alignment of content |
| alt | alternate text | This specifies text to be used in case the browser/user agent can't render the input control. |
| checked | checked | If type="radio" or type="checkbox" it will already be selected when the page loads. |
| disabled | disabled | Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. |
| maxlength | number | Defines the maximum number of characters allowed in a text field. |
| name | filed name | Assigns a name to the input control. |
| readonly | readonly | Sets the input control to read-only. It won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls. |
| size | number | Specifies the width of the control. If type="text" or type="password" this refers to the width in characters. Otherwise it's in pixels. |
| src | URL | Defines the URL of the image to display. Used only for type="image". |
| value | value | Specifies the intial value for the control.If type="checkbox" or type="radio" this attribute is required. |
Standard Attributes:
| Attribute | Description |
|---|
| class | Document wide identifier |
| dir | Specifies the direction of the text |
| id | Document wide identifier |
| title | Specifies a title to associate with the element. |
| style | Helps to include inline casecadubf style sheet. |
| lang | Sets the language code. |
| xml:lang | Sets the language code. |
| tabindex | Helps determine the tabbing order |
| accesskey | Access keys (or shortcut keys) |
Event Attributes:
| Attribute | Description |
|---|
| onfocus | Script runs when control gets focus |
| onblur | Script runs when control loses focus |
| onselect | Script runs when the element is selected |
| onchange | Script runs when the element changes |
| onclick | Script runs when a mouse click |
| ondblclick | Script runs when a mouse double-click |
| onmousedown | Script runs when mouse button is pressed |
| onmouseup | Script runs when mouse button is released |
| onmouseover | Script runs when mouse pointer moves over an element |
| onmousemove | Script runs when mouse pointer moves |
| onmouseout | Script runs when mouse pointer moves out of an element |
| onkeypress | Script runs when key is pressed and released |
| onkeydown | Script runs when key is pressed |
| onkeyup | Script runs when key is released |
Advertisements
|
|
|