List of Input Elements in HTML

One of the main components of the web is Forms. It would be very hard to collect data without them. And to make a good form we must know the Basic Input Type in HTML.

In this article, we will talk about Input Types in HTML. HTML Forms are used to collect data from a user who visits your website with the help of Input tags. These Input tags improve the user experience and make the forms more interactive.

Commonly Used Input Types:

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: The interface let the user enter a number.
Password: The 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: The interface is 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.

Example 1:

<!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>