資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML5 中的 <select> 元素上使用“required”屬性
HTML 的select元素表示一個顯示選項選單的控制元件。它用於建立下拉選單，以便使用者可以選擇他們想要的值。它是一個有用的功能，用於收集要傳送到伺服器的資料。<select>標籤通常用在表單元素內，要選擇的專案在另一個標籤<option>內編碼。它也可以用作獨立的元素，透過其特殊屬性之一<form>與表單關聯。
HTML 中的<select>標籤與許多屬性相關聯。下面將討論這些屬性。
name: 每個表單控制元件都必須附加名稱，因為在資料提交到伺服器後，它用於引用資料。
multiple: 使用此屬性，使用者可以從下拉選單中選擇多個選項。
required: 這通常用於驗證。除非使用者從下拉列表中選擇至少一個選項，否則它會阻止表單提交。
disabled: 此屬性阻止使用者與選項進行互動。
size: size 屬性以數字表示，指定在任何給定時間可見的選項數量。
autofocus: 此屬性應用於所有表單輸入，包括 select，以指示頁面載入時輸入應處於焦點狀態。
示例
以下是一個示例，展示了在不使用任何特定屬性的情況下使用<select>標籤時的預設行為。
<!DOCTYPE html>
<html>
<head>
<title>Default behavior of select tag</title>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select>
<option value="">choose from the list below</option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<br><br>
<button onclick="acknowledge()">Submit</button>
</form>
<script>
function acknowledge(){
alert("The form has been submitted successfully.")
}
</script>
</body>
</html>
在上面的示例中，即使使用者沒有從下拉選單中選擇任何選項，也可以提交表單。為了防止這種情況，需要使用 select 標籤的 required 屬性。在本文中，我們將討論在 HTML 中的 select 元素上使用“required”屬性的方法。
使用“required”屬性
"required" 屬性表示該元素是表單提交所必需的。如果我們沒有從下拉列表中選擇值並嘗試提交表單，則表單將不會提交，並且網頁上會出現警告。HTML5 引入了 required 屬性。
它可以寫成如下所示
<select required="required"> <select required='required'> <select required=required> <select required=""> <select required=''> <select required>
在 <select> 元素中使用“required”屬性有一些先決條件
select 元素中必須至少存在一個子元素。
第一個子元素必須包含一個空值屬性。或者
第一個子元素不能包含任何文字。
以下示例演示了在 select 元素中使用 required 屬性。當用戶嘗試在不從下拉列表中選擇選項的情況下提交表單時，會顯示警告訊息，並且表單不會提交。
示例
在此示例中，我們將建立一個 select 元素，其第一個子元素具有空值屬性，然後向其應用 required 屬性。
<!DOCTYPE html>
<html>
<head>
<title>
How to Use the "required" Attribute on the <select> Element in HTML5?
</title>
<style>
form{
background-color:wheat;
color:darkslategray;
font-size:20px;
font-weight:bold;
margin:25px;
padding:10px;
width:300px;
}
#btn1{
background-color:sienna;
border:none;
height:30px;
width:60px;
color:white;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select required>
<option value="">choose from the list below</option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<input type="Submit" id=btn1>
</form>
</body>
</html>
示例
在此示例中，我們將建立一個 select 元素，其第一個子元素沒有任何內容，然後向其應用 required 屬性。
<!DOCTYPE html>
<html>
<head>
<title>
How to Use the "required" Attribute on the <select> Element in HTML5?
</title>
<style>
form{
background-color:wheat;
color:darkslategray;
font-size:20px;
font-weight:bold;
margin:45px;
padding:10px;
width:300px;
}
#btn1{
background-color:sienna;
border:none;
height:30px;
width:60px;
color:white;
margin-left:10px;
}
</style>
</head>
<body>
<form>
<p>Select an OTT platform</p>
<select required>
<option></option>
<option value="Netflix">Netflix</option>
<option value="Amazon Prime">Amazon Prime</option>
<option value="Disney + Hotstar">Disney + Hotstar</option>
<option value="Sony LIV">Sony LIV</option>
<option value="Zee 5">Zee 5</option>
<option value="Voot">Voot</option>
</select>
<input type="Submit" id=btn1>
</form>
</body>
</html>
1K+ 閱讀量
