HTML Input Types

In this tutorial, you will learn HTML Input types, how they help to capture correct data as you required. HTML Language brought up new values of the type attributes that will help us to capture complete and accurate data easily. You can use them in input fields to capture the required data as you need. So, let’s take a look at the HTML input types.

Here, you will see complete HTML Input Types:

Checkbox

The HTML input types checkbox is used to describe a checkbox field. The checkbox appears as a square box that is ticked when it is activated. It allows the user to select the option at a limited choice. So, let’s take a look at an example:

<form action="action.php">
  <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="submit" value="Submit">
</form> 

Button

This Input type is used to describe a clickable submit button in a web document, that helps the user to submit their all input in the fields. However, It is normally used to activate a script. So, Let’s take a look at an example:

<input type="button" onclick="alert('Welcome to softcodeon!')" value="Click Me!">

Color

The HTML Input types color is used to define a color picker in a document. The value should be a 7 character hexadecimal notation. It has a black color code #000000 as a default. So, Let’s take a look at an example:

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

Email

The input type email defines to describe a field for an email address. The input email id emails automatically which the user entered. It will check the email is in the right format or incorrect. So, Let’s take a look at an example:

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form>

Password

This type of input is used to state the password field of the input element. The password should be served over the https pages and it includes the sensitive information of the user. So, Let’s take a look at an example:

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

Radio

The radio HTML input types define as a radio button. Radio Button defines to suppose the user to select multiple-choice from given options. The radio button controls the input from the input form. So, Let’s take a look at an example:

<form action="action.php">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="submit" value="Submit">
</form> 

Search

This input type defines to search of the data from a given website or web page with a string. So, Let’s take a look at an example:

<form>
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

Submit

The HTML input types define to submit the page form. It helps the user to submit their form easily. So, Let’s take a look at an example:

<form action="action.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>

tel

It defines to capture the telephone number from the user. So, Let’s take a look at an example:

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

Text

It defines a text in the input field. The default value of the text type is 20 characters. So, Let’s take a look at an example:

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

URL

Its URL type helps the input form to capture the right URL from the input fields. So, Let’s take a look at an example:

<form>
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Time

The time input type defines to entering time control. So, Let’s take a look at an example:

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form>