html-5 new input types
TRANSCRIPT
![Page 1: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/1.jpg)
HTML-5New Input Types
Welcome to The Presentation on
12-May-2015
![Page 2: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/2.jpg)
Team Members
Kishan Kumar Ganguly (BSSE-0505)Minhas Kamal (BSSE-0509)Mostaque Ahmed (BSSE-0530)
![Page 3: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/3.jpg)
Objectives
To understand new input types of HTML-5
![Page 4: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/4.jpg)
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.
![Page 5: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/5.jpg)
New Input Types
searchemailurltelnumberrangedate
monthweektimedatetimedatetime-localcolor
![Page 6: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/6.jpg)
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.
![Page 7: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/7.jpg)
Search (Cont.)
<input type="search" name="search">
![Page 8: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/8.jpg)
• 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).
![Page 9: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/9.jpg)
Email (Cont.)
<input type="email" name="email">
![Page 10: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/10.jpg)
Number
• Used for specifying a numerical value.
<input type="number" min="5" max="18" step="0.5"value="9" name="shoe-size">
![Page 11: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/11.jpg)
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">
![Page 12: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/12.jpg)
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)
![Page 13: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/13.jpg)
Date (Cont.)
![Page 14: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/14.jpg)
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.
![Page 15: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/15.jpg)
Color (Cont.)
<input name="color" type="color">
![Page 16: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/16.jpg)
Tel
• Used to specify telephone numbers.• No particular syntax enforced.
• Recognized by mobile devices.
![Page 17: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/17.jpg)
Tel (Cont.)
<input type="tel" name="tel" >
![Page 18: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/18.jpg)
Reason of introduction
• Less development time• An improved user experience
![Page 19: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/19.jpg)
Backward Compatibility
• Renders as text type.
![Page 20: HTML-5 New Input Types](https://reader035.vdocument.in/reader035/viewer/2022062904/58746cd01a28abab198b8751/html5/thumbnails/20.jpg)
Thank You