Skip to main content

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.

Comments

  1. Wow Navneet,

    Great Informative Post. I blog about web technologies. But never tried HTML5. It just makes things easy. I had to struggle hard to make those happen in classic HTML.

    ReplyDelete
  2. That's mini tutorial for HTMl5 beginners. Every one should know about HTML5 as it really used in many different domains.

    ReplyDelete

Post a Comment

Popular posts from this blog

Microsoft pays Facebook to put Bing on logout page

Facebook got its first customer for the logout page, and the customer is also OS giant Microsoft . Now, it may bee soon that you will get to see Bing page as you logout of the Facebook, though some of the people have got it already as it is testing phase . This step is taken by Microsoft to save its search engine so called BING 'Bing Is Not Google' . Microsoft has been spending millions of dollars to increase Bing's market share so this

JQuery Plugins Site Down

Two three days before when I entered to  http://plugins.jquery. com   I thought it might be a small error and will be fixed in a hour or so . But, when I returned it showed the same message COME BACK LATER.

Jailbreak for iPhone OS 6 Beta

If you are iPhone user then this post is surely going to surprise you. Whenever iPhone or iPad with new iOS is released then it takes some time for their jailbreak to come. But this time it is something special. It’s only 15 days from the date when iOS 6 was released and in this short span of time, iPhone Dev team has announced that they have released the jailbreak for it. Seems to be interesting and this news is hitting the web across the world. Some say that it’s just announcement and far from reality. Whatever is, in this post I am going to post the procedure to jailbreak iOS6. Hope you find it useful for you. So let’s have a look on it.