HTML Input Types

❮ Prev Next ❯

HTML input types are used to define the type of data that is expected to be entered by the user in an input field. There are various input types available in HTML, each with its own specific purpose.

Text Input:

The inputfield is one of the most widely used form elements. It's also a very versatile element, and it can completely change behavior based on the type attribute.

The default behavior is to be a single-line text input control:

<input />

Equivalent to using:

<input type="text"/>

As with all the other fields that follow, you need to give the field a name in order for its content to be sent to the server when the form is submitted:

The default behavior is to be a single-line text input control:

<input />

Equivalent to using:

<input type="text"/>

As with all the other fields that follow, you need to give the field a name in order for its content to be sent to the server when the form is submitted:

<input type="text" name="username"/>

The placeholder attribute is used to have some text showing up, in light gray, when the field is empty. Useful to add a hint to the user for what to type in:

<input type="text" placeholder="Your username" name="name">

Email:

The emailinput type is used for allowing users to input an email address. When a user types in an email address, the browser will validate that the input is in the correct email format (i.e. contains "@" and a valid domain).

This can help prevent users from accidentally mistyping their email address. Here's an example of how to use the email input type:

<label for="email">Email:</label>
<input type="email" placeholder="Your Email" name="email">

In this example, a label is associated with the email input using the for attribute. The input itself has a type attribute set to email.

The id attribute is used to uniquely identify the input, and the name attribute is used to specify the name of the input field when the form is submitted.

Password:

The Passwordis used to create a single-line password input field. The text entered in this field is masked to keep it hidden from view.

<input type="password" placeholder="Your Password" name="password">

Date:

The Datetype is used to allow the user to select a date from a calendar. The format of the date is typically controlled by the browser's locale settings.

<input type="date" name="birthdate">

Month:

The Monthtype is used to allow the user to select a month and year from a drop-down list.

<input type="date" name="expiration">

Number:

The Numbertype is used to allow the user to enter a numeric value. The browser may provide controls to increment or decrement the value.

<input type="number" name="quantity" min="1" max="10">

Range:

The Rangetype is used to allow the user to select a value from a range of values.

<input type="range" name="quantity" min="1" max="10" value="50">

Time:

The Timetype is used to allow the user to select a time.

<input type="time" name="meeting-time" min="09:00" max="18:00" required>

Search:

The Searchtype is used to allow the user to enter a search query.

<input type="search" name="search"/>

Tel:

The Tel type is used to allow the user to enter a telephone number.

<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>

Color:

The Colortype allows the user to select a color using a color picker. The selected color is then returned as a string in the form of a hexadecimal value.

<input type="color" name="favcolor" value="#000000"/>

The colorinput is given a name of "favcolor".The initial color value is set to black (#000000).

When the user clicks on the input field, a color picker is displayed allowing them to select a color of their choice.

Once a color is selected, the value of the input field is updated with the selected color value.

Checkbox:

The checkboxinput element with type attribute set to "checkbox" is used to create a checkbox. Users can select one or more checkboxes from a group.

<input type="checkbox" id="bike" name="hobbies" value="bike">
<label for="bike">Bike</label>
<input type="checkbox" id="car" name="hobbies" value="car">
<labelfor="car">Car</label>

Radio Button:

The Radio Buttonis used to create a set of radio buttons, where only one option can be selected at a time.

<input type="radio" id="male" name="gender" value="male">
<label for="bike">Male</label>
<input type="radio" id="female" name="gender" value="female">
<labelfor="car">Female</label>

Submit:

The submitis used to create a button that submits the form data to the server.

<input type="submit" value="Submit"/>

Reset:

The resetis used to create a button that resets the form data to its initial state.

<input type="reset" value="Reset"/>

File:

The fileis used to create a field that allows the user to upload a file. state.

<input type="file" name="myFile"/>

Hidden:

The hiddenis used to create a hidden field that is not visible to the user. It is often used to store data that is needed by the server but does not need to be displayed to the user.

<input type="hidden" name="userID" value="123"/>

URL:

The type="url"field is used to enter a URL.

<input type="url" name="website"/>

You can validate it using the pattern attribute:

<input type="url" name="website" pattern=""https://.*"/>

Select Box

The Selectelement is used to create a dropdown list. Users can select one option from the list.

<label for="Country">Select Country:</label>
<select for="country">
  <option value="">Choose Country</option>
  <option value="usa">USA</option>
  <option value="uk">Uk</option>
  <option value="canada">Canada</option>
  <option value="nigeria">Nigeria</option>
  <option value="india">India</option>
  <option value="china">China</option>
</select>

Textarea:

The Textareaelement is used to create a multi-line text input field. Users can enter any amount of text data into this field.

<label for="comments">Comments:</label>
<textarea id="comments" placeholder="write comments here"></textarea>

You can set the dimensions using CSS, but also using the rowsand cols attributes:

<label for="comments">Comments:</label>
<textarea id="comments" placeholder="write comments here" rows="20" cols="10"></textarea>

As with the other form tags, the namename attribute determines the name in the data sent to the server:

<label for="comments">Comments:</label>
<textarea id="comments" name="article" placeholder="write comments here" rows="20" cols="10"></textarea>

Here are some of the most commonly used HTML form elements:

buttonUsed for creating clickable buttons to submit a form or trigger an action.
labelUsed for adding text labels to form elements.
fieldsetUsed to group related form elements together and create a visual grouping.
legendUsed to provide a description or title for a <fieldset>

Example

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Title of the Document</title>
</head>
<body>
  <h1>HTML Form</h1>
  <form action="/submit-form" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <label for="number">Number:</label>
    <input type="number" id="number" name="number">
    <label for="date">Date:</label>
    <input type="date" id="date" name="date">
    <label for="color">Color:</label>
    <input type="color" id="color" name="color">
    <label for="gender">Gender:</label>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male:</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female:</label>
    <label for="age">Age:</label>
    <select for="age">
      <option value="18-24">18-24</option>
      <option value="25-34">25-34</option>
      <option value="35-44">35-44</option>
      <option value="40+">40+</option>
    </select>
    <label for="comments">Comments:</label>
    <textarea id="comments" placeholder="write comments here"></textarea>
    <input type="submit" value="Submit">
  </form>
  </body>
</html>

Try it Yourself »

Note: its option to have back slash / at end of input tag, but if you want to add make sure to be consinstency.

These are some of the commonly used HTML form elements. There are many more form elements that can be used to create different types of input fields. now let learn about Form Input Types in the next chapter.