HTML5 Basics

I want to share some basic HTML5 features with you today. HTML5 introduces a lot of new features to create web pages. Currently, the Internet Explorer is the worst when It comes to the HTML5. Firefox and Chrome are pretty good, People like Opera too. Everybody talks about HTML5, but not that many people wants to use it and I think this is the biggest problem of HTML5. We will start to use HTML5 in our applications if developers will start to use HTML5.


Required Fields
Here is an example to create a Textbox with a required field.

<input type="text" name="companyname" required placeholder="Company Name">

Here is a picture of this feature.

When you type anything, It looks like this:

You can play with CSS settings if you don't like the style.
For CSS, I used the following settings.

input:required:invalid, input:focus:invalid {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC');
  background-position: right top;
  background-repeat: no-repeat;
  width: 180px;
  background-color: lightcoral;
  -moz-box-shadow: none;
}
input:required:valid {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=');
  background-position: right top;
  background-repeat: no-repeat;
  width: 180px;
}

Patterns

Patterns work like Custom Validation. Here is an example

<input name ="IPAddress" type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}" />

Email Fields

It is very common to ask a user his/her email, HTML5 has a validation for the email addresses.

<input name="emailaddress" type="email>

Date Picker

Who doesn't like Date Pickers, HTML5 has a free Date Picker. You don't need to write a jscript or use a Third party product like Telerik or Component One. I have rendered the followings in Google Chrome.

<input name="day" type="date">

<input name="dt" type="datetime">

<input name="m" type="month">

<input name="w" type="week">

<input name="t" type="time">

Slider / Step Attribute

Another nice addition is slider, It is a useful control. Slider worked in Google Chrome, I guess Firefox is not there yet or I might need update my version. IE... forget about it.

<input name="no" type="range" min="1" max="" step="1">

Here is a very useful link for HTML5, You should be able to find what feature is working in what browser. It's a nice cheatsheet.