如何在不使用 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 属性,以便在页面加载时将焦点设置在元素上。