数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在不使用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>: 此标签生成一个下拉控件。
语法
<’element name’ autofocus>
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属性添加到任何元素，以在页面加载时将焦点设置在其上。
458 次浏览
