Open In App

HTML input Tag

Last Updated : 09 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

The <input> tag in HTML is used to collect user input in web forms. It supports various input types such as text, password, checkboxes, radio buttons, and more.

An input field can be of various types depending upon the attribute type. The Input tag is an empty element that only contains attributes. For defining labels for the input element, <label> can be used.

Note: The <input> Tag supports the Global Attributes & the Event Attributes in HTML

Syntax

<input type = "value" ... />
HTML 
<html>
<body>
	<form>
		<label for="username">Username:</label>
		<input type="text" id="username" name="username">
	</form>
</body>
</html>


  • The <label> element with the for attribute associates the label "Username:" with the <input> field, enhancing accessibility.
  • The <input> element of type "text" creates a single-line text input field where users can enter their username.

Common <input> Types

Input TypeDescription
<input type="text">Single-line text input
<input type="password">Masked text input for passwords
<input type="checkbox">Toggle for selecting multiple options
<input type="radio">Single selection from multiple options
<input type="submit">Button to submit form data
<input type="button">General-purpose button
<input type="file">Input for uploading files
<input type="number">Input for numerical values
<input type="date">Input for selecting dates
<input type="email">Input for email addresses
<input type="color">Input for selecting colors
<input type="range">Slider for selecting a numeric value within a range
<input type="hidden">Hidden input for form data
<input type="image">Input using an image for form submission

Attributes

Attributes

Descriptions

type

It is used to specify the type of the input element. Its default value is text.

value

It is used to specify the value of the input element.

placeholder

Placeholder attribute is used to specify hint that describes the expected value of an input field.

name

It is used to specify the name of the input element.

alt

It is used to provide alternate text for the user, if they cannot view the image.

autofocus

It specifies that an element should automatically get focus when the page loads.

checked

It specifies that an element should be pre-selected (checked) when the page loads.

disabled

The disabled attribute specifies that the element should be disabled

form

The form attribute is used to specify one or more forms to which the <input> element belongs to. 

max

It is used to specify the maximum value for an < input > element.

required

It specifies that an input field must be filled out before submitting the form. 

readonly

It specifies that an input field is read-only. A read-only input field cannot be modified.

accept

It is used to specifies the types of files that the server accepts.

align

It is used to specifies the alignment of an image input.

autocomplete

It s used to specifies whether an <input> element should have autocomplete enabled

dirname

It is used to specifies that the text direction will be submitted.

formaction

It is used to specifies the URL of the file that will process the input control when the form is submitted

formenctype

It is used to specifies how the form-data should be encoded when submitting it to the server

formmethod

It is used to defines the HTTP method for sending data to the action URL

formnovalidate

It is used to defines that form elements should not be validated when submitted

formtarget

It is used to specifies where to display the response that is received after submitting the form

height

It is used to specifies the height of an <input> element

list

It is used to refers to a <datalist> element that contains pre-defined options for an <input> element

maxlength

It is used to specifies the maximum number of characters allowed in an <input> element

min

It is used to specifies a minimum value for an <input> element

multiple

It is used to specifies that a user can enter more than one value in an <input> element

pattern

It is used to specifies a regular expression that an <input> element's value is checked against

size

It is used to specifies the width, in characters, of an <input> element

src

It is used to specifies the URL of the image to use as a submit button

step

It is used to specifies the legal number intervals for an input field

width

It is used to specifies the width of an <input> element (only Ifor type="image")

More Examples of HTML input tag

Styled Password Input Field

html 
<html>
<head>
	<style>
		input[type="password"] {
			border: 2px solid #4CAF50;
			border-radius: 4px;
			padding: 10px;
			width: 200px;
		}
	</style>
</head>
<body>
	<form>
		<label for="password">Password:</label>
		<input type="password" id="password" name="password">
	</form>
</body>
</html>

In this example:

  • The <input> element of type "password" creates a field where users can enter sensitive information, with input characters masked for privacy.
  • The CSS styles apply a green border, rounded corners, and padding to enhance the input field's appearance. 

Email Input Field with Placeholder

html 
<html>
<head>
	<style>
		input[type="email"] {
			border: 1px solid #ccc;
			padding: 8px;
			font-size: 14px;
			width: 250px;
		}
	</style>
</head>
<body>
	<form>
		<label for="email">Email:</label>
		<input type="email" id="email" name="email"
		 placeholder="[email protected]">
	</form>
</body>
</html>

In this example:

  • The <input> element of type "email" provides a field for users to enter an email address, with built-in validation for correct email formatting.
  • The placeholder attribute offers a hint to the user about the expected input format, and the CSS styles define the input field's border, padding, font size, and width.

Best Practices for HTML <input> Elements

  • Use Descriptive Labels: Ensure each input field has a corresponding <label> to enhance accessibility and usability.
  • Implement Client-Side Validation: Utilize HTML5 validation attributes like required, pattern, and maxlength to provide immediate feedback and reduce invalid submissions.
  • Choose Appropriate Input Types: Select input types that match the expected data (e.g., email for email addresses, number for numeric input) to improve user experience and leverage built-in validation

Next Article
HTML <ins> Tag

C
chaitanyashah707
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox