如何在不使用 JavaScript 的情况下设置默认 HTML 表单焦点？
HTML 表单是文档的一部分，其中包括文本字段、密码字段、复选框、单选按钮、提交按钮、菜单等控件。它允许用户输入任何数据，如姓名、电子邮件地址、密码、电话号码等，这些数据将发送到服务器进行处理。
如果我们想从网站访问者那里收集信息，就需要 HTML 表单。创建表单的语法如下。
<form> --form elements— </form>
示例
以下是显示具有其默认行为的简单表单的示例。
<!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>
我们可以观察到，上面的表单没有任何焦点元素。焦点元素是默认接收所有键盘事件和其他类似事件的元素。基本上，当焦点设置为表单中的特定元素时，它似乎在其他元素中突出显示。加载此页面时，此控件接收焦点并显示闪烁的文本光标。
通常，JavaScript 的 focus() 方法用于此目的，因为它使元素成为当前文档的活动元素。但是，我们也可以在不使用 JavaScript 的情况下实现这一点。下面讨论了设置默认 HTML 表单焦点的方法。
使用"autofocus"属性
HTML autofocus 属性是一个布尔属性，用于指定页面加载时是否应将焦点赋予元素。HTML5 引入了 autofocus 属性。 autofocus 属性适用于以下元素：
<button>:此标签定义可点击的按钮。
<textarea>:此标签生成多行输入元素。
<input>:此标签生成多行输入元素。
<select>:此标签生成下拉控件。
语法
<'元素名称' autofocus>
autofocus 属性只能应用于文档或对话框中的一个元素。当应用于多个元素时，只有第一个元素会被突出显示。
示例
这是一个简单示例，演示了如何在表单内的单个输入元素上使用自动对焦属性。
<!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>
示例
在此示例中，我们将创建一个包含多个输入元素的表单，并将 autofocus 属性添加到单个元素以突出显示该特定元素。
<!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>
在上面的例子中，我们为第一个输入元素添加了 autofocus 属性，因此只有该元素在表单中突出显示。同样，我们可以选择在任何元素上添加 autofocus 属性，以便在页面加载时将焦点设置在元素上。
