表單元素的 name 屬性

input 的 name 屬性也是初學時比較不了解的，input 中的 name 屬性主要用於讓輸入的資料能傳送到後端伺服器(server)，提交表單時，只有具 name 屬性的元素才能隨著使用者輸入的資料一起傳送到伺服器

通常每個 input 的 name 屬性值會是不同的，這樣才能確保資料都能被傳送不會被覆蓋

<input type="text" id="fname" name="fname">
<input type="text" id="lname" name="lname">

多選的 checkbox，若選項不相關，每個選項的 name 屬性值可不相同，若選項是相關的，每個選項的 name 屬性值同

  <input type="checkbox" id="coding" name="interest" value="coding">
  <label for="coding">Coding</label>
  <input type="checkbox" id="music" name="interest" value="music">
  <label for="music">Music</label>

有多個選項，但只能單選的 radio，每個選項的 name 屬性值需相同

<input type=“radio” id=“male” name=“gender” value=“male”>
<label for=“male”>Male</label><br>
<input type=“radio” id=“female” name=“gender” value=“female”>
<label for=“female”>Female</label><br>
<input type=“radio” id=“other” name=“gender” value=“other”>

for 屬性與 id 屬性

label 和 input 使用 for 和 id 屬性讓使用者點擊 label 的內容時，對應的表單元素（如 input）會提示使用者輸入的地方或選項

示意範例

參考資料：
基本表單應用
input type ="checkbox"