Skip to content
Related Articles

Related Articles

List of Input Elements in HTML

Improve Article
Save Article
  • Last Updated : 28 Apr, 2022
Improve Article
Save Article

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">Chose the color of cloth<br><br>
    <input type="date">Chose 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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!