Basics Of HTML5 for beginners Part II

In the previous HTML5 tutorial (Basics Of HTML5 for beginners Part I).
I showed some very basic tags.
In this I am going to give information about some useful but easy tags and attributes which was not possible with the earlier versions of HTML.

They can be helpful in making a site dynamic and in designing.
As you know that HTML5 has made the life of blogger and designers HELL!! easy earlier long and complicated JavaScripts were used for some of the functions now that functions can be used as tags in the newer version of HTML.



Placeholder
It is readily used in input fields such as search fields etc what it does
  1. When a form field is empty, show some some text into it.
  2. When the user clicks on that field, remove the text.
  3. and if the user leaves the field again show the placeholder text into it.
<label for="search">Search</label>
<input name="search" id="search" type="text" placeholder="Search the  blog">

Autofocus
As you might have noticed when the Google loads the cursor is automatically blinking in the input field this is done by using autofocus attribute.
It can only be used once per document.

<label for="search">Search</label>
<input id="search" name="search" type="text" autofocus>

The autofocus attribute can be used on textarea, select, and of course on input.

Autocomplete
Filling forms automatically is done by using autocomplete. Most of the time, it’s very useful, but sometimes it can be dangerous. And now days if you are making a log in system it shows an error to set autocomplete="off" in password field. It can take two values on and off, by default it is on in the browsers.

<input type="password" name="password" autocomplete="off">
<form action="/register.php" autocomplete="off">

Required
This restricts browsers to submit the form if the required input field is left empty such as when registering the email is required and if it is left empty it will show an error.

<label for="pass">Email id</label>
<input id="email" name="email" type="email" required>

Datalist
Basically it is a select as well as input, if the element is not in the select field you can enter it


<label for="friends">Our Friends</label>
<input type="text" id="friends" name="friends" list="best">
<datalist id="best">
<option value="Nitin">
<option value="Daniel">
<option value="Gnamuel">
<option value="Tom">
<option value="Rahul">
<option value="Prayag">
<option value="Sumit">
<option value="Baba">
<option value="Navneet">
<option value="Goldi">
</datalist>

Sliders
These are useful in setting or selecting amount for donation if you find any other uses then tell me also. It is not supported in Mozilla Firefox but Chrome and safari supports it.

<label for="donate">Set it!</label>
<input id="donate" name="donate" type="range">

You can give maximum and minimum values to it.

<label for="donate">Set it!</label>
<input id="donate" name="donate" type="range" min="1" max="10">

Spinners
The user can see and choose the numerical value and can also write a value of his choice or consideration.

<label for="donate">How much?</label>
<input id="donate" name="donate" type="number" min="2" max="10">

We will talk about more complex tags and attributes in another tutorial.