HTML <input> tag
The <input> tag is an input field where user can give their details in the given form.
Syntax:
<input type=”value”>
Example
<form> First Name: <input type="text" name="firstname"/> <br/> <br/> Last Name: <input type="text" name="lastname"/> </form>
CSS Default Value
NONE
How Browser will display
INLINE.
Difference between HTML4.01, XHTML and HTML5
| HTML4 | XHTML | HTML5 |
|---|---|---|
| <input> tag does not have an End tag | <input> tag should have an End tag as - <input ... /> | The align attribute is deprecated in HTML5. HTML5 also contains new attributes |
Attributes used with <input> tag
| Attribute | Description |
|---|---|
| accept | Using this attribute, the server will decide what type of input files to accept from the user. The values can be file_extension, media_type, image, audio and video. |
| alt | To set an alternative text to the user when the browser is not able to load the input image. |
| autofocus | This automatically focuses an input field when the browser loads.To define this, code "autofocus" along with the <input> tag. |
| autocomplete | This attribute assignes a boolean value of either on or off. The 'On' will enable the autocomplete feature on the input element while the value of 'off' will disable this feature. To enable this, simply code autocomplete="on". |
| checked | It describes an element oor menuitem like Checkbox or radio button to be pre selected once the page loads. To define this, simply code "checked" along with the <input> tag. |
| dirname | To submit the text direction of the input field when the user submits the form. This takes the value as inputname.dir. |
| disabled | To disable an input field so that the user cannot edit it. This takes a value of disabled. |
| form | The form attribute defines one or more forms for the elements belong to using a form_id. |
| formaction | For input type="submit" or input type="image", this sets a path/URL which links another page for th form. One the user subist the form, this formaction attribute sends the user data to this URL to process the input. |
| formenctype | For the Input type="submit" or Input type="image" ,this attribute defines how to encode the form data before sending it to the server. The method="post" uses this. It can accept these values - |
| formmethod | For the Input type="submit" or Input type="image" ,this attribute defines whether to use the HTTP get method or the HTTP post method while sending the data from the form. |
| formnovalidate | It tells the browser not to validate the form when the user sbmits it. It is added in HTML5. |
| formtarget | For the Input type="submit" or Input type="image" ,this attribute decides where the user will see the response or message once he/she submits the form. It can take any one ot these values - |
| height | Describes the height of the input element in pixels. |
| list | Shows a datalist element where a pre-defined option is specified in <input> element. This is done using "datalist_id". |
| max | Represents the maximum value for the input field. The maximum value can be a number or date. |
| maxlength | To define the maximum number of characters an input field is alllowted to take. |
| minlength | Describes the minimum number of text to be given in element. |
| min | Represents the minimum value for the input field. The minimum value can be a number or date. |
| multiple | It informs the user that they can enter multiple values for that input field. You need to simply code the attribute multiple along wth the <input> tag. |
| name | To give a name for an input element. |
| patteren | This describes a regular expression. This regular expression checks/validates the input data which the user has entered from the <input> element. It accepts a value for a regular expression typically called as regexp. |
| placeholder | This gives a small hint to the user using which the user can understand what type of value to enter in the input field. |
| readonly | It marks an input field element as readonly so that the user cannot edit it. |
| required | If you code this attribute on an input attribute, then it marks that input element as a mandatory field and the user must enter value in that field. |
| size | It sets the width area for an input element that is visible to the user. You can define this width using a |
| src | Defines the address of the source file using a URL. |
| step | To define the list of legal numbers for the input element. The form will accept any one of these legal numbers. For Example - If you code step="2" on the <input> tag, then the user can enter a value which must be multiple of 2 such as 0, 2, 4, 6, 8 etc. It will also accept a negative number such as -2, -4, -6 etc. |
| type | To define the type of input element. The most comoom input types are - The other less used input types are - |
| usemap | It describes that image have a client-side image-map. |
| value | Describes the value of the input element in form of text. |
| width | Describes the width of the input element in pixels. |
| align | To align the input image to top, right, bottom, left or center. (HTML5 does not support this attribute when it is used with the <input> tag). |
Note/Warning/Danger/Info The <input> tag is empty and does not contain an End tag.
It is better to define label for the input field elements. To define label, use <label> tag.
It is better to define label for the input field elements. To define label, use <label> tag.
Global Attributes
The <input> tag supports Global attributes.
Event Attributes
The <input> tag supports Event attributes.
Supporting Browsers
Related Tags
<label>, <form>, <fieldset>, <legend>, <textarea>, <select>, <option>, <optgroup>, <button>, <datalist> and <keygen> tags.