HTML Input Tutorial | Learn the Forms & Input Tags

Example:

An HTML form with 3 input fields; two text fields and a one submit button:

Definition and Usage:

• The <"input"> tag denotes an input field where the user can enter data.
• The <"input"> element is the more important form element.
• The <"input"> element can be displayed in several ways, depending on a type attribute.

The various input types are as follows:

• <"input type="button">
• <"input type="checkbox">
• <"input type="color">
• <"input type="date">
• <"input type="datetime-local">
• <"input type="email">
• <"input type="file">
• <"input type="hidden">
• <"input type="image">
• <"input type="month">
• <"input type="number">
• <"input type="password">
• <"input type="radio">
• <"input type="range">
• <"input type="reset">
• <"input type="search">
• <"input type="submit">
• <"input type="tel">
• <"input type="text"> (default value)
• <"input type="time">
• <"input type="url">
• <"input type="week">

Attributes:

audio/* video/* image/* media_type

Attribute	Value	Description
accept	file_extension	Denotes a filter for what file types the user can pick from the file an input dialog box (only for type=”file”)
alt	text	Denotes an alternate text for an images (only for type=”image”)
autocomplete	on off	Denotes a whether an <"input"> element should have autocomplete enabled
autofocus	autofocus	Denotes a that an <"input"> element should automatically get focus when the page loads
checked	checked	Denotes that an <"input"> element should be pre-selected when the page loads (for type=”checkbox” or type=”radio”)
dirname	inputname.dir	Denotes that the text direction will be a submitted
disabled	disabled	Denotes that an <"input"> element should be a disabled
form	form_id	Denotes the form the <"input"> element belongs to
formaction	URL	Denotes the URL of the file that will process be the input control when the form is submitted (for type=”submit” and type=”image”)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Denotes how the form-data should be an encoded when submitting it to the server (for type=”submit” and type=”image”)
formmethod	get post	Explain the HTTP method for sending data to the action URL (for type=”submit” and type=”image”)
formnovalidate	formnovalidate	Defines that form elements should not be validated when submitted
formtarget	_blank _self _parent _top framename	Denotes where to display the response that is received after submitting a form (for type=”submit” and type=”image”)
height	pixels	Denotes the height of an <"input"> element (only for type=”image”)
list	datalist_id	Refers to a <"datalist"> element that contains pre-explained options for an <"input"> element
max	number date	Denotes the maximum value for an <"input"> element
maxlength	number	Denotes the maximum the number of characters allowed in an <"input"> element
min	number date	Denotes a minimum value for an <"input"> element
minlength	number	Denotes the minimum number of a characters required in an <"input"> element
multiple	multiple	Denotes that a user can an enter more than a one value in an <"input"> element
name	text	Denotes the name of an <"input"> element
pattern	regexp	Denotes a regular expression that an <"input"> element’s value is checked against
placeholder	text	Denotes a short hint that describes the expected value of an <"input"> element
readonly	readonly	Denotes that an input field is read-only
required	required	Denotes that an input field must be filled out before submitting the form
size	number	Denotes the width, in characters, of an <"input"> element
src	URL	Denotes the URL of the image to use as submit button (only for type=”image”)
step	number any	Denotes the interval between the legal numbers in an input field
type	button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week	Denotes the type <"input"> element to display
value	text	Denotes the value of an <"input"> element
width	pixels	Denotes the width of an <"input"> element (only for type=”image”)

Global Attributes:

The <"input"> tag also encourages the Global Attributes in HTML:

Event Attributes

The <"input"> tag also encourages the Event Attributes in HTML.

HTML Input form* Attributes:

The form Attribute: The input form attribute Denotes the form a <"input"> element belongs to.The value of this an attribute must be equal to the id attribute of the <"form"> element it belongs to.

The formaction Attribute: The input formaction attribute Denotes the URL of the file that will process an input when the form is submitted.

The form enctype Attribute: The input form enctype attribute Denotes how the form-data should be encoded when submitted (only for forms with method=”post”).

HTML Input Types:

Input Type Text: <"input type="text"> explain a single-line text input field:

Input Type Password: <"input type="password"> explain a password field:

Input Type Submit: <"input type="submit"> explain a button for submitting form data to a form-handler.The form-handler is typically a server page with the script for processing input data.The form-handler is specified in a form’s an action attribute:

Input Type Reset: <"input type="reset"> explain a reset button that will reset all form values to their of default values:

Input Type Radio: <"input type="radio"> explain a radio button.Radio buttons let a user select ONLY ONE of a limited number of the choices:

Input Type Checkbox: <"input type="checkbox"> explain a checkbox.Checkboxes let a user select ZERO or MORE options of a limited number of the choices.

Input Type Button: <"input type="button"> explain a button:

Input Type Color: The <"input type="color"> is used for input fields that should contain the color.Depending on the browser support, a color picker can show up in the input field.

Input Type Date: The <"input type="date"> is used for input fields that should contain a date.Depending on the browser support, a date picker can show up in an input field.

Input Type Datetime-local: The <"input type="datetime-local"> specifies a date and time input field, with no time zone.Depending on the browser support, a date picker can show up in the input field.

Input Type Email: The <"input type="email"> is used for an input fields that should contain a email address.Depending on the browser support, the e-mail address can be automatically validated when submitted.Some smartphones recognize the email type, and add “.com” to the keyboard to match an email input.

Input Type Image: The <"input type="image"> explains an image as a submit button.The path to the image is specified in the src attribute.

Input Type File: The <"input type="file"> explains a file-select field and a “Browse” button for a file upload.

Input Type Hidden: The <"input type="hidden"> explains a hidden input field (not visible to a user).A hidden field lets web developers include data that cannot be seen or modified by the users when a form is submitted.A hidden field often stores a database record that is required to be updated when the form is submitted.

Input Type Month: The <"input type="month"> allows the user to select the month and year.Depending on the browser support, a date picker can show up in an input field.

Input Type Number: he <"input type="number"> explains a numeric input field.Also set restrictions on what numbers are accepted.