HTML input types with examples
Tags: webdev, css, learning, html
Published: 2024-06-22 11:00:20

## **HTML Input Types**
Here are the different input types you can use in HTML:
`<input type="button">`
`<input type="checkbox">`
`<input type="color">`
`<input type="date">`
`<input type="datetime-local">`
`<input type="email">`
`<input type="file">`
`<input type="hidden">`
`<input type="image">`
`<input type="month">`
`<input type="number">`
`<input type="password">`
`<input type="radio">`
`<input type="range">`
`<input type="reset">`
`<input type="search">`
`<input type="submit">`
`<input type="tel">`
`<input type="text">`
`<input type="time">`
`<input type="url">`
`<input type="week">`
## **Input Type Text**
`<input type="text">` defines a single-line text input field:
## **Example**
```HTML
<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>
```
## **Input Type Password**
`<input type="password">` defines a password field:
## **Example**
```HTML
<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>
```
## **Input Type Submit**
`<input type="submit">` defines a button for submitting form data to a form-handler.
The form-handler is specified in the form's action attribute
## **Example**
```HTML
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>
```
## **Input Type Reset**
`<input type="reset">` defines a reset button that will reset all form values to their default values
## **Example**
```HTML
<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset" value="Reset">
</form>
```
## **Input Type Radio**
`<input type="radio">` defines a radio button.
## **Example**
```HTML
<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>
```
## **Input Type Checkbox**
`<input type="checkbox">` defines a checkbox.
## **Example**
```HTML
<form>
  <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>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>
```
## **Input Type Button**
`<input type="button">` defines a button
## **Example**
```HTML
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
```
## **Input Type Color**
The `<input type="color">` is used for input fields that should contain a color.
## **Example**
```HTML
<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>
```
## **Input Type Date**
The `<input type="date">` is used for input fields that should contain a date.
## **Example**
```HTML
<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form>
```
## **Input Type Email**
The `<input type="email">` is used for input fields that should contain an e-mail address.
## **Example**
```HTML
<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>
```
## **Input Type Image**
The `<input type="image">` defines an image as a submit button.
## **Example**
```HTML
<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
```
## **Input Type File**
The `<input type="file">` defines a file-select field and a "Browse" button for file uploads.
## **Example**
```HTML
<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form>
```
## **Input Type Hidden**
The `<input type="hidden">` defines a hidden input field
## **Example**
```HTML
<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Submit">
</form>
```
## **Input Type Month**
The `<input type="month">` allows the user to select a month and year.
## **Example**
```HTML
<form>
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
</form>
```
## **Input Type Number**
The `<input type="number">` defines a numeric input field.
## **Example**
```HTML
<form>
  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
```
## **Input Type Search**
The `<input type="search">` is used for search fields
## **Example**
```HTML
<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>
```
## **Input Type Tel**
The `<input type="tel">` is used for input fields that should contain a telephone number.
## **Example**
```HTML
<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
```
## **Input Type Time**
The `<input type="time">` allows the user to select a time (no time zone).
## **Example**
```HTML
<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>
```
## **Input Type Url**
The `<input type="url">` is used for input fields that should contain a URL address.
## **Example**
```HTML
<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>
```