Monday, December 10, 2012

New HTML5 features

Back in the old days of writing web forms and setting the focus, adding watermarks, or validating fields on your web page meant that you would be writing some java script to handle these minor tasks or passing the data to the server.

HTML5 has changed that and eased the pain of performing these tasks.

[gallery ids="129,128"]

If you just want to set focus then you can use the autofocus attribute.
   <input type="text" autofocus />

If you just want to add a watermark then you can use the placeholder attribute.
   <input type="text" placeholder="watermark" />

If you just want to add validation then you can use the title and pattern attributes.
   <input id="password3" type="text" 
placeholder="password"
title="1 digit and 1 letter"
pattern="\d{1}[a-zA-Z]{1}"
required />

If you just want to make a field required then you can use the required attribute.
   <input type="text" required />

All of these great features will only function in a browser that supports HTML5. They are ignored in older browsers.

No comments:

Post a Comment