HTML5 Input Type | Lesson 35 HTML Tutorial
HTML5 INPUT TYPES IMAGE

HTML5 Input Type | Lesson 35 HTML Tutorial

In this lesson we will learn the html5 input type which is supported only with html5 just.
html5 input type:
color, date, email. file. month, number, range, search, tel, time, and url.

This Is Visual Explain For The Same Content:

HTML5 Input Type Video

First of all HTML5 support the following input type:

color, date, datetime-local, email, month, number, range, search, tel, time, url and week

We Will explain some of them now:

Input Type Color

The <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.

Example:

 <form>
  Select your color:
  <input type="color" name="color">
</form> 

Result:

Select your color:

Input Type Date

The <input type="date"> is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field.

Example:

 <form>
  Date:
  <input type="date" name="date">
</form> 

Result:

Date:

min and max attributes can be used to add restrictions to dates.

For Example:

Date after 1990-01-01:
  <input type="date" name="bday" min="1990-01-01"><br>

Result:

Date after 1990-01-01:

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with no time zone. Depending on browser support, a date picker can show up in the input field.

Example:

 <form>
  Date (date and time):
  <input type="datetime-local" name="DT">
</form> 

Result:

Date (date and time):

Input Type Email

The <input type="email"> is used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted.

Example:

 <form>
  Your E-mail:
  <input type="email" name="email">
</form> 

Result:

Your E-mail:

Input Type File

The <input type="file"> defines a file-select field and a “Browse” button for file uploads.

 <form>
 Upload your file: <input type="file" name="yourFile">
</form> 

Result:

Upload your file:

Input Type Month

The <input type="month"> allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field.

Example:

 <form>
  Month (month and year):
  <input type="month" name="Month">
</form> 

Result:

Month (month and year):

Input Type Number

The <input type="number"> defines a numeric input field.

Example:

 <form>
  Number (between 1 and 5):
  <input type="number" name="num" min="1" max="5">
</form> 

Result:

Number (between 1 and 5):

Input Type Range

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes:

Example:

 <form>
  <input type="range" name="points" min="0" max="10">
</form> 

Result:

Input Type Search

The <input type="search"> is used for search fields (a search field behaves like a regular text field).

Example:

 <form>
  Search:
  <input type="search" name="search">
</form> 

Result:

Search:

Note:Search type is alike of text type.

Input Type Time

The <input type="time"> allows the user to select a time (no time zone). Depending on browser support, a time picker can show up in the input field.

Example:

 <form>
 Time:
  <input type="time" name="Time">
</form> 

Result:

Time:

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted.

Example:

 <form>
  Index URL:
  <input type="url" name="index">
</form> 

Result:

Index URL:

Input Type Week

The <input type="week"> allows the user to select a week and year. Depending on browser support, a date picker can show up in the input field.

Example:

 <form>
  Week:
  <input type="week" name="Week">
</form> 

Result:

Week:



This post is one of the HTML5 for deep understanding course. where we will learn every common elements from basic to the advanced element.

In addition each lesson has a video which you could visit and watch for more practicing and for deep understanding.

We hope that we could give the best for you and for the deep and easy understanding.

You could follow the series from our website SAFHATECH.com and go to categories and then programming and then Choose the course you want then just click next post to go step by step.

Finally we hope every thing is works as you suspect.


Consequently You could follow us at :

Website URL: https://www.safhatech.com/

Youtube: https://www.youtube.com/channel/UCIVzh6iykNowNcOUT5Gfasw

Twitter: http:// https://twitter.com/safhatech

Instegram: https://www.instagram.com/safhatech

Facebook: http:// https://www.facebook.com/Safhatech-487171875443687

Phone:967772223681

References: http://www.w3schools.com

Leave a Reply