Upload
minhas-kamal
View
273
Download
0
Embed Size (px)
Citation preview
HTML-5New Input Types
Welcome to The Presentation on
12-May-2015
Team Members
Kishan Kumar Ganguly (BSSE-0505)Minhas Kamal (BSSE-0509)Mostaque Ahmed (BSSE-0530)
Objectives
To understand new input types of HTML-5
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.
New Input Types
searchemailurltelnumberrangedate
monthweektimedatetimedatetime-localcolor
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.
Search (Cont.)
<input type="search" name="search">
• 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).
Email (Cont.)
<input type="email" name="email">
Number
• Used for specifying a numerical value.
<input type="number" min="5" max="18" step="0.5"value="9" name="shoe-size">
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">
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)
Date (Cont.)
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.
Color (Cont.)
<input name="color" type="color">
Tel
• Used to specify telephone numbers.• No particular syntax enforced.
• Recognized by mobile devices.
Tel (Cont.)
<input type="tel" name="tel" >
Reason of introduction
• Less development time• An improved user experience
Backward Compatibility
• Renders as text type.
Thank You