HTML Tags
HTML <input> Tag
The
<input>tag is used to create interactive form controls for user input.
It can represent a text field, checkbox, radio button, file selector, password box, email, number input, and more.
The type of input is determined by thetypeattribute.
Syntax
html
<input type="text" name="username" value="" placeholder="Enter text" required>Attributes
| Attribute | Description |
|---|---|
| type | Specifies the type of input (text, password, email, number, checkbox, radio, file, submit, etc.). |
| name | Name of the input, used for form data submission. |
| value | Default value of the input field. |
| placeholder | Text displayed when input is empty. |
| required | Marks the field as mandatory. |
| disabled | Disables the input field. |
| readonly | Makes the input field read-only. |
| maxlength | Maximum number of characters allowed. |
| min, max | Minimum and maximum values (for number, date, etc.). |
| step | Step interval (for number or range inputs). |
| pattern | Regex pattern for input validation. |
| autofocus | Automatically focuses on the input field when page loads. |
Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Tag Example</title>
</head>
<body>
<h2>Input Types Example</h2>
<form action="/samples/form_processor.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter your username" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="1" max="100"><br><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Output
Browser Output
html
You will see multiple input fields: text box, email, number, and radio buttons.
Filling the fields and clicking Submit sends the data to the URL specified in the action attribute.
Use our TryIt Editor to test how each input type behaves and validates data.Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
All major browser supports this tag
Notes
<input>is a self-closing tag; it does not wrap content.- The type attribute determines the control behavior and validation.
- Use
required,min,max,pattern, and other attributes to enforce client-side validation. - Combine with
<label>for accessibility and better UX.
Conclusion
The <input> tag is the most versatile form element in HTML.
It allows developers to collect a wide range of user data efficiently and works in all modern browsers.
Proper use of attributes ensures valid, accessible, and interactive forms.