Wednesday 9 October 2013

HTML5 form elements

IE10 includes support for HTML5 Forms. HTML5 Forms offers two major advantages over previous versions: new input types and built in validation.
The new HTML5 input types are:
color ,date,  datetime,  datetime-local,  email,  month,  number , range ,  search,  tel,   time,  url ,week

Introducing New Input Types

The current draft of the HTML5 specification brings with it 13 new input field types. Yes, thirteenbrand-new, shiny ways of defining the good old input element, so make some room beside textinputs for the following:
  • email for email addresses, perfect to use immediately
  • tel for telephone numbers (some browsers may strip whitespace), fine for immediate use
  • url for web addresses, good to use now
  • color for hexadecimal color values; here’s hoping we see OS-native color pickers in the future!
  • number for whole numbers; some browsers provide up/down arrows next to the input field. You can also limit the number to a given range with the min and max attributes.
  • range for a numeric input with a slider widget; like the number input type, you can use min and max attributes to define the range. You can also use the step attribute to control the increments in which the slider moves. This is ready for use, as browsers that don’t support it will simply display a text field—but be careful how you use this one. Regardless of how cool they may look, sliders are only good for certain tasks (such as price ranges); in most cases, a regular number field will be easier for your users.
  • search for search keywords, so naturally just the tool for site searches. Be wary of the current Mac OS rendering: it looks just like the built-in Spotlight search, but there’s no overriding the styles if you need to display it differently.
  • datemonthweektimedatetime, and datetime-local for date-related inputs. Several exciting new fields—now we just have to wait for all the browsers to implement it.
HTML5 form attributes
Good Luck…

No comments:

Post a Comment