Skip to content
Related Articles

Related Articles

How to get focused a button automatically when the page load using HTML ?
  • Last Updated : 01 Oct, 2020

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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :