List of HTML Input Types With Examples
Input Type Text
it defines a single-line text input field on a web page:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Text field in HTML </h2>
<form action="">
First Name: <input type="text"><br> <br>
Last name: <input type="text"> <br> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Input Type Password
It is used to display a password field:
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<form>
Enter Username: <input type="text" id="username" name="username"><br> <br>
Enter Password: <input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Submit
It defines a Submit Button to process User’s data.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Submit Button in HTML </h2>
<form>
First name: <input type="text"><br><br>
Last name: <input type="text"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Reset
It is used to reset all form values to their default values
<!DOCTYPE html>
<html>
<body>
<h2>Reset Button: HTML </h2>
<form>
First name: <input type="text"><br><br>
Last name: <input type="text"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
Input Type Radio
It is used to select ONLY ONE choice of a limited number of choices. usually, it is used for defining the Gender.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>How to Use Radio Buttons in HTML </h2>
<form>
Male: <input type="radio"> <br>
Female: <input type="radio"> <br>
Others: <input type="radio">
</form>
</body>
</html>Input Type Checkbox
It is used to select One or MORE options of a limited number of choices.
Syntax: <input type=”checkbox”>
Example:
<!DOCTYPE html>
<html>
<body>
<form>
<h2> Education Qualification: </h2>
<input type="checkbox"> BCA <br>
<input type="checkbox"> B.SC. <br>
<input type="checkbox"> MCA <br>
<input type="checkbox"> M.SC. <br>
</form>
</body>
</html>Input Type Button
It is used to display a button on a web page.
Syntax: <input type=”button”>
Example:
<!DOCTYPE html>
<html>
<body>
<form>
<h2> Education Qualification: </h2>
<input type="checkbox"> BCA <br>
<input type="checkbox"> B.SC. <br>
<input type="checkbox"> MCA <br>
<input type="checkbox"> M.SC. <br> <br>
<input type="button" value="Submit Data">
</form>
</body>
</html>Input Type Color
It is used for input fields that should contain a color.
Syntax: <input type=”color”>
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Pick a Color for a Web Page </h2>
<form>
Select Color: <input type="color" value="#0000ff"> <br> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML Comment Tags