HTML Form Input Type-HTML Tutorial-php.cn

The tag in HTML is used to design interactive controls in web forms for accepting data from the user end. A wide variety of types of control widgets and input data are available, depending on the user agent and device used. The tag is one of the most important elements used in all of HTML due to its sheer number of combinations of attributes and input types. In this topic, we are going to learn about HTML Form Input Type.

HTML Form Input Type

The tag is an important element of a HTML

element. The “type” attribute inside the tag can be of various types and is used to define information field such as provides a text box. The default type for the tag is text.

List of the types of “input” available in HTML

Type	Description	Format	Example
button	Used to define a push button with the text of the button being the value of the value attribute.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
checkbox	Used to define a checkbox allowing users to select/deselect its values.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Cricket Tennis Football
file	Used to define a file upload feature on the local system with the accept attribute being used to restrict the file types for upload.		<input type="file" name="newfile"> Copy after login
hidden	Used to hide a control whose value will be submitted on the server. There is an example in the next column, but it’s hidden!
image	A graphical submit button — displaying an image defined with the src attribute. The alt attribute displays if the image src is missing.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
password	Used to define a single-line text field whose value is obscured, and it will also alert the user if the site is not secure		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
radio	Used to define a radio button and select a single value out of multiple.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Red Blue Green
reset	Used to define a button to reset the form values to its defaults.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
submit	Used to define a submit button for the form.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
text	Used to define a text field in the form.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login

List of the types of “input” available in HTML5

Type	Description	Format	Example
color	Used to define the color of the elements in an HTML form. It takes a hexadecimal input.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
datetime-local	Used to define an element for date and time in the HTML form with opening a date picker or numeric wheels for the month, day, and year, when used in supported browsers.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
email	Used to define a text field for email which has all the predefined validations done for checking an email.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
date	Used to define a date picker for the HTML form.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
number	Used to input numbers in the HTML form by displaying a spinner and adding default validation when used in supported browsers.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
range	Used to define a range in the HTML form.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
search	Used to define single-line text fields for entering search strings.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
tel	Used to define a telephone entering field within an HTML form.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
time	Used to define a field for entering time in HTML form		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
url	Used to define a text field for entering a url in the HTML form with all its validations being performed automatically.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
week	Used to define a text field for entering the week-year number and a week number with no time zone.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login
datetime	Used to define a text field for entering a date and time (hour, minute, second, and fraction of a second) based on the UTC time zone.		Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login Copy after login

Attributes

The below section provides a table listing all the relevant attributes along with a brief description. This table is followed by a list describing each attribute in greater detail, along with which input types they are associated with. Those that are common to most or all input types are defined in greater detail below.

Attribute	Types
1. accept	file
2. alt	image
3. autocomplete	all
4. autofocus	all
5. capture	file
6. checked	radio, checkbox
7. dirname	text, search
8. disabled	all
9. form	all
10. formaction	image, submit
11. formenctype	image, submit
12. formmethod	image, submit
13. formnovalidate	image, submit
14. formtarget	image, submit
15. height	image
16. list	almost all
17. max	numeric types
18. maxlength	password, search, tel, text, url
19. min	numeric types
20. minlength	password, search, tel, text, url
21. multiple	email, file
22. name	all
23. pattern	password, text, tel
24. placeholder	password, search, tel, text, url
25. readonly	almost all
26. required	almost all
27. size	email, password, tel, text
28. src	image
29. step	numeric types
30. type	all
31. value	all
32. width	image

Conclusion – HTML Form Input Type

With the help of HTML5 new form input types, we can enhance the user’s experience, makes a future-proof application, and makes the coding a bit easier for developers. Support of these new form input types is strong especially in mobile devices with keypads. These input types are safe for usability purposes and are also providing extra utility to the user.

The above is the detailed content of HTML Form Input Type. For more information, please follow other related articles on the PHP Chinese website!