Styling a form is never an easy thing to do, but adding CSS3 on a HTML5 form is a task that shows a large variety of results when it comes to testing on different browsers. Check the test link.
When it comes to CSS3 not much can be done: but adding rounded corners, gradients and dropshadows is still more than nothing anf the overall aspect of the form is waaaaaaaaay better. But HTML5 is supported by few browsers (this HTML form only by Opera) and CSS3 also by few broswers – but different from the one supporting HTML5.
The result: impossible to see the result on one browser only: the rounded corners can be seen on Mozilla/Chrome/Safari and the HTML5 elements on Opera.
Internet Explorer? Better don’t ask. No support whatsoever.
So the results:
- Mozilla 3: rounded corners + / HTML 5 elements
- Chrome: rounded corners + (they look weird) / HTML 5 elements –
- Safari: rounded corners + / HTML 5 elements –
- Opera 9: rounded corners – / HTML 5 elements +
- IE (doesn’t matter which one): rounded corners – / HTML 5 elements –
Ric Ferrer sent us a screenshot with the behavior of Mobile Safari from his Ipod. Thank you 🙂
Check the Spanish version of this post:
Usando CSS3 para dar estilo a formularios escritos en HTML5
After writing an accessible form in XHTML and validating it with a PHP server side script & after that with a Mootools client-side script, I write today about a third way of approaching the subject – using future-to-come HTML5 (by saying that, I really hope to be able to use it waaaay before 2011).
The beauty consists in having all the above mentioned validation inside HTML code: we’ll have
- input type=”email” for email addresses
- type=”url” for urls
- type=”date” and “datetime” for date fields (usually done with JS calendars until now), or “month”, “week”, “time”
- type=”number” for number only inputs
- accessible sliders, with type=”range”
- ability to add extra validation conditions after writing the tag, like: required, read-only,disabled, autofocus, a minimum value, a maximum accepted value/length
The code for our simple contact form will be much lighter:
<form action="index.php" method="post" name="contactform" id="contact">
<label for="name">Name <span>(required)</span></label>
<input tabindex="1" type="text" name="name" id="name" required />
<label for="mail">Email <span>(required)</span></label>
<input tabindex="2" type="email" name="mail" id="mail" required />
<input tabindex="3" type="text" name="phone" id="phone" />
<textarea tabindex="4" cols="30" rows="10" name="message" id="message"></textarea>
<button tabindex="5" type="submit" name="submit" id="send">Submit</button>
The result will be a much easier way of writing and validating forms in an accessible manner, without adding extra load/code with PHP/JS scripts. All you have to do is place “required” to all the required fields and use the above mentioned minimum value, maximum accepted value, etc to control the user’s input.
The entire list of types and useful tables with the methods that apply to each state can be found on W3C site
The problem right now is the inabilityof the browsers to work with lots of HTML5 features. And the future does not look good either. So far the only browser that supports the new forms is Opera 9.5+. Internet Explorer 8 and below is not compatible and IE9 probably won’t be either (we’re talking about 2010). Chrome 2+, Safari 4+ will partially support some features while Mozilla won’t do it even in its 4.0 version (due to launch in 2010).
Now, the same contact form we used to play with, but written in HTML5, will look the same but behave much more nicely (the code is lighter too). It’s saving us a lot of time and headaches and it’s much more user friendly. Play with the new example – in Opera 9.5+ – and drop us a feedback if you consider that the subject is interesting enough to come back with more code-examples.
Check the Spanish version of this post:
Una tercera manera de escribir y validar formularios – HTML5