Input Types and Attributes (Live Playground)
In this tutorial, we will explore various input types and attributes used in HTML forms. Understanding different input types and attributes will help you create more functional and user-friendly forms.
Text Input
The most common input type is the text input. It allows users to enter a single line of text.
<label for="username">Username:</label> <input type="text" id="username" name="username" />
Password Input
A password input is similar to a text input but masks the characters entered by the user.
<label for="password">Password:</label> <input type="password" id="password" name="password" />
Email Input
The email input type allows users to enter an email address. It provides basic email validation.
<label for="email">Email:</label> <input type="email" id="email" name="email" />
Number Input
The number input type allows users to enter a number. You can set minimum and maximum values using the min and max attributes.
<label for="age">Age:</label> <input type="number" id="age" name="age" min="1" max="120" />
Radio Buttons
Radio buttons let users choose a single option from a list of options.
<label for="gender">Gender:</label>
<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>
Checkboxes
Checkboxes allow users to select multiple options from a list.
<label for="interests">Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports" />
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music" />
<label for="music">Music</label>
Dropdown List
A dropdown list lets users choose an option from a drop-down menu.
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
File Input
The file input type allows users to upload a file.
<label for="file">Upload a file:</label> <input type="file" id="file" name="file" />
Additional Attributes
Placeholder
The placeholder attribute provides a hint to users about the expected value.
<input type="text" id="username" name="username" placeholder="Enter your username" />
Required
The required attribute ensures that a field must be filled before submitting the form.
<input type="text" id="username" name="username" required />
Disabled
The disabled attribute disables an input field, preventing user interaction.
<input type="text" id="username" name="username" disabled />
Readonly
The readonly attribute makes an input field read-only, allowing users to view the value but not change it.
<input type="text" id="username" name="username" readonly />
Autocomplete
The autocomplete attribute helps users complete forms faster by providing suggestions based on their previous entries.
<input type="text" id="address" name="address" autocomplete="on" />
Multiple
The multiple attribute allows users to select multiple options in a dropdown list or upload multiple files using the file input type.
<select id="countries" name="countries" multiple>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<input type="file" id="files" name="files" multiple />
Step
The step attribute specifies the interval between legal numbers in a number input. For example, if you want users to choose only even numbers, you can set the step attribute to "2".
<input type="number" id="even-number" name="even-number" step="2" />
Pattern
The pattern attribute allows you to define a custom validation pattern using regular expressions.
<label for="phone">Phone Number (Format: xxx-xxx-xxxx):</label>
<input type="tel" id="phone" name="phone" pattern="^\d{3}-\d{3}-\d{4}$" required />
Conclusion
In this tutorial, we have explored various input types and attributes used in HTML forms. By understanding these elements, you can create more functional and user-friendly forms that cater to a wide range of user needs.