HTML Input Types

HTML provides a variety of input types to collect different types of user data. Understanding these input types helps in creating more effective and user-friendly forms.

Common Input Types

Here are some of the most common input types used in HTML forms:

Input Type Description Example
text Allows the user to enter a single-line text input.
Try yourself 
        
            <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</form>
password Allows the user to enter a password, where the characters are masked.
Try yourself 
        
            <form>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
</form>
email Allows the user to enter an email address.
Try yourself 
        
            <form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>
number Allows the user to enter a number.
Try yourself 
        
            <form>
    <label for="quantity">Quantity:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="10">
</form>
checkbox Allows the user to select one or more options.
Try yourself 
        
            <form>
    <label for="subscribe">Subscribe:</label>
    <input type="checkbox" id="subscribe" name="subscribe" value="newsletter">
    <label for="subscribe">Subscribe to newsletter</label>
</form>
radio Allows the user to select one option from a group.
Try yourself 
        
            <form>
    <p>Gender:</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">Other</label>
</form>
submit Creates a button to submit the form data to a server.
Try yourself 
        
            <form>
    <input type="submit" value="Submit">
</form>
reset Creates a button to reset the form data to its initial values.
Try yourself 
        
            <form>
    <input type="reset" value="Reset">
</form>
date Allows the user to select a date.
Try yourself 
        
            <form>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">
</form>
color Allows the user to select a color.
Try yourself 
        
            <form>
    <label for="favcolor">Favorite Color:</label>
    <input type="color" id="favcolor" name="favcolor">
</form>
range Allows the user to select a value from a range of numbers.
Try yourself 
        
            <form>
    <label for="vol">Volume:</label>
    <input type="range" id="vol" name="vol" min="0" max="100">
</form>
file Allows the user to select a file from their device.
Try yourself 
        
            <form>
    <label for="file">Upload a file:</label>
    <input type="file" id="file" name="file">
</form>
hidden Creates an input element that is not visible to the user.
Try yourself 
        
            <form>
    <input type="hidden" id="userid" name="userid" value="12345">
    <input type="submit" value="Submit">
</form>

Using Input Types in HTML

Here is how you can use different input types in an HTML form:

Example: Text Input
Try yourself 
        
            <input type="text" name="username" placeholder="Enter your username">

This example shows a single-line text input field.

Example: Password Input
Try yourself 
        
            <input type="password" name="password" placeholder="Enter your password">

This example shows a password input field with masked characters.

Example: Email Input
Try yourself 
        
            <input type="email" name="email" placeholder="Enter your email">

This example shows an email input field.

Example: Number Input
Try yourself 
        
            <input type="number" name="age" min="1" max="100">

This example shows a number input field.

Example: Checkbox Input
Try yourself 
        
            <input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter

This example shows a checkbox input field.

Example: Radio Input
Try yourself 
        
            <input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

This example shows a radio button input field.

Example: Submit Button
Try yourself 
        
            <input type="submit" value="Submit">

This example shows a submit button.

Example: Reset Button
Try yourself 
        
            <input type="reset" value="Reset">

This example shows a reset button.

Example: Date Input
Try yourself 
        
            <form>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday">
</form>

This example shows a date input field.

Example: Color Input
Try yourself 
        
            <form>
    <label for="favcolor">Favorite Color:</label>
    <input type="color" id="favcolor" name="favcolor">
</form>

This example shows a color input field.

Example: Range Input
Try yourself 
        
            <form>
    <label for="vol">Volume:</label>
    <input type="range" id="vol" name="vol" min="0" max="100">
</form>

This example shows a range input field.

Example: File Input
Try yourself 
        
            <form>
    <label for="file">Upload a file:</label>
    <input type="file" id="file" name="file">
</form>

This example shows a file input field.

Example: Hidden Input
Try yourself 
        
            <form>
    <input type="hidden" id="userid" name="userid" value="12345">
    <input type="submit" value="Submit">
</form>

This example shows a hidden input field.

Important Notes

Here are some important notes and best practices when using HTML input types: