Choose the apt HTML form input type with this handy Cheat Sheet

navya , Credit to  volkotech-solutions May 29
Cheat sheet for HTML input types banner image

This handy cheat sheet provides the listed collection of all html input types of the form along with the note on how to use respective input based on the need.

List of HTML input types along with their specifications

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML input types</title>
    <input type="date" name="date" id="date" />
    <!-- for the input type date -->
    <input type="datetime" name="datetime" id="datetime" />
    <!-- for both date and time -->
    <input type="email" name="email" id="email" />
    <!-- for email input -->
    <input type="password" name="password" id="password" />
    <!-- to enter password -->
    <input type="file" name="file" id="file" />
    <!-- to upload file -->
    <input type="week" name="week" id="week" />
    <!-- to enter the week -->
    <input type="button" value="click" />
    <!-- for the input button -->
    <input type="checkbox" name="checkbox" id="checkbox" />
    <!-- to select multiple inputs -->
    <input type="color" name="color" id="color" />
    <!-- to pic the color -->
    <input type="url" name="url" id="url" />
    <!-- for the https url inputs -->
    <input type="time" name="time" id="time" />
    <!-- to select the time -->
    <input type="text" name="text" id="text" />
    <!-- for the text input only for limited characters -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <!-- text range could be managable with the cols and rows value -->
    <input type="tel" name="tel" id="tel" />
    <!-- takes only mobile numbers -->
    <input type="submit" value="submit" />
    <!-- to submit the form -->
    <input type="search" name="search" id="search" />
    <!-- for search functionality -->
    <input type="reset" value="reset" />
    <!-- resets the given inputs to its original state -->
    <input type="range" name="range" id="range" />
    <!-- kind of progress bar that tells the range -->
    <input type="radio" name="radio" id="radio" />
    <!-- we can choose only one input from many -->
    <input type="number" name="number" id="number" />
    <!-- takes only numeric values -->
    <input type="month" name="month" id="month" />
    <!-- takes the month as input-->
    <!-- image as input and alt text should be must and should the image is from my local folder -->
    <input type="hidden" name="hidden" />
    <!-- will hide the input -->
    <select name="color" id="color">
      <!-- will select the input from the dropdown -->
      <option value="blue">Blue</option>
      <option value="white">White</option>
      <option value="pink">Pink</option>
      <option value="gold">Gold</option>




Read Next