核取方塊和單選按鈕
概述
核取方塊和單選按鈕使用 HTML 標記 <input> 編寫，其行為在 HTML 規範中定義。
最簡單的核取方塊或單選按鈕是 <input> 元素，type 屬性分別為 checkbox 或 radio：
<input type="checkbox">
<input type="radio">
單個獨立的核取方塊元素用於單個二元期權，例如是或否問題。核取方塊是獨立的，這意味著使用者可以在一組核取方塊中選擇儘可能多的選項。換句話說，檢查一個核取方塊並沒有取消選中核取方塊組其他核取方塊。
單選按鈕通常分組（如果它沒有與另一個單選按鈕分組，你可能意味著使用核取方塊），通過在該組中的所有按鈕上使用相同的 name 屬性來識別。單選按鈕的選擇是互斥的，這意味著使用者只能從一組單選按鈕中選擇一個選項。選中單選按鈕時，之前檢查過的具有相同 name 的任何其他單選按鈕都將取消選中。
例：
<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">
檢視時，單選按鈕顯示為圓圈（未選中）或填充圓圈（選中）。核取方塊顯示為正方形（未選中）或填充正方形（已選中）。根據瀏覽器和作業系統的不同，正方形有時會有圓角。
屬性
核取方塊和單選按鈕具有許多屬性來控制其行為：
value
與任何其他輸入元素一樣，value 屬性指定在表單提交時與按鈕關聯的字串值。但是，核取方塊和單選按鈕的特殊之處在於，當省略該值時，它在提交時預設為 on，而不是傳送空值。value 屬性未反映在按鈕的外觀中。
checked
checked 屬性指定核取方塊或單選按鈕的初始狀態。這是一個布林屬性，可以省略。
其中每個都是有效的，等效的方法來定義一個選中的單選按鈕：
<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">
缺少 checked 屬性是未經檢查按鈕的唯一有效語法：
<input type="radio">
<input type="checkbox">
重置 <form> 時，核取方塊和單選按鈕將恢復為 checked 屬性的狀態。
無障礙
標籤
為了給按鈕提供上下文並向使用者顯示每個按鈕的用途，每個按鈕都應該有一個標籤。這可以使用 <label> 元素來包裹按鈕。此外，這使標籤可以點選，因此你選擇相應的按鈕。
例：
<label>
<input type="radio" name="color" value="#F00">
Red
</label>
或者使用 <label> 元素並將 for 屬性設定為按鈕的 id 屬性：
<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>
按鈕組
由於每個單選按鈕影響組中的其他單選按鈕，因此通常為整組單選按鈕提供標籤或上下文。
要為整個組提供標籤，單選按鈕應包含在 <fieldset> 元素中，其中包含 <legend> 元素。
例：
<fieldset>
<legend>Theme color:</legend>
<p>
<input type="radio" name="color" id="red" value="#F00">
<label for="red">Red</label>
</p>
<p>
<input type="radio" name="color" id="green" value="#0F0">
<label for="green">Green</label>
</p>
<p>
<input type="radio" name="color" id="blue" value="#00F">
<label for="blue">Blue</label>
</p>
</fieldset>
核取方塊也可以以類似的方式分組，其中欄位集和圖例標識相關核取方塊組。但是，請記住，核取方塊應該沒有，因為他們不是相互排斥的相同的名稱。這樣做會導致表單為同一個鍵提交多個值，而不是所有伺服器端語言都以相同的方式處理它（未定義的行為）。每個核取方塊應具有唯一的名稱，或使用一組方括號（[]）來指示表單應提交該鍵的值陣列。你選擇哪種方法取決於你計劃如何處理表單資料客戶端或伺服器端。你還應該簡短地保留圖例，因為瀏覽器和螢幕閱讀器的某些組合會在欄位集中的每個輸入欄位之前讀取圖例。