EDUCBA

Home Software Development Software Development Tutorials HTML Tutorial HTML Form Input Type

HTML Form Input Type

Updated April 1, 2023

Introduction to HTML Form Input Type

The <input> 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 <input> 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

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

The <input type=” “> tag is an important element of a HTML <form> element. The “type” attribute inside the <input> tag can be of various types and is used to define information field such as <input type=”text”> provides a text box. The default type for the <input> 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. click me 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" value="Click me">
</form>
</body>
</html>
checkbox Used to define a checkbox allowing users to select/deselect its values. cricket tennis football 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox">Cricket<br>
<input type="checkbox">Tennis<br>
<input type="checkbox">Football<br>
</form>
</body>
</html>
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. choosen file 
<!DOCTYPE html>
<html>
<body>
<input type="file" name="newfile">
</body>
</html>
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. submit 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="image" alt="Submit" src="login.png">
</form>
</body>
</html>
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 password 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="Password" name="password"><br>
</form>
</body>
</html>
radio Used to define a radio button and select a single value out of multiple. red blue green 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio"> Red <br>
<input type="radio"> Blue <br>
<input type="radio">Green <br>
</form>
</body>
</html>
reset Used to define a button to reset the form values to its defaults. reset 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="reset" value="Reset">
</form>
</body>
</html>
submit Used to define a submit button for the form. HTML Form Input Type - submit 2 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="submit" value="Submit">
</form>
</body>
</html>
text Used to define a text field in the form. text 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="text"><br>
</form>
</body>
</html>

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 - color 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="color" name="downclick" value="#f5f5dc">
</form>
</body>
</html>
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. datetime-local 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="datetime-local">
</form>
</body>
</html>
email Used to define a text field for email which has all the predefined validations done for checking an email. email 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="email">
</form>
</body>
</html>
date Used to define a date picker for the HTML form. HTML Form Input Type - date 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="date">
</form>
</body>
</html>
number Used to input numbers in the HTML form by displaying a spinner and adding default validation when used in supported browsers. number 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="number">
</form>
</body>
</html>
range Used to define a range in the HTML form. HTML Form Input Type - range 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="range">
</form>
</body>
</html>
search Used to define single-line text fields for entering search strings. search 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="search">
</form>
</body>
</html>
tel Used to define a telephone entering field within an HTML form. HTML Form Input Type - tel 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</form>
</body>
</html>
time Used to define a field for entering time in HTML form HTML Form Input Type - time 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="time">
</form>
</body>
</html>
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 - url 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="url" placeholder="http://example.com">
</form>
</body>
</html>
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 - week 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="week">
</form>
</body>
</html>
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 - datetime 
<!DOCTYPE html>
<html>
<body>
<form>
<input type="datetime">
</form>
</body>
</html>

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.

Recommended Articles

This is a guide to HTML Form Input Type. Here we discuss the types of “input” available in HTML and HTML 5 along with the attributes. You may also have a look at the following articles to learn more –

  1. HTML Picture Tag
  2. HTML Padding
  3. THead Tag in HTML
  4. HTML Display Block
quiz