Discover HTML5 and CSS3 (JavaScript come too) - Part 3

In this new post I want to focus on forms made by HTML5 and the new native functions provided to validate them. This does not mean that we don't need to validate the input written by the user in the server, but is a first filter. HTML5 provides you the way to create forms in an easier way: you can declare required fileds, specific data types like dates or emails and new components like date time pickers, progress bars, color selectors and everything without using javascript.

For your input tags you can declare several new "type" property like:

• type = "search": specific text field for searchs. Actually is more an aestetic improvement rather than a new feature.
• type = "tel": is a text box for phone numbers. Indeed, HTML allows you to write numbers and letters but some browsers show a numeric interface for phone numbers.
• type = "email": specific control for email addresses.
• type = "color": customized control for color selection.
• type = "url": it allows you to write just URL addresses. It works in the same way as the "email" type.
• type = "number": specific just for numbers, no letters. You can declare a "min" and "max" value to create a range for the user. The "step" attribute declare the increment or decrement each time.
• type = "date" "time" "datetime" "datetime-local" "month" "local": all are prepare to control inputs related with dates and times. Just by showing a calendar.
• type= "range": it's a flow control that represents a numeric value.

Anyway, if the browser can't support this new HTML5 types it will show a normal text box like it was before.

In our forms, now we can declare required fields that the user must fill up to continue submitting the post, just adding the "required" attribute in our input tag: <input id="txtName" type="text" required>. Another attribute for our inputs is "placeholder", it is used like a kind of help for the user. Using placeholder in an input provides an example of the data we expect: <input id="txtMail" name="txtMail" type"email" placeholder="mikejones@domain.com">. "Autofocus" attribute is used to place the action in a control like when you open google web site and you can start writing because the cursor is already placed in the input search box. The "list" attribute provides you a droplist to your input text box with different options defined by the web developer:

<input type="text" name="txtStates" id="txtStates" list="states">

<datalist id="states">

<option label="Barcelona" value="Barcelona">

<option label="Alava" value="Alava">

<option label="Madrid" value="Madrid">

<option label="Sevilla" value="Sevilla">

</datalist>

For those browsers that are not able to render this kind of controls we need to code some JS. First we will check if the browser knows any specific HTML 5 component, if so we can add the HTML5 code, if not we will execute some JS code. Here is the code to check compatibility.

In the third line we create the element in the navigator memory but without including it in the DOM document. In fourth line, we check if the control accepts the attribute, if not we return false. Here below I show how to call this function to know if the browser can handle a placeholder attribute:

In this script we are just checking if the placeholder attributes can be manage on the broser, if not we make a simulation of how it would work.

Anyway we have other ways to check the compatibility of the user's browser and HTML5. The library "modernizr" can do this for us. But only detects compatibility, if we want to create a way to "cheat" the system and use all these attributes (placeholder, required,...) we should use our own javascript.