HTML-5 New Input Types
Download as PPTX, PDF3 likes1,349 views
This document presents an overview of the new input types introduced in HTML5, including search, email, number, range, date, and color. It explains each type's functionality, usage, and benefits, such as improved user experience and mobile compatibility. The presentation was created by a team to highlight these features and their impact on web form development.
HTML-5 New Input Types
- 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