Input Types (text, email, password, checkbox, radio, etc.)

---

HTML provides a variety of input types within the <input> element to handle different kinds of user input. These input types allow you to create forms that include text boxes, email fields, password fields, checkboxes, radio buttons, and more. This article explains and demonstrates some commonly used input types.

1. Text Input

The type="text" attribute is used to create a single-line text field, where users can enter plain text. This is one of the most commonly used input types.

Example:

    <label>Username:</label>
    <input type="text" name="username" placeholder="Enter your username">
        

2. Email Input

The type="email" attribute creates an input field that is specifically designed to collect email addresses. Browsers may validate the input format to ensure it's a valid email.

Example:

    <label>Email:</label>
    <input type="email" name="email" placeholder="Enter your email address">
        

3. Password Input

The type="password" attribute creates a password input field. Text entered here is obscured to protect the user's privacy.

Example:

    <label>Password:</label>
    <input type="password" name="password" placeholder="Enter your password">
        

4. Checkbox Input

The type="checkbox" attribute creates a checkbox, allowing the user to select one or more options independently.

Example:

    <label>
        <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter
    </label>
        

5. Radio Input

The type="radio" attribute creates radio buttons, which allow the user to select only one option from a set of choices. Radio buttons with the same name attribute are grouped together.

Example:

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

6. Number Input

The type="number" attribute creates a numeric input field where the user can enter a number. Some browsers provide controls to increase or decrease the number.

Example:

    <label>Age:</label>
    <input type="number" name="age" min="1" max="100" placeholder="Enter your age">
        

7. Date Input

The type="date" attribute creates a date picker, allowing the user to select a date from a calendar interface.

Example:

    <label>Birthday:</label>
    <input type="date" name="birthday">
        

8. Submit Button

The type="submit" attribute creates a button that, when clicked, submits the form data to the server.

Example:

    <input type="submit" value="Submit">
        

9. Reset Button

The type="reset" attribute creates a button that resets all the form fields to their default values.

Example:

    <input type="reset" value="Reset">
        

10. File Input

The type="file" attribute creates a file input field, which allows the user to upload a file from their device.

Example:

    <label>Upload your file:</label>
    <input type="file" name="file">
        

Complete Example Form

Here is a form that combines all these input types:

    <form action="submit_form.php" method="post">
        <label>Username:</label>
        <input type="text" name="username" placeholder="Enter username"> <br>

        <label>Email:</label>
        <input type="email" name="email" placeholder="Enter email"> <br>

        <label>Password:</label>
        <input type="password" name="password" placeholder="Enter password"> <br>

        <label>Subscribe:</label>
        <input type="checkbox" name="subscribe" value="newsletter"> <br>

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

        <label>Age:</label>
        <input type="number" name="age" min="1" max="100"> <br>

        <label>Birthday:</label>
        <input type="date" name="birthday"> <br>

        <label>Upload File:</label>
        <input type="file" name="file"> <br>

        <input type="submit" value="Submit">
        <input type="reset" value="Reset">
    </form>
        

Conclusion

HTML provides a range of <input> types for collecting various forms of user input. By choosing the right input type, you can enhance the usability of your form and ensure that users can easily provide the information you need.

---

Next >