HTML Form Input Types

In HTML <input type=" "> is an important element of HTML form. The "type" attribute of input element can be various types, which defines information field. Such as <input type="text" name="name"> gives a text box.

Following is a list of all types of <input> element of HTML.

type=" "	Description
text	Defines a one-line text input field
password	Defines a one-line password input field
submit	Defines a submit button to submit the form to server
reset	Defines a reset button to reset all values in the form.
radio	Defines a radio button which allows select one option.
checkbox	Defines checkboxes which allow select multiple options form.
button	Defines a simple push button, which can be programmed to perform a task on an event.
file	Defines to select the file from device storage.
image	Defines a graphical submit button.

---

HTML5 added new types on <input> element. Following is the list of types of elements of HTML5

type=" "	Description
color	Defines an input field with a specific color.
date	Defines an input field for selection of date.
datetime-local	Defines an input field for entering a date without time zone.
email	Defines an input field for entering an email address.
month	Defines a control with month and year, without time zone.
number	Defines an input field to enter a number.
url	Defines a field for entering URL
week	Defines a field to enter the date with week-year, without time zone.
search	Defines a single line text field for entering a search string.
tel	Defines an input field for entering the telephone number.

---

Following is the description about types of <input> element with examples.

1. <input type="text">:

<input> element of type "text" are used to define a single-line input text field.

Example:

1. <form>  
2.     <label>Enter first name</label><br>  
3.     <input type="text" name="firstname"><br>  
4.     <label>Enter last name</label><br>  
5.     <input type="text" name="lastname"><br>  
6.     <p><strong>Note:</strong>The default maximum cahracter lenght is 20.</p>  
7. </form>  

Output:

Input "text" type:

The "text"field defines a sinlge line input text field.

Enter first name

Enter last name

Note:The default maximum cahracter lenght is 20.

---

2. <input type="password">:

The <input> element of type "password" allow a user to enter the password securely in a webpage. The entered text in password filed converted into "*" or ".", so that it cannot be read by another user.

Example:

1. <form>  
2.     <label>Enter User name</label><br>  
3.     <input type="text" name="firstname"><br>  
4.     <label>Enter Password</label><br>  
5.     <input type="Password" name="password"><br>  
6.     <br><input type="submit" value="submit">  
7. </form>  

Output:

Input "password" type:

The "password"field defines a sinlge line input password field to enter the password securely.

Enter User name

Enter Password

---

3. <input type="submit">:

The <input> element of type "submit" defines a submit button to submit the form to the server when the "click" event occurs.

Example:

1. <form action="https://www.javatpoint.com/html-tutorial">  
2.     <label>Enter User name</label><br>  
3.     <input type="text" name="firstname"><br>  
4.     <label>Enter Password</label><br>  
5.     <input type="Password" name="password"><br>  
6.     <br><input type="submit" value="submit">  
7. </form>  

Output:

Input "submit" type:

Enter User name

Enter Password

After clicking on submit button, this will submit the form to server and will redirect the page to action value.We will learn about "action" attribute in later chapters

---

4. <input type="reset">:

The <input> type "reset" is also defined as a button but when the user performs a click event, it by default reset the all inputted values.

Example:

1. <form>  
2.     <label>User id: </label>  
3.      <input type="text" name="user-id" value="user">  
4.               <label>Password: </label>  
5.      <input type="password" name="pass" value="pass"><br><br>   
6.      <input type="submit" value="login">  
7.       <input type="reset" value="Reset">  
8. </form>  

Output:

Input "reset" type:

User id:  Password: 

 

Try to change the input values of user id and password, then when you click on reset, it will reset input fields with default values.

---

5. <input type="radio">:

The <input> type "radio" defines the radio buttons, which allow choosing an option between a set of related options. At a time only one radio button option can be selected at a time.

Example:

1. <form>  
2.   <p>Kindly Select your favorite color</p>  
3.   <input type="radio" name="color" value="red"> Red <br>  
4.   <input type="radio" name="color" value="blue"> blue <br>  
5.   <input type="radio" name="color" value="green">green <br>  
6.   <input type="radio" name="color" value="pink">pink <br>  
7.   <input type="submit" value="submit">  
8. </form>  

