資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在單選輸入欄位中使用“required”屬性？
HTML 的 input 元素，type 屬性為“radio”，表示一組選項中可以選擇的一個選項，同一時間只能選擇一個選項。這些組通常由多個單選按鈕定義，每個單選按鈕在 name 屬性中具有相同的值。選擇單選按鈕時，通常會呈現為一個填充或突出顯示的小圓圈。
與複選框控制元件相反，單選按鈕很大程度上依賴於value屬性。在 HTML 中提交表單時，只有選定的選項才會與表單一起傳送到處理代理，處理代理除了檢查提交控制元件的值之外，沒有其他方法來確定選擇了哪個選項。這就是為什麼每個選項的 value 屬性在組內都應不同的原因。
為了分配到同一組，一組單選按鈕必須在 name 屬性中都具有相同的值。一組單選按鈕必須位於同一文件中並屬於同一表單，否則根本不存在。將單選按鈕放在不同的表單或文件中會導致它們分離。
除了適用於所有<input>元素的通用屬性外，單選輸入還支援以下屬性。
checked: 布林屬性，指示該單選按鈕是否是該組中的預設選中項。
value: 提交表單時，只有當前選中的單選按鈕才會傳送到伺服器，報告的值是 value 屬性的值。如果未指定其他值，則預設使用字串“on”。
required: required 屬性是大多數 <input> 共享的一個屬性。如果具有相同名稱的一組單選按鈕中的任何一個單選按鈕都具有 required 屬性，則必須選中該組中的一個單選按鈕，即使它不是應用了該屬性的單選按鈕。
示例
讓我們來看一個包含表單中單選按鈕的示例。
<!DOCTYPE html>
<html>
<head>
<title> Simple form with radio buttons </title>
</head>
<body>
<form action= "" method= "GET">
<h4> Choose your age group </h4>
<label>
<input type= "radio" name= "age" value= "children">0-17
</label>
<br>
<label>
<input type= "radio" name= "age" value= "young">18-35
</label>
<br>
<label>
<input type= "radio" name= "age" value= "middle-aged">36-55
</label>
<br>
<label>
<input type= "radio" name= "age" value= "old">56+
</label>
<br><br>
<input type= "submit" onclick= "acknowledge()">
</form>
<script>
function acknowledge(){
alert(" The form has been submitted successfully. ")
}
</script>
</body>
</html>
可以看出，即使不從選項列表中選擇單選按鈕，也可以提交表單。我們可以透過在單選輸入上使用“required”屬性來解決此問題。
在單選輸入欄位中使用“required”屬性
為所有輸入設定required屬性似乎更明顯，但這是不必要的（如果我們不必動態生成單選按鈕）。為了分組單選按鈕，它們都應該具有相同的 name 屬性值。這使我們能夠一次只選擇一個單選按鈕，並將必要的屬性應用於整個組。讓我們來看一個相同的例子。
示例
在這個例子中，我們建立一個帶有單選輸入的表單，並將 required 屬性應用於單選輸入欄位。
<!DOCTYPE html>
<html>
<head>
<title> How to Use the "required" Attribute with the Radio Input Field </title>
<style>
form{
width: 550px;
margin: 10px;
background-color: lemonchiffon;
color: indigo;
font-size: 18px;
}
input{
margin: 10px;
}
#btn{
width: 60px;
height: 30px;
background-color: thistle;
color: azure;
font-weight: bold;
border: 0;
}
#btn:hover{
background-color: indigo;
}
</style>
</head>
<body>
<h3> Choose the correct answer </h3>
<form action= "" method= "GET">
<label>
<input type= "radio" name= "answer" value= "1" required>Java is a low-level language.
</label>
<br>
<label>
<input type= "radio" name= "answer" value= "2">Python does not support object-oriented programming.
</label>
<br>
<label>
<input type= "radio" name= "answer" value= "3">C is one of the most common and widely used programming languages.
</label>
<br>
<label>
<input type= "radio" name= "answer" value= "4">C is the preferred language for competitive programming.
</label>
<br>
<input type= "submit" id= "btn">
</form>
</body>
</html>
當用戶嘗試在不選中單選按鈕的情況下提交表單時，required 屬性會生成警告訊息並阻止表單提交。
2K+ 次瀏覽
