HTML input tag
Specifies the user input form control. <input> tag used to represent the input form control.
The <input> tag can represent many different types of input like text field, checkbox, radio button, submit buttons, password field, date time field, submit button, email address field etc,.
<input> tag has no data, so closing <input> tag is not mandatory. The can be specified like <input type="name="> with the type of control in between the opening/closing quotes of the type attribute.
Syntax -
<input>.. text here.. </input>
The attributes can be discussed below.
| Attribute | Description | Values |
|---|---|---|
| accept | Specifies the server accepted file types | audio/*: Audio files.video/*: Video files.image/*: Image files.File_extensionsMedia_type |
| Align | Specifies the alignment of image input.Not supported in HTML5 | LeftRightTopbottom |
| alt | Specifies the alternative text | Text. |
| autocomplete | Specifies the autocomplete enabled or not on <input>HTML5 attribute | on (default)off |
| autofocus | Specifies the <input> should get autofocus on page loads.HTML5 attribute | None. |
| checked | Specifies the checkbox or radio to be checked by default. | None. |
| disabled | Disables the form control. | None. |
| dirname | Specifies the direction of the field while sending the data. | Text (no spaces). |
| form | Specifies to which the <input> tag belongs to.HTML5 attribute | Form_id |
| formaction | Specifies where to send the data.Used when type is "submit". Override form element’s action attribute.HTML5 attribute | URL. |
| formenctype | Specifies how to encode the form data.Used when type is "submit". Override a form element’s enctype attribute.HTML5 attribute | Default.text/plain: Basic text. |
| formmethod | Specifies how to send the data.Used when type is submit. Override a form element’s method attribute.HTML5 attribute | get: Used for simple data sending.post: Used for more detailed or secure data sending. |
| formnovalidate | Specifies form not to be validated on submit.Used when type is submit. Override a form element’s novalidate attribute.HTML5 attribute | None. |
| formtarget | Specifies where to display the data on submit.Used when type is submit. Override a form element’s target attribute.HTML5 attribute | _self: Opens in current window / tab._blank: Opens a new window / tab._parent_topframename |
| height | Specifies the height.HTML5 attribute | Number/pixels |
| list | Specifies the list of form control option to user.HTML5 attribute | |
| max | Specifies the max value of an <input>.HTML5 attribute | Number/pixels |
| maxlength | Specifies the max length of characters allowed for <input> tag. | Number/pixels |
| min | Specifies the min value of an <input>.HTML5 attribute | Number/pixels |
| minlength | Specifies the min length of characters required for <input> tag. | Number/pixels |
| multiple | Specifies more than one value can enter in <input> element.HTML5 attribute | None. |
| name | Specifies the name of the <input> element. | Text (no spaces). |
| pattern | Specifies the regular expression of <input> element.HTML5 attribute | Regular expression. |
| placeholder | Specifies about the data type that user can enter.HTML5 attribute | Text. |
| readonly | Specifies the input fields are read only. | None. |
| required | Specifies the <input> is a mandatory field.HTML5 attribute | None. |
| size | Specifies the width of input element | Number. |
| src | Specifies the source of the image. | URL. |
| step | Specifies the intervals for input field.HTML5 attribute | Number or any. |
| type | Specifies the type of the element to display | button: Button (no default behavior) checkbox: Check box / tick box. color: Color with an 8-bit RGB value. date: Date selection control. email: Text field for email addresses. file: File upload hidden: A hidden control image: An image number: Text field for numerical values. password: Text field with obscured input. radio: Radio button range: Slider. reset: Reset button search: Text field for search strings. submit: Submit button tel: Text field for telephone numbers. text: Text field (default) time: Time selection control. url: Text field for absolute URLs. |
| value | Specifies the initial value of <input> element. | Dependent on element type. |
| width | Specifies the width of the image.HTML5 attribute | Number/pixels |
Example:
<!DOCTYPE html>
<html>
<head>
<title>Input example</title>
</head>
<body>
<form action="search-results.htm">
<label>Search: </label>
<input type="text" name="search" >
<input type="submit" value="Submit">
</form>
</body>
</html>