HTML5 Attributes: autofocus, placeholder and required
April 05, 2014
"autofocus" Attribute in HTML5
The HTML5 attribute autofocus focuses the control on which element it has been applied. It automatically focuses on page load. It saves the script coding and gives the cleanness of code. Find the example below.
<!DOCTYPE html>
<html>
<body>
<h4>autofocus Demo in HTML5</h4>
<form action="" >
First Name: <input type="text" name="fname" autofocus><br>
Last Name: <input type="text" name="lname">
<br/><input type="submit" value="Submit">
</form>
</body>
</html>
Check the first input field. By default it is auto focus.
"placeholder" Attribute in HTML5
Suppose for an input field we want to add some hint on page load then we can do it simply in HTML5 just by using an attribute that is placeholder. Placeholder needs a value. Assign some hint to the placeholder and our task is finished. What placeholder will do is that on page load it will display the hint, once you try to write anything in the input field, hint will disappear and if data is reset, hint will appear again. Find the example.
<!DOCTYPE html>
<html>
<body>
<h4>placeholder Demo in HTML5</h4>
<form action="" >
First Name: <input type="text" name="fname" placeholder="Enter First Name"><br>
Last Name: <input type="text" name="lname" placeholder ="Enter Last Name">
<br/><input type="submit" value="Submit">
</form>
</body>
</html>
See demo.
"required" Attribute in HTML5
The HTML5 attribute required is a type of validation. If an input field is using required attribute then that field must have some value on submission. If blank, page will not be submitted and we will get one pop of showing message that this must have some value. Find the example.
<!DOCTYPE html>
<html>
<body>
<h4>required Demo in HTML5</h4>
<form action="" >
Name: <input type="text" name="name" required><br>
<br/><input type="submit" value="Submit">
</form>
</body>
</html>
Try to submit the page without entering any data. You will see a pop suggesting to enter some data in the field.