---
# System prepended metadata

title: HTML Input Types

---

### Name: **Abedalrahman Shamia**
### *Session 03* *Task Oct-14-2021*

---

# HTML Input Types
Here are the different input types you can use in HTML:


### [**Button**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button)

It defines a button

* ##### Example : 

```htmlembedded=
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
```


---
### [**Checkbox**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)

It defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.
 
* ##### Example: 
 
```htmlembedded=
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>

```


---

###	[**File**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)

It defines a file-select field and a "Browse" button for file uploads.
 
* ##### Example: 
 
```htmlembedded=
 <input type="file" id="myfile" name="myfile">
```


---

### [**Date**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date)

It allows the user to select a date from a drop-down calendar.
 
* ##### Example: 
 
```htmlembedded=
<input type="date" id="date" /> 
```


---

###  [**Image**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image)	

It creates graphical submit buttons, i.e. submit buttons that take the form of an image rather than text.
 
* ##### Example: 
 
```htmlembedded=
<input type="image" id="image" alt="Login"
       src="/media/examples/login-button.png">

```


---

### 	[**Password**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password)

It defines a password field.
 
* ##### Example: 
 
```htmlembedded=
 <input type="password" id="pwd" name="pwd">
```


---

### 	[**Reset**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset)

It defines a reset button that will reset all form values to their default values.
 
* ##### Example: 
 
```htmlembedded=
<input type="reset">
```


---

### 	[**Submit**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit)

It defines a button for submitting form data to a form-handler.
 
* ##### Example: 
 
```htmlembedded=
 <input type="submit" value="Submit">
```


---

###  [**Text**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text)
	

It defines a single-line text input field.

* ##### Example: 
 
```htmlembedded=
 <label for="lname">Last name:</label>
 <input type="text" id="lname" name="lname">
```


---
### 	[**Tel**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel)

It  is used for input fields that should contain a telephone number.
 
* ##### Example: 
 
```htmlembedded=
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
```


---


### 	[**Hidden**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden)

It defines a hidden input field (not visible to a user).

A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.
 
* ##### Example: 
 
```htmlembedded=
<input type="hidden" id="custId" name="custId" value="3487">
```


---
### [**DateTime**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime)

It allows the user to select a date and time along with time zone
 
* ##### Example: 
 
```htmlembedded=
<input type="datetime" id="datetime" /> 
```


---

### 	[**Time**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)

It allows the user to enter time.
 
* ##### Example: 
 
```htmlembedded=
<input type="time" id="time" /> 
```


---

###  [**DateTime-local**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local)

It allows the user to select a local date and time
 
* ##### Example: 
 
```htmlembedded=
<input type="datetime-local" id="datetime-local" /> 
```


---

###  [**Week**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week)

It allows the user to select a week and year from a drop-down 
calendar.
 
* ##### Example: 
 
```htmlembedded=
<input type="week" id="week" /> 
```


---

### [**Month** ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month)

It allows the user to select a month and year from a drop-down calendar.
 
* ##### Example: 
 
```htmlembedded=
<input type="month" id="month" /> 
```


---
### 	[**Email**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email)

It allows the user to enter an e-mail address.
 
* ##### Example: 
 
```htmlembedded=
<input type="email" id="email" placeholder="email address"  required/>
```


---

### 	[**URL**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url)

It allows the user to enter a website URL
 
* ##### Example: 
 
```htmlembedded=
<input type="url" id="url" pattern="https?://.+"  required/>
```


---

### 	[**Search**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search)

It's a text field for entering a search string
 
* ##### Example: 
 
```htmlembedded=
<input type="search" id="search" /> 
```


---

###  [**Range**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

It allows the user to range the value with the slider.
 
* ##### Example: 
 
```htmlembedded=
<input type="range" id="range" class="custom-range"/>  

```


---

###  [**Number**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number)

It allows the user to enter a numeric value with the increase and decrease arrow.
 
* ##### Example: 
 
```htmlembedded=
<input type="number" id="number" />  
```


---

### [**Color**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color)

It allows the user to select a color from the color picker

 
* ##### Example: 
 
```htmlembedded=
<input type="color" id="color"/>  
```


---

###	[ **Radio**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)

It defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices.
 
* ##### Example: 
 
```htmlembedded=
 <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label>
```


---