HTML | type Attribute - GeeksforGeeks

09 Dec, 2021
The HTML <input> type Attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text.Syntax:  
<input type="value">
Attribute Values:  
button: It is used to define a clickable Button in a Document. It is mostly used with the JavaScript to activate the script.
checkbox: It is used to define a checkbox field. The checkbox is shown as a square box that is ticked when it is activated. It allows the user to select one or more option among all the limited choices.
color: It is used to define a color picker. The value should be a seven-character hexadecimal notation. Its default value is #000000(black).
date: It is used to define a date picker or control field. The value will be the year, month and day.
email: It is used to define a field for email address. The input email id is automatically validated to check the format of the email id is correct or not.
file: It is used to specify the file select field and add a button to choose a file for upload to the form.
hidden: It is used to define an input hidden field. A hidden field also includes those data that could not be seen or modified by the users when submitted the form. A hidden field only stores those database records that need to be updated when submitting the form.
image: It is used to define an image as the submit button.
month: It is used to specify the control of month and year field. The value must be in the format of “YYYY-MM”.
number: It is used to specify an input field for entering a number.
password: It is used to specify the password field of input tag. Password should be served over the HTTPS pages because it include the sensitive information of the user.
radio: It is used to define a Radio Button. Radio Buttons are used to let the user select exactly one option from a list of predefined options. Radio Button input controls are created by using the “input” element with a type attribute having value as “radio”.
range: It is used to define control for a number entered by the user. It can set restrictions on unimportant number or value which will be entered by the user. Its default range from 0 to 100.
reset: It is used to defines a reset button. The reset button is used to reset all the form values to its initial values.
search: It is used to define a text field that entered a search string.
submit: It is used to define a submit button. It is used to submit all the user value to the form handler. The Form Handler is a server page that activates a script for processing all the input values.
tel: It is used to define a field that entering a user telephone Number.
text: It is used to define a single-line text field . The default width of the text field is 20 characters.
time: It is used to specify the entering time control field.
url: It is used to define a field that entered a URL. This input value is automatically validated before submitted the form.
week: It is used to define a week and a year control field.
Example:  
html
<!DOCTYPE html><html> <head>    <title>HTML Input type = "Date" </title>    <style>        h1 {            color: green;        }                 h2 {            font-family: Impact;        }                 body {            text-align: center;        }    </style></head> <body>     <h1>GeeksforGeeks</h1>    <h2>HTML <input type="date"></h2>     <input type="date"        id="test"        value="2019-07-02T25:32Z"> </body> </html>
Output:  
Supported Browsers: The browsers supported by HTML <input> type attribute are listed below:  
Google Chrome
Internet Explorer
Firefox
Safari
Opera
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ManasChhabra2
HTML-Attributes
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript