HTML <input> Tag

The <input> tag is a versatile HTML element that creates interactive form controls, allowing users to input data. It's a core component of web forms and can represent various types of input, from simple text fields to complex controls like file uploaders. The type of input is determined by the type attribute.

Syntax

<input type="type_value" attribute="value">

Attributes

Attribute	Value	Description
type	button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week	Specifies the type of input control to display.
accept	File types (e.g., .jpg,.png,.gif)	For type="file", specifies the types of files the server accepts.
alt	Text	For type="image", specifies alternative text for the image.
autocomplete	on, off, or specific fields	Specifies whether or not an input field should have autocomplete enabled.
autofocus	autofocus	Specifies that the input field should automatically get focus when the page loads.
checked	checked	For type="checkbox" or type="radio", specifies that the input should be pre-selected.
disabled	disabled	Specifies that the input field is disabled.
form	form_id	Specifies the form the input element belongs to.
formaction	URL	For type="submit" or type="image", specifies the URL for form submission.
formenctype	application/x-www-form-urlencoded, multipart/form-data, text/plain	For type="submit" or type="image", specifies how the form-data should be encoded.
formmethod	get, post	For type="submit" or type="image", specifies the HTTP method for form submission.
formnovalidate	formnovalidate	For type="submit" or type="image", specifies that the form-data should not be validated on submission.
formtarget	_blank, _self, _parent, _top, framename	For type="submit" or type="image", specifies where to display the response after submitting the form.
height	Number	For type="image", specifies the height of the image, in pixels.
list	datalist_id	Specifies a datalist to provide pre-defined options for an input field.
max	Number	Specifies the maximum value for number or date inputs.
maxlength	Number	Specifies the maximum number of characters allowed in the input field.
min	Number	Specifies the minimum value for number or date inputs.
multiple	multiple	Specifies that multiple values can be entered in an email or file input field.
name	Text	Specifies the name of the input field, used to submit the form.
pattern	Regular expression	Specifies a regular expression that the input field's value is checked against.
placeholder	Text	Specifies a short hint that describes the expected value of an input field.
readonly	readonly	Specifies that the input field is read-only.
required	required	Specifies that the input field must be filled out before submitting the form.
size	Number	Specifies the visible width of the input field.
src	URL	For type="image", specifies the path to the image.
step	Number	Specifies the legal number intervals for an input field.
value	Text	Specifies the initial value for the input field.
width	Number	For type="image", specifies the width of the image, in pixels.

Example

<form>
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email"><br>
  <input type="submit" value="Submit">
</form>

More Examples

Text Input

<input type="text" placeholder="Enter your username" required>

This example creates a simple text input field with a placeholder and indicates that the field is required.

Password Input

<input type="password" placeholder="Enter your password">

This creates a password input field, where characters are masked for security.

Email Input

<input type="email" placeholder="Enter your email" autocomplete="email">

This creates an email input field with browser based input auto-complete option.

Number Input with Min and Max

<input type="number" min="1" max="10" value="5">

This example sets the minimum, maximum, and default values for number input.

Checkbox

<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the terms</label>

This example demonstrates a checkbox with a label, which are generally used together.

Radio Buttons

<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>

Radio buttons allow users to select one option from a group.

File Input

<input type="file" accept="image/*">

This allows users to upload an image, allowing any format.

Hidden Input

<input type="hidden" name="user_id" value="12345">

This creates a hidden field for submitting server side values that is not visible to the user.

Range Input

<input type="range" min="0" max="100" value="50">

This creates a slider for numeric values.

Color Input

<input type="color" value="#0000FF">

This will open a color picker with a default value.

Date Input

<input type="date">

Creates a simple date picker interface.

Time Input

<input type="time">

Creates a simple time selection interface.

Browser Support

The <input> tag is supported by all modern browsers. However, the support for specific type values may vary slightly among different browsers. For example, some older browsers may not fully support date or time input types, and fallback to a text input. It's always a good practice to test your forms on multiple browsers.
| Browser | |
|:—|:—|
|Chrome| ✅|
|Edge| ✅|
|Firefox| ✅|
|Safari| ✅|
|Opera| ✅|

Notes and Tips

• Use labels with the for attribute to associate them with input fields for improved accessibility.
• Always specify the type of input using the type attribute for clarity.
• Placeholders provide helpful hints but should not replace labels.
• Validate user input on both the client-side (with HTML5 attributes like required and pattern) and the server-side.
• Use appropriate input types for different scenarios to enhance the user experience (e.g., email for email addresses, number for numeric data).
• Explore all the input types and their attributes for more complex form handling scenarios.
• Understand autocomplete attribute and use it appropriately for usability.
• Always test on different browsers to maintain consistent user experience.
• Use the step attribute to specify interval values for number and range inputs.
• Consider accessibility when building forms, provide clear and descriptive labels, and ensure keyboard navigation is functional.