# Html Input Types

The HTML input types are used in Form. There are number of HTML input types in HTML language.

# Input Type Text

In input type the text you have to write text.

**Syntax:**

&lt;input type="text" id="username" name="username"&gt;

## Input Type Password

It defines a password field

**Syntax:**

&lt;input type="password" id="pwd" name="pwd"&gt;

## Input Type Submit

It defines a button for submitting form data to a form handler.

**Syntax:**

&lt;input type="submit" value="Submit"&gt;

## Input Type Reset

It defines a reset button that will reset all form values to their default values.

**Syntax:**

&lt;input type="reset"&gt;

## Input Type Radio

It defines a radio button. You have to select only one choice.

**Syntax:**

&lt;input type="radio" id="html" name="fav\_language" value="HTML"&gt;

## Input Type Checkbox

It defines a checkbox. You have to select one or more options.

**Syntax:**

&lt;input type="checkbox" id="vehicle" name="vehicle" value="Bike"&gt;

## Input Type Button

It defines a button.

**Syntax:**

&lt;input type="button" onclick="alert('Hello World!')" value="Click Me!"&gt;

## Input Type Color

It contain color and a color picker show up in the input field.

**Syntax:**

&lt;input type="color" id="favcolor" name="favcolor"&gt;

## Input Type Date

It contain date and it display the date picker in input field. You can also use the `min` and `max` attributes to add restrictions to dates.

**Syntax:**

&lt;input type="date" id="birthday" name="birthday"&gt;

## Input Type Email

It contains an email address.

**Syntax:**

&lt;input type="email" id="email" name="email"&gt;

## Input Type Image

It display the image and the image specified in the src attribute.

**Syntax:**

&lt;input type="image" src="img\_submit.gif" alt="Submit" width="48" height="48"&gt;

## Input Type File

It defines a file select field and a browse button for file uploads.

**Syntax:**

&lt;input type="file" id="myfile" name="myfile"&gt;

## Input Type Hidden

It defines input field hidden

**Syntax:**

&lt;input type="hidden" id="custId" name="custId" value="3487"&gt;

**Example:**

<iframe height="300" style="width:100%" src="https://codepen.io/Ayasha7/embed/ZEMXqrW?default-tab=html">
  See the Pen <a href="https://codepen.io/Ayasha7/pen/ZEMXqrW">
  input types</a> by Ayasha (<a href="https://codepen.io/Ayasha7">@Ayasha7</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>
