# DAY14 - 表單元素: radio、checkbox

### 單選元素 / radio:

#### 一般輸入方式: `input:radio` 展開，適合作為單選題/選項作為使用。

- 範例程式碼:

1. `name`: 意思為同一個題目/群組內的**選項之一**
2. `value`: 該選項被傳送到後端的實際輸出值。

    <form action="index.html">
      <label for="">你支持的隊伍：</label>
      <input type="radio" name="teams" value="guardians" />富邦悍將
      <input type="radio" name="teams" value="brothers" />中信兄弟
      <input type="submit" value="送出" />
    </form>

---

### 複選元素 / checkbox:

#### 有別於上面的單選題，如想製作一個複選的功能該如何做呢?

- CSS 效果、br 標籤可省略: 其屬性運用與 radio 類似

1. `input:checkbox` 展開

2. `name`: 意思為同一個題目/群組內的**選項之一**
3. `value`: 該選項被傳送到後端的實際輸出值。

      <p>
        你希望下一個看到的
        <span style="color: red; font-weight: bold">Thank you</span> 對象:
      </p>
      <input type="checkbox" name="member" value="mr1" /> 林校長
      <input type="checkbox" name="member" value="mr2" /> 丘西瓜
      <input type="checkbox" name="member" value="mr3" /> 陳鋒瓜
      <input type="checkbox" name="member" value="mr4" /> 郭顧問

      <br />

      <br />
      <input type="submit" value="送出" />
    </form>


###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 排版-table 篇`