Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Set Default HTML Form Focus Without JavaScript?
A HTML form is a section of a document that includes controls like text fields, password fields, checkboxes, radio buttons, a submit button, menus, and so on. It allows the user to enter any data like name, email address, password, phone number, and so on that will be sent to the server for processing.
HTML forms are required if we want to collect information from site visitors. The syntax for creating a form is given below.
<form> --form elements— </form>
Example
Here is an example showing a simple form with its default behavior.
<!DOCTYPE html>
<html>
<head>
<title>Example of a form without any focused element</title>
</head>
<body>
<h3>Restaurant Experience</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name"><br><br>
<label for="number">Phone no:</label>
<input type="text" id="number"><br><br>
<p>What did you like the most?</p>
<input type="radio" id="taste">
<label for="taste">Taste</label><br>
<input type="radio" id="quantity">
<label for="quantity">Food Quantity</label><br>
<input type="radio" id="service">
<label for="service">Service</label><br>
<input type="radio" id="all">
<label for="all">All of the above</label><br><br>
<label for="sug">Suggestions:</label>
<textarea id="sug" rows=3 cols=20></textarea><br><br>
<input type="submit">
</form>
</body>
</html>
As we can observe, the above form does not have any focus element. A focus element is the one that receives all the keyboard events and other similar events by default. Basically, when focus is set to a particular element in a form, it appears to be highlighted among the other elements. When this page is loaded, this control receives focus and displays a blinking text cursor.
Generally, the focus() method of JavaScript is used for this purpose as it makes the element the current document's active element. However, we can also achieve this without using JavaScript. The method to set default HTML form focus is discussed below.
Using the ‘autofocus’ Attribute
The HTML autofocus attribute is a boolean attribute that specifies whether an element should be given focus when the page loads. HTML5 introduced the autofocus attribute. The autofocus attribute is applicable to the following elements:
<button>: This tag defines a button that is clickable.
<textarea>: This tag generates a multi-line input element.
<input>: This tag generates a multi-line input element.
<select>: This tag generates a dropdown control.
Syntax
<’element name’ autofocus>
The autofocus attribute may be applied only to one element in the document or dialogue. When applied to multiple elements, only the first one will be highlighted.
Example
This is a simple example that demonstrates the use of autofocus attribute on a single input element inside a form.
<!DOCTYPE html>
<html>
<head>
<title>How to Set Default HTML Form Focus Without JavaScript?</title>
<style>
form{
background-color:bisque;
color:navy;
font-weight:bold;
margin:10px;
padding:10px;
}
div{
height:100px;
width:250px;
background-color:antiquewhite;
}
</style>
</head>
<body>
<div>
<form>
<label for="sample">Sample input:</label>
<input type="text" name="input1" id="sample" autofocus />
</form>
</div>
</body>
</html>
Example
In this example, we will create a form with multiple input elements and add the autofocus attribute to a single element to highlight that particular element.
<!DOCTYPE html>
<html>
<head>
<title>How to Set Default HTML Form Focus Without JavaScript?</title>
<style>
#container{
background-color:thistle;
width:320px;
height:530px;
padding:20px;
}
#div1, #div3, #div5{
background-color:beige;
height:30px;
padding:10px;
}
#div2{
background-color:bisque;
height:30px;
padding:10px;
}
#div4{
background-color:bisque;
height:70px;
padding:10px;
}
#div6{
background-color:bisque;
height:90px;
padding:10px;
}
#btn1{
background-color:white;
height:30px;
width:70px;
border-radius:3px;
}
</style>
<body>
<h3>Airline review</h3>
<form action="SUBMIT" method="GET">
<div id="container">
<div id="div1">
<label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname" autocomplete="disabled" autofocus>
</div>
<br>
<div id="div2">
<label for="emailid">Email ID</label>
<input type="email" id="emailid" name="emailid">
</div>
<br>
<div id="div3">
<label for="phoneno">Phone Number</label>
<input type="text" id="phoneno" name="phoneno">
</div>
<br>
<div id="div4">
<p>Choose the airline</p>
<select name="airline" id="airline">
<option value="indigo">Indigo</option>
<option value="spicejet">Spice Jet</option>
<option value="airindia">Air India</option>
<option value="vistara">Vistara</option>
</select>
</div>
<br>
<div id="div5">
<label for="rating">Rating</label>
<input type="number" id="rating" name="rating" min=1 max=5>
</div>
<br>
<div id="div6">
<label for="review">Review</label>
<textarea rows=4 cols=20 id="review" name="review"></textarea>
</div>
<br>
<input type="submit" id="btn1">
</div>
</form>
</body>
</html>
In the above example, we have added the autofocus attribute to the first input element and as a result only that element gets highlighted in the form. Similarly, we can choose to add the autofocus attribute on any element to set the focus on it when the page loads.
123 Views
