List of Input Elements in HTML

Last Updated : 08 Apr, 2024

Web forms, a vital component of the digital world, rely heavily on the ‘input element in HTML’ for data collection. To create effective forms, a solid understanding of the basic input types in HTML is indispensable.

In this comprehensive guide, we explore the ‘input element in HTML’. Web forms use HTML input elements to collect data from visitors. These input elements not only foster user interaction but also significantly enhance the user experience.

By mastering the ‘input element in HTML’, you can design interactive, user-friendly forms that efficiently gather and manage data.

Commonly Used Input Types:

Input Type	Description
Button	The button is generally a push button, which is pushed to activate.
checkbox	The checkbox must be ticked to activate it.
color	Interface used to choose the color of our choice.
date	Interface used to choose a date.
Email	Interface used to accept e-mail addresses.
File	Interface used to upload files.
Image	Interface used to input an image.
Month	Interface used to input years and months. The format is “YYYY-MM”.
Number	Interface let the user enter a number.
Password	Interface defines a password field (characters are masked for security).
Radio	Collection of radio buttons inputting a set of options).
Range	Slide control interface with Default range is 0 to 100.
Reset	Interface used to resets the form to the default values.
Search	Interface for entering a search string.
Submit	Interface for submitting all form values to a form-handler.
Text	Interface to input single-line text field.

Syntax:

<input type="type">

The “type” attribute of the input element can be of various types as described above.

For example, if we want to make an input type button then We will write,

<input type="Button">

Attributes used in Code:

placeholder="sample text"

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

Let’s see some examples to know how these input types work.

Example 1:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>List Of Inputs in HTML</title>
</head>

<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>

    <h2> List Of Inputs in HTML </h2>
    
    <input type="button">click Button if You agree<br><br>
    <input type="checkbox">Check If you are 18+<br><br>
    <input type="color">Choose the color of cloth<br><br>
    <input type="date">Choose You birth date<br><br>
    <input type="email" placeholder="Enter Your Mail"><br><br>
    <input type="file">Input the required file<br><br>
    <input type="image">Input You Image<br><br>
    <input type="month">Month Of admission<br><br>
    <input type="number" placeholder="Enter Your Age"><br><br>
</body>

</html>

Output:

Example 2:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>List Of Inputs in HTML</title>
</head>

<body>
    <h1 style="color: green">
        GeeksForGeeks
    </h1>

    <h2> List Of Inputs in HTML </h2>
    <input type="password">Enter the password<br><br>
    <input type="radio">Click If You agree<br><br>
    <input type="range">Enter your experience level<br><br>
    <input type="reset">Reset the form<br><br>
    <input type="search" placeholder="Search the word"><br><br>
    <input type="submit">Submit the form<br><br>
    <input type="text" > Enter your views<br><br>
</body>

</html>