HTML Input Types

What is an HTML Input?

HTML Input elements allow users to enter data in forms. They are the building blocks of forms and can accept text, numbers, dates, selections, and more.

• Collect user information like name, email, password
• Allow choices via checkboxes, radio buttons, or dropdowns
• Enable user interaction in websites and applications

Common HTML Input Types

• text – Single-line text input
• password – Hidden text for passwords
• email – Email address input with validation
• number – Numeric input with min/max
• date – Date selection
• checkbox – Multiple options selection
• radio – Single option selection from a group
• submit – Submit form data
• reset – Reset form fields

HTML Input Examples

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Register">
</form>

                

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

    <label for="dob">Date of Birth:</label>
    <input type="date" id="dob" name="dob">

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

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

                

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

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

                

Best Practices for Input Types

• Always use label for accessibility
• Use proper type to leverage browser validation
• Set required attribute for mandatory fields
• Provide placeholder text for better UX
• Use min, max, and step for number inputs
• Group radio buttons and checkboxes with fieldset and legend