Output:

Input "radio" type

Kindly Select your favorite color

 Red
 blue
green
pink

---

6. <input type="checkbox">:

The <input> type "checkbox" are displayed as square boxes which can be checked or unchecked to select the choices from the given options.

Note: The "radio" buttons are similar to checkboxes, but there is an important difference between both types: radio buttons allow the user to select only one option at a time, whereas checkbox allows a user to select zero to multiple options at a time.

Example:

1. <form>   
2.       <label>Enter your Name:</label>  
3.       <input type="text" name="name">  
4.       <p>Kindly Select your favourite sports</p>  
5.       <input type="checkbox" name="sport1" value="cricket">Cricket<br>  
6.       <input type="checkbox" name="sport2" value="tennis">Tennis<br>  
7.       <input type="checkbox" name="sport3" value="football">Football<br>  
8.       <input type="checkbox" name="sport4" value="baseball">Baseball<br>  
9.       <input type="checkbox" name="sport5" value="badminton">Badminton<br><br>  
10.       <input type="submit" value="submit">  
11.   </form>  

Output:

Input "checkbox" type

Registration Form

Enter your Name: 

Kindly Select your favorite sports

Cricket
Tennis
Football
Baseball
Badminton

---

7. <input type="button">:

The <input> type "button" defines a simple push button, which can be programmed to control a functionally on any event such as, click event.

Note: It mainly works with JavaScript.

Example:

1. <form>  
2.      <input type="button" value="Clcik me " onclick="alert('you are learning HTML')">  
3. </form>  

Output:

Input "button" type.

Click the button to see the result:

Note: In the above example we have used the "alert" of JS, which you will learn in our JS tutorial. It is used to show a pop window.

---

8. <input type="file">:

The <input> element with type "file" is used to select one or more files from user device storage. Once you select the file, and after submission, this file can be uploaded to the server with the help of JS code and file API.

Example:

1. <form>  
2.      <label>Select file to upload:</label>  
3.      <input type="file" name="newfile">  
4.      <input type="submit" value="submit">  
5. </form>  

Output:

Input "file" type.

We can choose any type of file until we do not specify it! The selected file will appear at next to "choose file" option

Select file to upload:  

9. <input type="image">:

The <input> type "image" is used to represent a submit button in the form of image.

Example:

1. <!DOCTYPE html>  
2. <html>  
3. <body>  
4. <h2>Input "image" type.</h2>  
5. <p>We can create an image as submit button</p>  
6.   <form>  
7.     <label>User id:</label><br>  
8.      <input type="text" name="name"><br><br>  
9.      <input type="image" alt="Submit" src="login.png"  width="100px">  
10.   </form>  
11.   
12.  </body>  
13. </html>  

---

HTML5 newly added <input> types element

1. <input type="color">:

The <input> type "color" is used to define an input field which contains a colour. It allows a user to specify the colour by the visual colour interface on a browser.

Note: The "color" type only supports color value in hexadecimal format, and the default value is #000000 (black).

Example:

1. <form>  
2.     Pick your Favorite color: <br><br>  
3.     <input type="color" name="upclick" value="#a52a2a"> Upclick<br><br>  
4.     <input type="color" name="downclick" value="#f5f5dc"> Downclick  
5. </form>  

Output:

Input "color" types:

Pick your Favorite color:

 Up-click

 Down-click

Note:The default value of "color" type is #000000 (black). It only supports color value in hexadecimal format.

---

2. <input type="date">:

The <input> element of type "date" generates an input field, which allows a user to input the date in a given format. A user can enter the date by text field or by date picker interface.

Example:

1. <form>  
2.     Select Start and End Date: <br><br>  
3.       <input type="date" name="Startdate"> Start date:<br><br>  
4.       <input type="date" name="Enddate"> End date:<br><br>  
5.      <input type="submit">  
6. </form>  

