HTML Input Types

List of HTML Input Types

• text - For single-line text input.
• password - For password input where characters are masked.
• email - For email addresses.
• number - For numeric input with optional min, max, and step attributes.
• tel - For telephone numbers.
• url - For URLs.
• search - For search input.
• date - For date input (year, month, and day).
• datetime-local - For date and time input without timezone.
• month - For selecting a month and year.
• week - For selecting a specific week of the year.
• time - For time input.
• color - For color input via a color picker.
• checkbox - For selecting one or more options.
• radio - For selecting a single option from a group.
• file - For file uploads.
• range - For selecting a numeric value within a range using a slider.
• hidden - For hidden input that is not visible to the user.
• submit - For submitting the form data.
• reset - For resetting the form fields to their default values.
• button - For clickable buttons.
• image - For graphical submit buttons.

Commonly Used HTML Input Types

• Text: Used for single-line text input. Ideal for names, usernames, etc.

  <input type="text" name="username" placeholder="Enter your name">
                  

• Email: Validates email input for proper formatting.

  <input type="email" name="email" placeholder="Enter your email">
                  

• Password: Masks the input for sensitive data.

  <input type="password" name="password" placeholder="Enter your password">
                  

• Checkbox: Allows selection of multiple options.

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

• Radio: Allows selection of a single option from multiple choices.

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

• Date: Enables date selection via a date picker.

  <input type="date" name="dob">
                  

• File: Allows file uploads.

  <input type="file" name="profile_picture">
                  

Advanced HTML Input Types

Explore some advanced input types below:

• Color: Allows users to select a color.

  <input type="color" name="favorite_color">
                  

• Range: Provides a slider for numeric input.

  <input type="range" name="volume" min="0" max="100">
                  

• Search: Optimized for search queries.

  <input type="search" name="query" placeholder="Search here">
                  

How to Use Multiple Input Types in a Form

Below is an example form that uses various input types:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Your Name">

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

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

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

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

FAQs about HTML Input Types

• Q: What are HTML input types?

  A: Input types define the type of data a user can input in a form field.

• Q: How many input types are available?

  A: HTML offers over 20 input types, including text, email, password, radio, and file.

• Q: Can I use custom styles for input types?

  A: Yes, CSS can be used to style input types to match your design needs.

How-To: Create a Login Form with HTML Input Types

Follow these steps to create a simple login form:

1. Define a form element with the action and method attributes.
2. Add input fields for username and password.
3. Include a submit button to complete the form.

<form action="/login" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

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

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