Disclaimer: TubeMint is fully funded by its readers, we recommend hightly rated affiliate products and services and when you buy them through our links, we get commission at no extra cost to you. Thanks for you support!

HTML 5 All Input Data Types

In this post you will learn all HTML 5 <input> data types, all you need to know. I am going to write each html input data type code and attach screenshot for visual understanding. I would suggest that you fire up your favorite text editor and wed browser and code along me.

Let’s dive in…

Color

HTML 5 Input color data type let users pick their own choice of color.

<form>

     <fieldset>
	   <legend>Color</legend>
	   <label for="color">Choose Color:</label>  
	   <input type="color" name="color" id="">
	</fieldset> 
</form>

The above code should look like the color image below in your preferred browser.

html 5 input color

Button

HTML 5 input button data types allow users to select the button of their choice.

	<fieldset>
	       <legend>BUTTON</legend>
	       <input type="button"  value="Click!">
	   </fieldset> 

The above code should look like the button image below in your preferred browser.

html 5 input  button data type

Checkbox

HTML 5 Input Checkbox data type users pick their own choice of checkbox.

	<fieldset>				
        	 <legend>CHECKBOX</legend>

  		 <input type="checkbox" name="Tea">
  		 <label for="">Tea</label>

  		 <input type="checkbox" name="Breakfast">
  		 <label for="">Breakfast</label>

  		 <input type="checkbox" name="Dinner">
  		 <label for="">dinner</label>
	 </fieldset>

The above code should look like the checkbox image below in your preferred browser.You can choose few option or all.

html 5 checkbox data type

Radio Button

HTML 5 Input Radio data type users pick their own choice of Radio Button.

	<fieldset>
		<legend>RADIO</legend>

		<input type="radio" name="gender" value="male">
		<label for="male">Male</label>

		<input type="radio" name="gender" value="female">
		<label for="female">Female</label>

		<input type="radio" name="gender" value="other">
		<label for="other">Other</label>
		</fieldset> 
			

The above code should look like the radio image below in your preferred browser.But you can choose only one option.

html 5 input radio data type

Text

HTML 5 Input Text data type let us users fill in the blanks in the text.

	<fieldset>				
		<legend>Text</legend>

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



			</fieldset>

In above code should look like the text image below in your preferred browser. In this code users fill in the blanks in the text as per their interest.

html 5 input text data type

Password

In HTML 5 input password data type we enter our password.

	<fieldset>
		<legend>PASSWORD</legend>

		 <label for="username">Username:</label><br>
  		 <input type="text" id="username" name="username"><br>
  		 <label for="password">Password:</label><br>
  		 <input type="password" id="pwd" name="password"><br><br>
 
	  </fieldset>

In the code above the image of the password below is showing in your favorite browser. In this code users enter their password

html 5 input password data type

Date

In HTML 5 input date data fill users their date of birth.

 <fieldset>
	<legend>DATE</legend>

	<label for="birthday">Birthday:</label>
        <input type="date" id="birthday" name="birthday">
   </fieldset>

In above code should look like the date of birth image below in your preferred browser. In this code users enter their date of birth.

html 5 input date data type

Submit

HTML 5 Input submit data type users submit their forms from.

 <fieldset>
 	<legend>SUBMIT</legend>

 	<label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="Avantika"><br>
  	<label for="lname">Last name:</label><br>
  	<input type="text" id="lname" name="lname" value="Shahi"><br><br>
  	<input type="submit" value="Submit">
    </fieldset

In above code should look like the submit image below in your preferred browser. In this code users submit the form.

html 5 input submit data type

Reset

HTML 5 Input Reset data type if you change the input values and then click the Reset button the form-data will be reset to the default values.

 <fieldset>
 	<legend>SUBMIT</legend>

 	<label for="fname">First name:</label><br>
  	<input type="text" id="fname" name="fname" value="Avantika"><br>
  	<label for="lname">Last name:</label><br>
  	<input type="text" id="lname" name="lname" value="Shahi"><br><br>
  	<input type="submit" value="Submit">
        <input type="reset">
     </fieldset>

In the above code look like the Reset image below in your preferred browser.

html 5 input reset data type

Datetime-local

in html 5 Input datetime-local data type specifies a date and time input field.

 <fieldset>
 	<legend>DATETIME-LOCAL</legend>
 	<label for="birthdaytime">Birthday (date and time):</label>
        <input type="datetime-local" id="birthdaytime" name="birthdaytime">
    </fieldset>

In the above code look like the datetime-local image below in your preferred browser.

html 5 input datetime-local data type

Email

HTML 5 Input email data type users fill in their email.

 <fieldset>
 	<legend>EMAIL</legend>
 	<label for="email">Enter your email:</label>
        <input type="email" id="email" name="email" value="[email protected]">
    </fieldset>

In the above code look like the email image below in your preferred browser.

html 5 input email data type

FILE

HTML 5 input file data type user can open their file with this code.

<fieldset>
 	<legend>FILE</legend>
        <label for="myfile">Select a file:</label>
        <input type="file" id="myfile" name="myfile"><br><br>
   </fieldset>

In the above code look like the file image below in your preferred browser.

html 5 input file data type

Month

HTML 5 Input month data type users fill the month in it.

 <fieldset>
 	<legend>MONTH</legend>
 	<label for="bdaymonth">Birthday (month and year):</label>
        <input type="month" id="bdaymonth" name="bdaymon">
    </fieldset>

In the above code look like the month image below in your preferred browser.

html 5 input month data type

Number

HTML 5 Input number data type users fill the number in it.

<fieldset>
      <legend>NUMBER</legend>
      <label for="quantity">Quantity (between 1 and 5):</label>
      <input type="number" id="quantity" name="quantity" min="1">
   </fieldset>

In the above code look like the number image below in your preferred browse.

html 5 input number data type

Range

HTML 5 Input range data type The input type “range” can be displayed as a slider control.

<fieldset>
	<legend>RANGE</legend>
  	<label for="vol">Volume (between 0 and 50):</label>
        <input type="range" id="Volume" name="Volume" min="0" max="50">		
  </fieldset>

In the above code look like the range image below in your preferred browser.

html 5 input range data type

Search

HTML 5 input search data type we can search this tag.

<fieldset>
  	<legend>SEARCH</legend>
  	<label for="gsearch">Search Google:</label>
        <input type="search" id="gsearch" name="gsearch" value="tubemint.com">
    </fieldset>

In the above code look like the search image below your preferred browser.

html 5 input search data type

Tel

HTML 5 Input Tel Data Type Tel here means Telephone.

<fieldset>
    <legend>TEL</legend>
    <label for="phone">Enter a phone number:</label><br><br>
   <input type="tel" id="phone" name="phone" placeholder="123-45-678"pattern="[0-9]{3}-[0-9]{2}-[0-9] 
          {3}" required value="123-4356-345"><br><br>
  </fieldset>

In the above code look like the tel image below in your preferred browser.

html 5 input tel data type

Time

HTML 5 input time data types can show users time.

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

In the above code look like the time image below in your preferred browser.

html 5 input time data type

Url

HTML 5 Input url data type Tel here means Uniform Resource Locator.

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

In the above code look like the url image below in your preferred browser. A URL is the address of a specific webpage or file on the Internet. … http:// – the URL prefix, which specifies the protocol used to access the location.

html 5 input url data type

Week

HTML 5 Input week data type users fill the week in it.

<fieldset>
     <legend>WEEK</legend>
     <label for="week">Select a week:</label>
     <input type="week" id="week" name="week">
 </fieldset>

In the above code look like the week image below in your preferred browser.

html 5 input week data type



Leave a Reply