Home  >  Html5

HTML5 Attributes: autofocus, placeholder and required

April 05, 2014
HTML5 has provided such attributes that can minimize the script code. We will discuss here some attributes like autofocus, placeholder and required. Just use these attributes with input tag and get the functionality. In this page we will see the example and functionality explanation. The example of this tutorial will run on HTML5 supporting browser.

"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.
FIND MORE TUTORILAS


©2019 concretepage.com | Privacy Policy | Contact Us