Understanding the HTML <input> Tag
The <input> tag is a versatile HTML element used in forms to collect user inputs. Depending on the attributes set, it can accept various types of data, from text to numbers and files.
Main Attributes of the <input> Tag
| Attribute | Description |
|---|---|
type |
Specifies the type of input. |
name |
Defines the name of the input element, which is used to reference form data after submission. |
value |
Specifies the initial value of the input field. |
placeholder |
Provides a hint to the user about what kind of information is expected in the input. |
required |
Indicates that the input field must be filled out before submitting the form. |
disabled |
Disables the input field. |
pattern |
Defines a regex that the input field's value is checked against to ensure it matches a specified pattern. |
minlength |
For texts , it represent the minimum number of characters, otherwise the submit will fail |
maxlength |
For texts , it represent the maximum number of characters, otherwise the submit will fail |
min |
For numbers and date, it represent the lowest acceptable number or date, otherwise the submit will fail |
max |
For numbers, it represent the bigger acceptable number or date, otherwise the submit will fail |
step |
When use the interface of the input (arrows or range) it represent how much will add or subtract |
Types of <input> and Examples
| Type | Description | Example |
|---|---|---|
text |
Allows the user to enter plain text. | <input type="text" name="username" placeholder="Enter your username"> |
password |
Like text, but masks the user's input for privacy. | <input type="password" name="password" placeholder="Enter your password"> |
radio |
Allows the user to select one of a limited number of choices. | <input type="radio" name="gender" value="male" id="male"><label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">Female</label> |
checkbox |
Allows the user to select zero or more options from a limited number of choices. | <input type="checkbox" name="subscribe" id="subscribe"><label for="subscribe">Subscribe to newsletter</label> |
submit |
Button to submit the form. | <input type="submit" value="Submit Form"> |
email |
Includes built-in validation to check if the entered text is a valid email address. | <input type="email" name="email" placeholder="Enter your email"> |
date |
Allows the user to select a date. | <input type="date" name="dob"> |
color |
Provides a color picker to choose a color. | <input type="color" name="favoriteColor"> |
number |
Provides a normal text input, but only accept numbers. Must use if is the case because smart devices will choose the number only keyboard | <input type="number" name="mynumber"> |
range |
Provides slider to choose a number. | <input type="range" name="range" min="0" max="100"> |
file |
Provides option to select a file from your local machine. | <input type="file" name="myfile"> |
HTML Input Types Tutorial
An HTML form is used to collect user input. HTML provides different input types to handle different types of data. In this tutorial, we will learn how HTML input types work with fictional examples.
We gona use the following css for testing purpose
input { border: 2px solid currentcolor; }
input:invalid { border: 2px dashed red !important; }
input:invalid:focus { background-color: rgba(40,0,0,0.3); }Text Input
The <input type="text"> is used when you want the user to enter a single line of text.
<input type="text" placeholder="username" name="username" minlength="5">
Password Input
The <input type="password"> is used when you want the user to enter a password. The text entered in a password input is masked for security reasons.
<input type="password" name="password">
Email Input
The <input type="email"> is used when you want the user to enter an email address. The input must be in the form of an email address.
<input type="email" name="email" required="required">
Checkbox Input
The <input type="checkbox"> is used when you want the user to select one or more options from a list.
<input type="checkbox" name="option1" value="Option 1"> Option 1
<input type="checkbox" name="option2" value="Option 2"> Option 2
Radio Input
The <input type="radio"> is used when you want the user to select only one option from a list.
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
Submit Button
The <input type="submit"> is used to submit the form data to the server.
<input type="submit" value="Submit">
Number Input
The <input type="number"> is used when you want the user to enter a numerical value.
<input type="number" name="quantity" value="0" min="1" max="100" step="5">
File Input
The <input type="file"> is used when you want the user to upload a file.
<input type="file" name="file">
Color Input
The <input type="color"> is used when you want the user to select a color.
<input type="color" name="color" style="height:50px;">
Range Input
The <input type="range"> is used when you want the user to select a value from a range.
<input type="range" name="range" min="0" max="100">
Using the pattern Attribute
The patternis a powerful attribute that allows you to define a regular expression against which the input's value is checked. This is particularly useful for custom validations that go beyond the basic type checks.
Example: Validating a phone number (format: 123-456-7890):
<input type="text" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Enter a phone number in the format: 123-456-7890" required>
This pattern ensures that the user enters a phone number exactly in the specified format. If the input does not match, the form will not submit, and the user will be prompted to correct the data.
Conclusion
The <input> tag is a critical element in HTML forms, providing a wide range of functionalities for gathering user inputs. Understanding how to use its various types and attributes, especially the pattern attribute for regex, can significantly enhance form handling and data validation in your web applications.