---
title: "Input Types in HTML5"  
description: "HTML5 introduce 13 new Input type values for the type attribute for HTML input element. By using new input type values we can create more attractive p"  
author: "Anonymous User"  
published: 2011-07-19  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/572/input-types-in-html5  
category: "html5"  
tags: ["html5"]  
reading_time: 2 minutes  

---

# Input Types in HTML5

[HTML5](https://www.mindstick.com/articles/1535/offline-add-edit-delete-data-in-html5-indexeddb) introduce 13 new Input type values for the type [attribute](https://www.mindstick.com/blog/61/ado-dot-net-object-model-and-attributes) for HTML <input> element. By using new input type values we can create more attractive page, better input [control](https://yourviews.mindstick.com/view/83439/bipartisan-gun-control-bill-passed-in-us-after-decades) and can [validate](https://www.mindstick.com/forum/1490/what-is-better-solution-for-validate-form-textboxs-value) to input type values. Most of the [browser](https://www.mindstick.com/articles/323165/top-10-fastest-internet-browsers-in-the-world) does not [support](https://yourviews.mindstick.com/view/81072/pakistan-wants-enmity-not-support-from-india-during-coronavirus-pandemic) HTML5 new input types except “**Opera”.**\

##### HTML5 new Input Types:

- color
- number
- time
- month
- email
- [search](https://yourviews.mindstick.com/view/87358/in-search-of-nathuram-godse-a-controversial-legacy)
- url
- date
- week
- [datetime](https://www.mindstick.com/forum/34129/how-to-make-datetime-number-field-editable-in-extjs)
- range
- datetime-local
- range

**Search**: This input type value specify [textbox](https://www.mindstick.com/articles/320/textbox-control-in-vb-dot-net) as a search box.

```
Search <input type="search" name="search" />
```

**Tel,Url and Email**: These input type values represent textbox as a telephone number, Web url and [email address](https://www.mindstick.com/forum/159727/how-can-i-validate-an-email-address-in-javascript) respectively.

```
Telephone <input type="tel" name="tel" />Url <input type="url" name="urlname" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/17a4041f-1186-4ca7-a6c4-9097c15ead10.png)

```
Email <input type="email" name="sendmail" />
```

Date and Time: Six new input types (datetime, datetime-local, date, month week, time) specify with dates and times in one form or another.

```
Datetime<input type="datetime" name="date&time" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/1788dce5-a8c4-435f-bbe6-4c703f78b245.png)

```
Datetime-local<input type="datetime-local" name="localdate&time" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/45634bb8-a2de-4581-9fca-05a98d1490cb.png)

```
Date<input type="date" name="date" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/8ea1e0ca-cbbd-40ba-b49b-65838bfdbbe9.png)

```
Month <input type="month" name="mnth" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/c30c03e1-01f2-4409-93e6-74a1f9894644.png)

```
Week  <input type="week" name="wk" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/ebb5035e-c369-47df-8e0b-d0129dbd8a2a.png)

```
Time <input type="time" name="tm" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/84663c72-dd41-4bd9-9747-94c791102666.png)

Numerical input types: two new input types (number and range) specify entered value should be numeric and given range respectively.

```
Number <input type="number" name="num" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/78f90164-9296-4665-b798-c54115860cba.png)

```
Range<input type="range" name="points" min="1" max="10" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/d6225319-fff3-4ece-9a6f-6ff4361e1286.png)

Color input type: The color type is used for input fields that should contain a color.

```
Color <input type="color" name="clr" />
```

![Input Types in HTML5](https://www.mindstick.com/mindstickarticle/60cc436f-f9ec-48b3-9313-6ea5bf2d3610/images/dbbbadd6-ba75-49c2-a593-26deac630720.png)

---

Original Source: https://www.mindstick.com/articles/572/input-types-in-html5

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.