HTML-5 New Input Types

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">

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).

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