1.
HTML-5
New Input Types
Welcome to The Presentation on
12-May-2015

2.
Team Members
Kishan Kumar Ganguly (BSSE-0505)
Minhas Kamal (BSSE-0509)
Mostaque Ahmed (BSSE-0530)

3.
Objectives
To understand new input types of
HTML-5

4.
HTML Form
An HTML form is a section of a document
containing normal content, markup, special
elements called controls (checkboxes, radio
buttons, menus, etc.), and labels on those
controls.

5.
New Input Types
search
email
url
tel
number
range
date
month
week
time
datetime
datetime-local
color

6.
Search
• The search type is used for search fields
like a site search or Google search.
• The search field behaves like a regular
text field.
• Changes action key in mobile device.

7.
Search (Cont.)
<input type="search" name="search">

8.
Email
• The email type is used for input fields that should
contain an e-mail address.
• The value of the email field is automatically validated
when the form is submitted.
• Mobile devices recognizes the email input type, and
changes the on-screen keyboard to match it (adds @
and .com options).

9.
Email (Cont.)
<input type="email" name="email">

10.
Number
• Used for specifying a numerical value.
<input type="number" min="5" max="18" step="0.5"value="9" name="shoe-size">

11.
Range
•The range type is used for input fields that should
contain a value from a range of numbers.
•The range type is displayed as a slider bar.
<input id="skill" type="range" min="1" max="100"value="0">

12.
Date
HTML5 has several new input types for selecting date
and time:
• date - Selects date, month and year
• month - Selects month and year
• week - Selects week and year
• time - Selects time (hour and minute)
• datetime - Selects time, date, month and year
• datetime-local - Selects time, date, month and year (local time)

13.
Date (Cont.)

14.
Color
•The color type is used for input fields that should
contain a color.
•Allows the user to select a color and returns the hex
value for that color.
•This input type will allow you to select a color from a
color picker.

15.
Color (Cont.)
<input name="color" type="color">

16.
Tel
• Used to specify telephone numbers.
• No particular syntax enforced.
• Recognized by mobile devices.

17.
Tel (Cont.)
<input type="tel" name="tel" >

18.
Reason of introduction
• Less development time
• An improved user experience

19.
Backward Compatibility
• Renders as text type.

20.
Thank You