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.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<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-->
<input
type="image"
width="20px"
height="20px"
src="./download.jpeg"
alt="emoji"
/>
<!-- 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>
</select>
</body>
</html>
21 likes
Add to read list
Comments