HTML Tutorial

« Previous Next »

HTML Input Types

HTML Input Types Here are the different input types you can use in HTML: <input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Input Type Text

<input type="text"> defines a single-line text input field:

Output:

<input type="password"> defines a password field:

Output:

Input Type Submit

Output:

<input type="reset"> defines a reset button that will reset all form values to their default values:

Output:

<input type="radio"> defines a radio button.

Output:

<input type="checkbox"> defines a checkbox.

Output:

<input type="button"> defines a button:

Output:

The <input type="color"> is used for input fields that should contain a color.

Output:

The <input type="date"> is used for input fields that should contain a date.

Output:

Practice Exercises

Task 1: How to create a secure login form with reset and submit options?

Goal: Build a login form asking for a username and password, with buttons to submit or reset the entered text.
💡 Hint: Use type="text", type="password", type="submit", and type="reset".

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Login Form Example</title>
  </head>
  <body>

    <h2>User Authentication</h2>

    <form action="/action_page.php">
      <label for="username">Username:</label><br>
      <input type="text" id="username" name="username" value="JohnDoe"><br><br>
      
      <label for="pwd">Password:</label><br>
      <input type="password" id="pwd" name="pwd"><br><br>

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

  </body>
</html>

Output :

User Authentication

Explanation: type="text" creates a standard single-line input field, type="password" masks characters with bullets or asterisks, type="submit" sends the data, and type="reset" clears the form back to initial values.

Task 2: How to handle single-choice vs multiple-choice options?

Goal: Create a preference form where a user picks one gender (single choice) and multiple interests/hobbies (multiple choices).
💡 Hint: Use type="radio" with matching name attributes for single selection, and type="checkbox" for multi-selection.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Radio and Checkbox Example</title>
  </head>
  <body>

    <h2>User Preferences</h2>

    <form action="/action_page.php">
      <p>Select Gender (Choose one):</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><br>

      <p>Select Hobbies (Choose many):</p>
      <input type="checkbox" id="coding" name="hobby1" value="coding">
      <label for="coding">Coding</label><br>
      <input type="checkbox" id="music" name="hobby2" value="music">
      <label for="music">Music</label><br><br>

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

  </body>
</html>

Output :

User Preferences

Select Gender (Choose one):

Male
Female

Select Hobbies (Choose many):

Coding
Music

Explanation: Grouping radio buttons with the same name attribute ensures only one item can be selected at a time. Checkboxes allow choosing zero, one, or several options independently.

Task 3: How to select a custom date and pick a color value?

Goal: Build an event registration input area asking users to choose their booking date and a custom theme color.
💡 Hint: Use type="date" for calendar selection and type="color" for the color picker.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Date and Color Picker Example</title>
  </head>
  <body>

    <h2>Event Customization</h2>

    <form action="/action_page.php">
      <label for="eventdate">Event Date:</label><br>
      <input type="date" id="eventdate" name="eventdate"><br><br>

      <label for="themecolor">Theme Color:</label><br>
      <input type="color" id="themecolor" name="themecolor" value="#ff0000"><br><br>

      <input type="submit" value="Save Settings">
    </form>

  </body>
</html>

Output :

Event Customization

Explanation: type="date" provides a native date picker dropdown, while type="color" triggers a color picker palette interface.

Task 4: How to trigger an interactive action without submitting a form?

Goal: Create a clickable push button that executes a simple JavaScript popup box when clicked.
💡 Hint: Use type="button" together with the onclick event attribute.

💡 Show Solution

<!DOCTYPE html>
<html>
  <head>
    <title>Input Button Example</title>
  </head>
  <body>

    <h2>Interactive Input Button</h2>
    <p>Click the button below to trigger JavaScript action:</p>

    <input type="button" onclick="alert('Welcome to HTML Input Types!')" value="Click Me!">

  </body>
</html>

Output :

Interactive Input Button

Click the button below to trigger JavaScript action:

Explanation: type="button" defines a standard push button that has no submit action by default, making it ideal for client-side JavaScript interactions via attributes like onclick.

« Previous Next »