HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

HTML select autofocus 属性

htmlweb developmentfront end technology更新于 2025/6/13 14:36:17

HTML 中 <select> 元素的 autofocus 属性用于在页面加载时将焦点设置到下拉列表中。

以下是语法 −

<select autofocus>

现在让我们看一个实现 <select> 元素 autofocus 属性的示例 −

示例

<!DOCTYPE html>
<html>
<body>
<h1>Profile</h1>
<h2>Educational Qualification</h2>
<section>
<h3>Graduation</h3>
<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>
<section>
<p>Worked at ABC Corporation from July 2015 - May 2019 as a Technical Manager.</p>
</section>
</body>
</html>

输出

在上面的例子中，我们在不同的部分下有两个下拉列表 −

<section>
<h3>Graduation</h3>
<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>
</section>
<section>
<h3>Postgraduation</h3>
<select>
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
</select>
</section>

在页面加载时，我们使用 autofocus 属性为其中一个下拉列表设置自动对焦，如下所示 −

<select autofocus>
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
</select>

相关文章

有用资源

打印 下一节:HTML DOM Input Month form 属性 ❯❮ 上一节:HTML DOM Link hreflang 属性