Output:

Input "date" type

Select Start and End Date:

 Start date:

 End date:

---

3. <input type="datetime-local">:

The <input> element of type "datetime-local" creates input filed which allow a user to select the date as well as local time in the hour and minute without time zone information.

Example:

1. <form>  
2.     <label>  
3.       Select the meeting schedule: <br><br>  
4.       Select date & time: <input type="datetime-local" name="meetingdate"> <br><br>  
5.     </label>  
6.       <input type="submit">  
7. </form>  

Output:

Input "datetime-local" type

Select the meeting schedule:

Select date & time: 

---

4. <input type="email">:

The <input> type "email" creates an input filed which allow a user to enter the e-mail address with pattern validation. The multiple attributes allow a user to enter more than one email address.

Example:

1. <form>  
2.          <label><b>Enter your Email-address</b></label>  
3.         <input type="email" name="email" required>  
4.         <input type="submit">  
5.          <p><strong>Note:</strong>User can also enter multiple email addresses separating by comma or whitespace as following: </p>  
6.          <label><b>Enter multiple Email-addresses</b></label>  
7.          <input type="email" name="email"  multiple>  
8.         <input type="submit">  
9. </form>     

Output:

Input "email" type

Enter your Email-address  

Note:User can also enter multiple email addresses separating by comma or whitespace as following:

Enter multiple Email-addresses  

---

5. <input type="month">:

The <input> type "month" creates an input field which allows a user to easily enter month and year in the format of "MM, YYYY" where MM defines month value, and YYYY defines the year value. New

Example:

1. <form>  
2.     <label>Enter your Birth Month-year: </label>  
3.     <input type="month" name="newMonth">  
4.     <input type="submit">  
5. </form>  

Output:

Input "month" type:

Enter your Birth Month-year:  

---

6. <input type="number">:

The <input> element type number creates input filed which allows a user to enter the numeric value. You can also restrict to enter a minimum and maximum value using min and max attribute.

Example:

1. <form>  
2.     <label>Enter your age: </label>  
3.     <input type="number" name="num" min="50" max="80">  
4.      <input type="submit">  
5. </form>  

Output:

Input "number" type

Enter your age:  

Note:It will allow to enter number in range of 50-80. If you want to enter number other than range, it will show an error.

---

7. <input type="url">:

The <input> element of type "url" creates an input filed which enables user to enter the URL.

Example:

1. <form>  
2.     <label>Enter your website URL: </label>  
3.     <input type="url" name="website" placeholder="http://example.com"><br>  
4.     <input type="submit" value="send data">  
5. </form>  

Output:

Input "url" type

Enter your website URL: 

---

8. <input type="week">:

The <input> type week creates an input field which allows a user to select a week and year form the drop-down calendar without time zone.

Example:

1. <form>  
2.     <label><b>Select your best week of year:</b></label><br><br>  
3.     <input type="week" name="bestweek">  
4.     <input type="submit" value="Send data">  
5.  </form>  

Output:

Input "week" type

Select your best week of year:

 

---

9. <input type="search">:

The <input> type "search" creates an input filed which allows a user to enter a search string. These are functionally symmetrical to the text input type, but may be styled differently.

Example:

1. <form>  
2.     <label>Search here:</label>  
3.     <input type="search" name="q">  
4.     <input type="submit" value="search">  
5. </form>  

Output:

Input "search" type

Search here:  

---

10. <input type="tel">:

The <input> element of type ?tel? creates an input filed to enter the telephone number. The "tel" type does not have default validation such as email, because telephone number pattern can vary worldwide.

Example:

1. <form>  
2.       <label><b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b></label>  
3.       <input type="tel" name="telephone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>  
4.       <input type="submit"><br><br>  
5.    </form>   

Output:

Input "tel" type

Enter your Telephone Number(in format of xxx-xxx-xxxx):  

Note: Here we are using two attributes that are "pattern" and"required" which will allow user to enter the number in given format and it is required to enter the number in input field.