HTML5 Goes Masked. JS, Move Over.

For basically the entire existence of the web, we have been stuck with 8 basic types of input into a web based form:

• Checkbox
• Radio
• Password
• Drop-down
• File picker
• Button
• Text
• Textarea

It wasn’t until 4 or 5 years ago that we saw heavy use of masking these input fields to control the information that goes inside of them. Now with HTML5, we will have 13 new types of fields, to account for all sorts of data, restriction, notices, and more. Check out these new types:

• email
• url – Web Address
• number – Spinbox
• number – Sliders
• range
• Date Pickers (Finally!)
  • date
  • datetime
  • datetime-local
  • month
  • week
  • time
• search
• color

You would use the syntax, just like a normal input field:$this->performHighlight(‘<input type=”range”>’, false, $content); and set appropriate attributes for the new input type.

Yikes. I’m not saying everybody is going to go out and dump all their JavaScript plugins right off the bat, but looking forward about 5 to 10 years, we will be a lot cleaner on the HTML front. You can also add special attributes such as required fields and validate fields.

Even mobile devices will be taking HTML5 into account so that your website will work across all sorts of devices.

Right now, support is very minimal. Opera 9+ has been working hard. IE, you guys have been in the dog house for a long time. Chrome, Safari, and Firefox are picking up fast. And then we have to remember the little guys (but Huge by usage) iPhone and Android browsers.