Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Usage of autofocus HTML5 Attribute
We received a greatness from HTML5. Basic HTML can now be used to carry out tasks that JavaScript and Flash previously handled, such as basic form validation, INPUT placeholders, and audio/video. The autofocus attribute in HTML allows us to automatically focus on components when the page loads, which is another straightforward feature.
When the autofocus property is present, the page loads with the INPUT, TEXTAREA, or BUTTON element already chosen. This property is particularly helpful on pages whose primary goal is information gathering.
Autofocus HTML5 attribute
An element should be focused when the page loads or when the <dialogue> a part of is displayed, according to the autofocus global attribute, which is a Boolean attribute. There can only be one element with the autofocus attribute per document or dialogue. If used to many items, the first one will get the most attention.
Syntax
Following is the syntax for autofocus HTML5 attribute
<input name="q" autofocus />
Let's look into the following example for getting the better understanding on usage of autofocus HTML5 attribute.
Example
In the following example we are using the HTML autofocus attribute for input type.
<!DOCTYPE html>
<html>
<body>
<h1>The autofocus attribute</h1>
<form>
<label for="fname">User name:</label>
<input type="text" id="uname" name="uname" autofocus><br><br>
<label for="fullname">Full name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit">
</form>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of an input field allowing the user to enter the text and the username inputtype was mentioned with autofocus, which means the input field will focus when the page loads.
Example
Considering the another example where the HTML autofocus attribute was used for button.
<!DOCTYPE html>
<html>
<body>
<h1>The button autofocus attribute</h1>
<button type="button" autofocus onclick="alert('Welcome To TP')">CLICK</button>
</body>
</html>
Output
On running the above script, the output window will pop up and display the click button used with autofocus attributes, which makes the button focus when the page loads. When the user clicks the button, the event gets triggered and displays an alert.
Example
In the following we are using the datetime-local for inputtype.
<!DOCTYPE html>
<html>
<body>
<h1>The textarea autofocus attribute</h1>
<textarea rows="3" cols="40" autofocus>
Mahendra Singh Dhoni is an Indian former international cricketer
who was captain of the Indian national cricket team in limited-overs
formats from 2007 to 2017 and in Test cricket from 2008 to 2014.
</textarea>
</body>
</html>
Output
When the script gets executed, it will generate an output consisting of a textarea field filled with the text mentioned with the autofocus making the textarea field focus when the page loads.
216 Views
