How to specify a name for the fieldset using HTML ?

Set the focus to HTML form element using JavaScript

Last Updated : 28 Dec, 2023

To set focus to an HTML form element, there can be many methods that can be used to focus. In this article, we will discuss them all.

These are the following approaches:

Table of Content

Using focus() method
Using window.onload method

Approach 1: Using focus() method

In this approach, we are going to use the focus() method to focus on the HTML element. We are creating a function in which we select an input and call the focus method on it. This method is set to the onclick function, whenever that button is clicked that onclick function will be invoked and it will focus on to input box.

Example: The focus() method is set to the input tag when the user clicks on the Focus button.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Set focus to HTML form element
    </title>
</head>

<body>
    <p>
        Click on button to set focus
        on input field
    </p>

    <form>
        <input type="text" id="input1">

        <br><br>

        <button type="button" onclick="focusInput()">
            Set Focus
        </button>
    </form>

    <script>
        function focusInput() {
            document.getElementById("input1").focus();
        } 
    </script>
</body>

</html>

Output:

focuss — Focusing on input element

Approach 2: Using window.onload method

In this appraoch we are focusing on the input field by using window.onload method. we are calling focus method when a window loads to the browser.

Example: This example focuses on the input field automatically on page load.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        Set focus to HTML form element
    </title>
</head>

<body>
    <p>
        Click on button to set focus
        on input field
    </p>

    <form>
        <input type="text" id="input1">

        <br><br>

        <button type="button" onclick="focusInput()">
            Set Focus
        </button>
    </form>

    <script>
        function focusInput() {
            document.getElementById("input1").focus();
        } 
    </script>
</body>

</html>

Output:

focissssss — window.onload focusing method

How to specify a name for the fieldset using HTML ?

B

BhavyadeepPurswani

Improve

Article Tags :

Similar Reads

How to focus element while loading the page in HTML ?

HyperText Markup Language(HTML) is the basic building block of web pages that defines a structure. This markup language is used by browsers to manipulate data like text, images, and other content so that they can be displayed in the required format. HyperText refers to the links that connect web pag

Implement a JavaScript when an element loses focus

Given a document, the task is to implement functionality when the element loses focus. We have 2 options, one is the onblur event and another is onfocusout event JavaScript. We're going to discuss a few methods. First few methods to understand. Approach 1: Using onblur event JavaScript onblur Event:

How to specify the value of an input element using HTML ?

In this article, we will set the value of an input element using HTML. The value attribute for <input> element in HTML is used to specify the initial value of the input element. It has different meaning for different input type: The â€œbuttonâ€, â€œresetâ€ and â€œsubmitâ€ property specifies the text on

How to specify a name for the fieldset using HTML ?

The <fieldset> tag in HTML5 is used to make a group of related elements in the form and it creates the box over the elements. The <fieldset> tag is new in HTML5. The HTML <fieldset> name attribute is used to specify the name for the fieldset element. It is used to reference the for

How to force Input field to enter numbers only using JavaScript ?

We are going to learn how can we force the Input field to enter numbers only using JavaScript. Below are the approaches to force input field force numbers using JavaScript:Table of ContentBy using ASCII ValueBy using replace(), isNan() functionBy using ASCII ValueIn this approach, we are going to us

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

How to define a label for an input element using HTML?

To define a label for an input element in HTML5, use the <label> tag. This tag enhances usability by allowing users to click on the label text to toggle the associated input control. The <label> tag should include a for attribute that matches the id of the input element, ensuring a clear

How to Dim entire screen except a fixed area using JavaScript ?

Given an HTML document and the task is to dim the entire screen except for one or few elements. It needs to be done to get the attention of the user on some part of the page using JavaScript. Approach: Select the element(s) for the focus.Use the box-shadow property to make that area visible. Example

How to set the focus to the first form field ?

In this article, we'll discuss how to set focus on the first form field. By setting the focus on the first form field, we indicate the user from where to begin. It increases the readability of a form in a webpage. There are various approaches to do so, we'll explain two of them with suitable example

How to Set Cursor Position in Content-Editable Element using JavaScript?

To set the cursor position in content-editable elements, such as a div tag, you can use the JavaScript Range interface. A range is created using the document.createRange() method.Approach:First, create a Range and set the position using the above syntax.Get user input from the input tag using jQuery