資料結構
網路
關係資料庫管理系統 (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 次瀏覽
