Open In App

How to get focused a button automatically when the page load using HTML ?

Last Updated : 01 Oct, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

The <button> tag in HTML is used to define the clickable button. The <button> tag is used to submit the content. The images and text content can use inside <button> tag.

The <button> autofocus attribute is used to get focused button automatically after loading the web pages.

Syntax:

<button type="" autofocus> Submit <button>

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <h3>
        How to specify that a button 
        should automatically get 
        focus when the page load?
    </h3>
  
    <!-- button tag starts from here -->
    <button type="button" autofocus 
        onclick="alert('Welcome to GeeksforGeeks')">
        Click Here
    </button>
    <!-- button tag ends here -->
  
</body>
</html>


Output:

  • On click of the submit button, the following alert message box is shown to the user.

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to specify that a button 
        should automatically get 
        focus when the page load?
    </h3>
  
    <!-- button tag starts from here -->
    <button type="button" autofocus onclick="myFun()">
        Click Here
    </button>
    <!-- button tag ends here -->
  
    <p id=result></p>
  
    <script>
        function myFun()
        {
            document.getElementById("result")
               .innerHTML = "Welcome to GeeksforGeeks";
        }
    </script>
</body>
</html>


Output:



Similar Reads

How to set a keygen element that automatically get focused when page loads in HTML5 ?
The &lt;keygen&gt; tag in HTML is used to specify a key-pair generator field in a form. The purpose of this element is to provide a secure way to authenticate users. When a form is submitted then two keys are generated, private key and public key. The private key is stored locally, and the public key is sent to the server. The public key is used to
1 min read
How to set focus on input field automatically on page load in AngularJS ?
We can focus on any input field automatically using the angular directives. Here we create a custom directive that can auto-focus on any field in the form. Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component decorator with @Directive decorator. Approach : Create the Angu
3 min read
Which event will be triggered when element get focused in HTML ?
When the user interacts with the HTML elements, HTML has the ability to let events trigger actions in a browser, such as a user clicks on an element, focus in or focus out of an element etc. The events that are related to focus are contained within the DOM FocusEvent Object. The onfocus will be triggered when an element is in focus in HTML. The DOM
2 min read
How to return true if browser tab page is focused in JavaScript ?
There may be situations when we need to check if a browser tab is focused or not. The reasons for this include: Prevent sending network requests if the page is not being used by the user as this would reduce the amount of load on the server. Also, this would save upon the cost if we are using a paid third-party API.Stop playback of media when the t
4 min read
How to get focused element using jQuery?
To focus on element there is an inbuilt selector available in jQuery, which is used to detect the currently focused element. When the element is get focused by the mouse click or by the tab-navigating button this selector return the selected element. You can add the element in JQuery to focused that element easily. Here we will use the JQuery inbui
2 min read
How can a page be forced to load another page in JavaScript ?
In JavaScript, you can force a page to load another page by using the window.location object. There are a few methods to achieve this. To force a page to load another page in JavaScript, we have multiple approaches: Below are the approaches used to force a page to load another page in JavaScript: Table of Content Using window.location.replaceUsing
2 min read
How to scroll automatically to the Bottom of the Page using jQuery?
In this article, we will use the scrollTop() method of jQuery to scroll the page in different scenarios as discussed below: Table of Content Using the scrollTop with height() methodUsing scrollTop with animate() methodUsing the scrollTop with height() methodIn this approach, we will use the scrollTop() method with the height() method to scroll the
2 min read
How to set the focus on drop-down list automatically when the page loads in HTML5?
The purpose of this article is to focus the drop-down list automatically when the page loads in HTML5. The &lt;select&gt; autofocus attribute is a boolean attribute that specifies that the drop-down list should automatically get focus when the page loads. Syntax: &lt;select autofocus&gt; Example: The following code demonstrates a drop-down list wit
1 min read
How to automatically transfer visitors to a new web page ?
This article is all about how can we transfer our web page visitors to another web page. This may be required in cases when need to do a temporary change in our website or we have permanently shifted our website to a new website. We can use this method to automatically redirect our users or tell search engines by redirecting them to the new site. A
2 min read
How to Get Page Load Time in Angular?
In web development, performance is the most important thing. Users expect fast and responsive web applications and even minor delays can impact user experience and satisfaction. Monitoring page load time is important for identifying performance bottlenecks and optimizing the user experience. In this article, we'll explore how to get page load time
5 min read