|
Answer» HTML5 introduces more than a dozen new input TYPES for forms. The new input types provide dual benefits - Less development time
- Improved user experience.
Below are the new input types and it’s usage. - Search: Search is the most COMMON action perform on the web every day. Search is not only for Google, Bing, or Yahoo, but it can be a field on e-commerce site we make a purchase from on the web, on Wikipedia, and even on a personal blog. The syntax for Search is
<input type="search" name="search">- Email: Email input type is no different from a standard text input type but it allows one or more e-mail addresses to be entered with the REQUIRED attribute. The browser looks for patterns to ensure a valid e-mail address has been entered. The syntax for Email is
<input type="email" name="email" required>The URL input type is for web addresses. The browser will carry out simple validation and present an error message on form submission. This is likely to include looking for forward slashes, periods, and spaces and possibly detecting a valid top-level domain (such as .com or .co.uk). It also supports multiple addresses. The syntax for Url is <input type="url" name="url" required>- Tel: tel does not have any particular syntax enforced. Phone numbers differ around the world, making it difficult to guarantee any type of specific notation except for allowing only numbers and perhaps a + symbol to be entered. Validation against specific phone number format can be done using client-side validation. The syntax for tel is
<input type="tel" name="tel" id="tel" required>- Number: Number is used for specifying a numerical value. It, Safari, and Chrome, number input is rendered as a spinbox control whereby the user can click the arrows to move up or down or enter directly into the field. Firefox, on the other hand, renders the field like a standard text box. Support for type="number" will be in IE 10 also. With the additional attributes min, max, and step, we can change the default step value of this spinbox control as well as set minimum, maximum, and starting values (using the standard HTML value attribute). The syntax for number is
<input type="number" min="5" max="18" step="0.5" value="9" name="shoe-size" >- Range: The Range input type is similar to number but more specific. It represents a numerical value within a given range. In OPERA, Safari, and Chrome, type="range" renders as a slider. The syntax for range is
<input id="skill" type="range" min="1" max="100" value="0">- Date: HTML5 provides date control which provides a date picker functionality with is INTEGRATED with the browser without any external libraries. Date control allows to select a single date; select a week, month, time, date and time, and even date and time with a time zone using the different input types. The markup is pretty straightforward. The syntax for Date is
<input id="dob" name="dob" type="date">Also, using the min and max attributes to ensure the user can only choose from a specified date range. <input id="startdate" name="startdate" min="2012-01-01" max="2013-01-01" type="date"> - Month: Month is used to select a particular month on the web page. It can be used for a credit card expiry date. The syntax for month is
<input id="expiry" name="expiry" type="month" required>- Week: week is used to select a particular week in a month. The syntax for week is
<input id="vacation" name="vacation" type="week">- time : time renders a spinbox for selecting the precise time. The syntax for time is
<input id="exit-time" name="exit-time" type="time">- DateTime: We can combine the date and time by using type="datetime" for specifying a precise time on a given day. The syntax for datetime is
<input id="entry-day-time" name="entry-day-time" type="datetime">- Datetime-local: Using datetime-local, user can select a precise time on a given day with a local time zone variation. The syntax for datetime-local is
<input id="arrival-time" name="arrival-time " type="datetime-local">- Color: The Color input type allows the user to select a color and returns the hex value for that color. It is anticipated that users will either be able to type the value or select from a color picker,. The syntax for color is
<input id="color" name="color" type="color">
|
