HTML5：如何在「無線電」輸入字段中使用「必需」屬性

247

我只是想知道如何在單選按鈕上以正確的方式使用新的HTML5輸入屬性「required」。每個單選按鈕字段都需要像下面這樣的屬性嗎？或者只有一個領域得到它就足夠了？HTML5：如何在「無線電」輸入字段中使用「必需」屬性

<input type="radio" name="color" value="black" required="required" /> 
<input type="radio" name="color" value="white" required="required" />

來源

2011-11-27 nerdess

418

設置required屬性用於無線電組中的至少一個輸入。

設置required對於所有輸入更加清晰，但不是必要的（除非動態地生成無線電按鈕）。

要組合單選按鈕，它們必須都具有相同的name值。這允許一次僅選擇一個，並將required應用於整個組。

<form> 
 
    Select Gender: 
 

 
    <label><input type="radio" name="gender" value="male" required>Male</label> 
 

 
    <label><input type="radio" name="gender" value="female">Female</label> 
 

 
    <input type="submit"> 
 
</form>

還注意到：

爲了避免混亂，是否需要不是一個單選按鈕組，鼓勵作者在所有無線電指定屬性一組中的按鈕。的確，一般來說，鼓勵作者避免使用單選按鈕組，因爲這是用戶無法返回的狀態，因此通常被認爲是糟糕的用戶界面。

Source

來源

2011-11-27 18:31:12 Seybsen

+43

你需要記住的很重要的一點是，無線電和複選框，輸入由**姓名**屬性進行分組，以取代display:none。因此，對任何一個輸入（具有相同名稱的一組輸入之間）進行設置將會起作用。另一方面，如果你錯過了** name **屬性，它將不會像你期望的那樣工作。 –

@kumar_harsh非常好的一點。忽略名稱的典型例子是使用Angular ng-model代替。 –

@kumar_harsh「包含輸入元素a的單選按鈕組還包含滿足以下所有條件的所有其他輸入元素b」（4）http://www.w3.org/TR/html5/forms.html ＃radio-button-group –

嘗試這個...

<form> 
     <input type="radio" name="color" value="black" required /> 
     <input type="radio" name="color" value="white" /> 

     <input type="submit" value="Click Here" /> 
</form>

Find JSFIDDLE

來源

2013-12-03 05:19:52 Vijay

如果你的單選按鈕已經被定製，例如單選按鈕的原始圖標已隱藏通過css display:none，這樣你可以創建自己的單選按鈕，那麼你可能會得到錯誤。

解決它的方法是用opacity:0

來源

2017-09-13 12:40:39 james

HTML5：如何在「無線電」輸入字段中使用「必需」屬性

回答

相關問題