Skip to main content

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.

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

Live example:





 

Emails, Phone and URL

Email validation example on Opera 12
Input type email on iOS
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.
  
  <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

Popular posts from this blog

HTML 5 data-* attributes, how to use them and why

It is always tempting to add custom attributes in HTML so that you can use the data stored there to do X. But if you do that there is no way of knowing if your HTML attribute will not be overridden in the future and used for something else and additionally you will not be writing valid HTML markup that can pass HTML 5 validator and with that you can create some very bad side effects. That is why there is a spec in HTML 5 called custom data attributes that enable number of useful features.

You may go around and read the specs, but the basic idea is very simple, you can add any attribute that starts with "data-" and that attribute will be treated as non-visible data for that attribute. By non-visible I mean that it is not something that gets rendered to the client so it does not affect the layout or style of the page, but it is there in the HTML so in no way this is private.
So let's get right into it, the following snippet is a valid HTML5 markup

<div id="aweso…

Basic Authentication with RestTemplate

Spring Rest Templates are very good way of writing REST clients. By default they work with basic HTTP so if we need to use Basic Authorization we would need to init the rest template with custom HttpClient. This way the Rest Template will automatically use Basic Auth and append to the HTTP headers "Authorization: Basic BASE64ENCODED_USER_PASS".

HttpClient client = new HttpClient(); UsernamePasswordCredentials credentials = new UsernamePasswordCredentials("USERNAME","PASS"); client.getState().setCredentials( new AuthScope("www.example.com", 9090, AuthScope.ANY_REALM), credentials); CommonsClientHttpRequestFactory commons = new CommonsClientHttpRequestFactory(client); RestTemplate template = new RestTemplate(commons); SomeObject result = template.getForObject( "http://www.example.com:9090/",SomeObject.class );

In EE application this would probably be managed by DI framework like Spring Core and only initialized once sin…

Temporary files and directories in Java 7 and before

Sometimes we want to create a temporary file, whether to save some data that gets written by some other application or just to temporary store stuff. Well, usually applications have their own temporary folder where they do this and it gets somehow configured. But why not use the underlying OS specific file like "/tmp/" in Linux so there must be some system property that has this info and there is. The key is "java.io.tmpdir" resulting in "/tmp" in my case or by code:
String tempDir = System.getProperty("java.io.tmpdir"); We can use tempDir  folder as a temporary place to store files, but there are a lot nicer ways to work with files like this even in JDK6 not just in JDK7:
import java.io.File; import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; public class TempFile { public static void main(String[] args) { try { // create a temp file File tempFile = File.createTempFile("old-file",…