### 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 :

<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:

  <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:

 <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:

<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:

<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:

 <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:

<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:

 <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:

 <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:

  <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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

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

---