Input this - input that, HTML5 new input types
We are used to inputting types like "submit", "radio" or "hidden" but these days there are more components that are so common that are part of almost every web framework out there no matter if it is in Java, Ruby, Python or any other language. I'll give a short overview of what is being added in HTML5. The current state of them is that well... they sort of work, basically not all of the features are supported in all the modern browsers or IE.
Opera seems to support most of them and they have some good initial look there.
Why would you need input types for this, well first thing is validation that otherwise you would need to do with JavaScript on the client side.
You could also style with CSS using input type specific selectors like input[type=radio]. Best thing about the input types by far is that they are semantically correct so mobile phones open input type specific view on the keyboard.
Isn't this what you always wanted? ... at least when it comes down to html input.
TL;DR version
Related Links
Demos - http://mitemitreski.com/demo/html5/input.html
W3 input element spec - http://www.w3.org/TR/2011/WD-html5-20110525/the-input-element.html
Support test - http://www.quirksmode.org/html5/tests/inputs_dates.html
Mozzila developers article - https://developer.mozilla.org/en-US/docs/HTML/Element/Input
Web Platform page - http://docs.webplatform.org/wiki/html/elements/input/type/search
Opera seems to support most of them and they have some good initial look there.
Date selection related.
Many times you need to create or integrate some control that will be a date-time picker, I've done this way too often and I'm sure that you also have. But why should we do something like this, this should be part of HTML and we should just style it with CSS. HTML5 makes this very simple with the date input types.
<input type="datetime" />
<input type="datetime-local" />
<input type="date" />
<input type="week" />
<input type="time" />Emails, Phone and URL
 |
| Email validation example on Opera 12 |
 |
| Input type email on iOS |
You could also style with CSS using input type specific selectors like input[type=radio]. Best thing about the input types by far is that they are semantically correct so mobile phones open input type specific view on the keyboard.
<form>
<input name="email" type="email" pattern="[^ @]*@[^ @]*" value="" />
<input id="url" type="url" />
<input id="phone" type="tel" />
<input type="submit" />
</form>
Live example: |
| Input type phone on iOS |
Color
Input type that results in color picker.
<input type="color" />Isn't this what you always wanted? ... at least when it comes down to html input.
TL;DR version
NEW HTML5 input types, awesome!!! see demo
Related Links
Demos - http://mitemitreski.com/demo/html5/input.html
W3 input element spec - http://www.w3.org/TR/2011/WD-html5-20110525/the-input-element.html
Support test - http://www.quirksmode.org/html5/tests/inputs_dates.html
Mozzila developers article - https://developer.mozilla.org/en-US/docs/HTML/Element/Input
Web Platform page - http://docs.webplatform.org/wiki/html/elements/input/type/search
