Summary -

In this topic, we described about the <input> tag along with detailed example.

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.

Optional Attributes -

AttributeDescriptionValues
acceptSpecifies the server accepted file typesaudio/*: Audio files.video/*: Video files.image/*: Image files.File_extensionsMedia_type
AlignSpecifies the alignment of image input.Not supported in HTML5LeftRightTopbottom
altSpecifies the alternative textText.
autocompleteSpecifies the autocomplete enabled or not on <input>HTML5 attributeon (default)off
autofocusSpecifies the <input> should get autofocus on page loads.HTML5 attributeNone.
checkedSpecifies the checkbox or radio to be checked by default.None.
disabledDisables the form control.None.
dirnameSpecifies the direction of the field while sending the data.Text (no spaces).
formSpecifies to which the <input> tag belongs to.HTML5 attributeForm_id
formactionSpecifies where to send the data.Used when type is "submit". Override form element’s action attribute.HTML5 attribute URL.
formenctypeSpecifies 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.
formmethodSpecifies 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.
formnovalidateSpecifies form not to be validated on submit.Used when type is submit. Override a form element’s novalidate attribute.HTML5 attributeNone.
formtargetSpecifies 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
heightSpecifies the height.HTML5 attributeNumber/pixels
listSpecifies the list of form control option to user.HTML5 attribute
maxSpecifies the max value of an <input>.HTML5 attributeNumber/pixels
maxlengthSpecifies the max length of characters allowed for <input> tag.Number/pixels
minSpecifies the min value of an <input>.HTML5 attributeNumber/pixels
minlengthSpecifies the min length of characters required for <input> tag.Number/pixels
multipleSpecifies more than one value can enter in <input> element.HTML5 attributeNone.
nameSpecifies the name of the <input> element.Text (no spaces).
patternSpecifies the regular expression of <input> element.HTML5 attributeRegular expression.
placeholderSpecifies about the data type that user can enter.HTML5 attributeText.
readonlySpecifies the input fields are read only.None.
requiredSpecifies the <input> is a mandatory field.HTML5 attributeNone.
sizeSpecifies the width of input elementNumber.
srcSpecifies the source of the image.URL.
stepSpecifies the intervals for input field.HTML5 attributeNumber or any.
typeSpecifies the type of the element to displaybutton: 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.
valueSpecifies the initial value of <input> element.Dependent on element type.
widthSpecifies the width of the image.HTML5 attributeNumber/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>

Output -