List of Input Elements in HTML Last Updated : 25 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 TypeDescriptionButtonThe button is generally a push button, which is pushed to activate.checkboxThe checkbox must be ticked to activate it.colorInterface used to choose the color of our choice.dateInterface used to choose a date.EmailInterface used to accept e-mail addresses.FileInterface used to upload files.ImageInterface used to input an image.MonthInterface used to input years and months. The format is “YYYY-MM”.NumberInterface let the user enter a number.PasswordInterface defines a password field (characters are masked for security).RadioCollection of radio buttons inputting a set of options).RangeSlide control interface with Default range is 0 to 100.ResetInterface used to resets the form to the default values.SearchInterface for entering a search string.SubmitInterface for submitting all form values to a form-handler.TextInterface 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: Comment More infoAdvertise with us A ayushcoding100 Follow Improve Article Tags : HTML HTML-Tags HTML-Questions Similar Reads How to implement various types of lists in HTML ? HTML lists are used to display items in an organized format. There are three types: unordered lists(<ul>), which use bullets; ordered lists (<ol>), which use numbers; and definition lists (<dl>), which pair terms with descriptions. Each type serves specific purposes.HTML lists allo 4 min read What is nesting of list & how to create the nested list in HTML ? Nesting of lists in HTML involves placing one list within another list item, creating a hierarchical structure. This is done by embedding a <ul> (unordered) or <ol> (ordered) list inside an <li> (list item) element. The proper way to make a nested HTML list is to use the <ul> 3 min read Unordered, Ordered, and Description Lists in HTML Lists are used to store data or information in web pages in ordered or unordered form. HTML supports several types of list elements that can be included in the <BODY>tag of the document. These elements may also be nested, i.e., the onset of elements can be embedded within another. There are th 5 min read How to Create an Unordered List in HTML ? An unordered list in HTML is a collection of items displayed with bullet points. To create an unordered list, we can use the <ul> tag to start the list and <li> tags for each items. Unordered lists are usually displayed with bullet points. Syntax<ul> <li>apple</li> < 1 min read How to create a nested webpage in HTML ? When the content of one completely different webpage is embedded into another webpage, it is called a nested webpage. In simple words, a webpage that is inside another webpage of a completely different domain. In this article, we are going to learn how to create a nested webpage. There are two metho 2 min read How to define a list item in HTML5? To define a list in HTML5 we can use the HTML <li> tag. But there are two types of listing in HTML. One is an ordered list and another one is an unordered list. For ordered we can use HTML <ol> tag and for the unordered list, we will use the HTML <ul> tag. Also, we can change the l 2 min read How to set list in descending order in HTML5 ? HTML Lists are used to create informative lists. Any list will have one or more list items. We have three types of lists in HTML. ul: An unordered list is referred to as an ul. Simple bullets would be used to list the items.ol: A number that is arranged in a certain order. This will list the items u 2 min read How to create a list with roman number indexing in HTML ? Roman numeral indexing in HTML lists employs Roman numerals (I, II, III, etc.) for item markers. This can be achieved by specifying the type attribute of the <ol> tag as "I", "i", "A", "a", "I", or "i", or by manually numbering list items with Roman numerals. This guide provides all approaches 2 min read How to specify the kind of marker to be used in the list in HTML5 ? There are two types of lists in HTML, the first is an ordered list which is created using the <ol></ol> tag, and the second is an unordered list which is created using the <ul></ul> tag. Both of the lists should have a <li></li> tag to represent the data inside th 3 min read What is the way to keep list of elements straight in HTML file ? In this article, we will discuss various methods to keep the list of elements straight in an HTML file. Generally, The proper indented content in the browser makes the content well-organized & structured, enhancing the overall readability, along with increasing the interactivity of the website. 6 min read Like