Improve your forms using HTML5!

Autofocus and omitting attributes

The new Web Forms allows you to do validation and a number of other features in a more declarative way making it much easier to author. For instance this code example:

HTML:

<form action="" method="get">
<p><label>Search: <input name=search type="text" id="search"></label></p>
<script> document.getElementById('search').focus() </script>
<!-- the rest of the form -->
</form>

can be written using the new form functionality as follows:

HTML:

<form>
<p><label>Search: <input name=search autofocus></label></p>
  <!-- the rest of the form -->
</form>

Form validation

Nowadays web developers use nifty scripts to perform form validation on the client side. Soon you'll be able to simply write the following:

HTML:

<form>
<p><label>Name: <input name=name required></label></p>
<p><label>E-mail: <input name=email type=email required></label></p>
<p><label>URL: <input name=url type=url></label></p>
<p><label>Comment: <textarea name=comment required></textarea></label></p>
<p><input type=submit value=React!></p>
</form>

I'd argue that it's almost as readable as English! When the user tries to submit the form the user agent checks if all conditions are being met and if that's the case it submits the form and otherwise it shows an error message to the user. Of course, you should always have server-side validation but in case the user agent supports the new forms this might just save your user a few round trips. Better for usability and your bandwidth.
What I've introduced in the above example are a few of the new controls: email and url. And also a new attribute available to all form controls: required. Besides these, Web Forms 2 also includes controls for dates, time and numbers.

Styling controls

If you want to style a required form control (<input required>) that's quite trivial using some of the new pseudo-classes:

Code:

input:required { background:yellow }

Simarly for disabled controls, checked checkboxes, the default submit button, read-only controls, et cetera:

Code:

input:disabled { ... }
 
input:checked + label { ... }
 
input[type=button]:default { ... }
 
input:read-only { ... }

try here!

 

Such a nice post and information for me, Thanks for sharing.