search
HomeWeb Front-endHTML TutorialHTML Form Input Type

HTML Form Input Type

Sep 04, 2024 pm 04:53 PM
htmlhtml5HTML TutorialHTML PropertiesHTML tags

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. HTML Form Input Type


checkbox Used to define a checkbox allowing users to select/deselect its values. HTML Form Input Type


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. HTML Form Input Type


<input type="file" name="newfile">

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. HTML Form Input Type


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 HTML Form Input Type



radio Used to define a radio button and select a single value out of multiple. HTML Form Input Type


Red
Blue
Green
reset Used to define a button to reset the form values to its defaults. HTML Form Input Type


submit Used to define a submit button for the form. HTML Form Input Type


text Used to define a text field in the form. HTML Form Input Type



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. HTML Form Input Type


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. HTML Form Input Type


email Used to define a text field for email which has all the predefined validations done for checking an email. HTML Form Input Type


date Used to define a date picker for the HTML form. HTML Form Input Type


number Used to input numbers in the HTML form by displaying a spinner and adding default validation when used in supported browsers. HTML Form Input Type


range Used to define a range in the HTML form. HTML Form Input Type


search Used to define single-line text fields for entering search strings. HTML Form Input Type


tel Used to define a telephone entering field within an HTML form. HTML Form Input Type


time Used to define a field for entering time in HTML form HTML Form Input Type


url Used to define a text field for entering a url in the HTML form with all its validations being performed automatically.

 

HTML Form Input Type


week Used to define a text field for entering the week-year number and a week number with no time zone. HTML Form Input Type


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. HTML Form Input Type


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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
The Versatility of HTML: Applications and Use CasesThe Versatility of HTML: Applications and Use CasesApr 30, 2025 am 12:03 AM

HTML is not only the skeleton of web pages, but is more widely used in many fields: 1. In web page development, HTML defines the page structure and combines CSS and JavaScript to achieve rich interfaces. 2. In mobile application development, HTML5 supports offline storage and geolocation functions. 3. In emails and newsletters, HTML improves the format and multimedia effects of emails. 4. In game development, HTML5's Canvas API is used to create 2D and 3D games.

What is the root tag in an HTML document?What is the root tag in an HTML document?Apr 29, 2025 am 12:10 AM

TheroottaginanHTMLdocumentis.Itservesasthetop-levelelementthatencapsulatesallothercontent,ensuringproperdocumentstructureandbrowserparsing.

Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools