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.
It is readily used in input fields such as search fields etc what it does
- When a form field is empty, show some some text into it.
- When the user clicks on that field, remove the text.
and if the user leaves the field again show the placeholder text into it.
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.
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">
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>
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>
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">
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.