List of Input Elements in HTML
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
Share your thoughts in the comments
Please Login to comment...