Open In App

List of Input Elements in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

One of the main component 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: 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>


Output:

 



Last Updated : 26 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads