---
# System prepended metadata

title: HTML5 Input Types

---

# HTML5 Input Types 


## **1. *color:***
Color picker control , you can choose any color easily.
 ``` html
 <input type="color" name="theme" value="#0000FF">
 ```
![](https://i.imgur.com/nnjth5b.png)
 ---
## **2. *range***
Slider controls to pick a number.
``` html
<input type="range" name="choose" min="0" max="100" step="5" value="0">
```
![](https://i.imgur.com/AcM6rg2.png)
---
## **3. *number***
Controls for entering numbers. 
``` html
<input type="number" min="0" max="30" step="3">
```
![](https://i.imgur.com/rO7zrRD.png)
---
## **4. *email***
The user is required to type a valid email address into the field.
``` html
<input type="email" name="email">
```
![](https://i.imgur.com/ShlsKGq.png)
---
## **5. *url***
A special type of field for entering URLs. 
``` html
<input type="url" name="email">
```
![](https://i.imgur.com/d0WRuIr.png)
---
## **6. *search***
To create search boxes on pages and apps.
``` html
<input type="search" name="search">
```
![](https://i.imgur.com/qiozJWl.png)
---
## **7. *tel***
A special field for filling in phone numbers.
``` html
<input type="tel" name="Telphone" placeholder="+ 966 22 00">
```
![](https://i.imgur.com/K8mw8eD.png)
---
## **8. *time***
To display and pick a time value.
``` html
<input type="time" name="timing">
```
![](https://i.imgur.com/w9DgsXH.png)
---
## **9. *date***
To display and pick a date value.
``` html
<input type="date" name="date">
```
![](https://i.imgur.com/iQTT93f.png)
---
## **10. *datetime-local***
To display and pick a date with time with no specific time zone information.
``` html
<input type="datetime-local" name="datetime-local">
```
![](https://i.imgur.com/1veEKco.png)
---
## **11. *week***
To display and pick a week number and its year.
``` html
<input type="week" name="week">
```
![](https://i.imgur.com/8x8Krsj.png)
---
## **12. *month***
To display and pick a month with a year.
``` html
<input type="month" name="month">
```
![](https://i.imgur.com/zfcTtGG.png)
--- 
>>>>>#### MOHAMMED DAHALAN © 14/10/2021 
