# HTML 9. input type - checkbox and value

### 勾選圖示:

- `input type =""`

根據`""`裡面的內容，所產生的功能也有所不同

例如以下的 `tpye = "text"`

就是產生一個文字型態的欄位可以輸入內容:


 <input id="inputTel" name="checkTel" type="text" />

- [搜尋 input type MdN Related Topics 會有很多相關資訊](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input)

---

### checkbox 是什麼?

- 以下範例:

      <input type="checkbox" value="" name="" id="" />
      <label for="">訂閱熊貓電子報</label>


- 記得可以善用 `label for` & i`nput id` 來加強使用者之互動體驗

---

### 初次送出 checkbox 會發現沒有成功傳送至後端的原因:

- 假設這是我們目前的 HTML:

    <h1>輸入聯絡方式</h1>
    <form action="" method="get">
      <label for="inputName">姓名:</label>
      <input id="inputName" name="checkName" type="text" />
      <br />
      <label for="inputTel">電話:</label>
      <input id="inputTel" name="checkTel" type="text" />
      <br />
      <input type="checkbox" value="" name="news" id="checkpaper" />
      <label for="checkpaper">訂閱熊貓電子報</label>
      <br />
      <button type="submit">送出</button>
    </form>


- 我們依序輸入了內容，並且打勾按下送出，這時候可以觀察我們的 `URL`

我們的: checkbox

`name="news"`，= 後面帶出的是空值


---

### check box 沒有預設的 value:

- value，可以參考前面的輸入框: `input:text` 輸入欄位

我們在裡頭輸入文字，並且在 input:text 標籤也設定好 name，如此一來，輸入匡裡頭的文字就會形成一個 `value`，並且傳送到後端去。

- 但是 checkbox 並沒有這個 `value`

故，我們需要自行先預設好，它才能更夠正確的 send 出去：

<input type="checkbox" value="newspaper" name="news" id="checkpaper" />

- 然後再測試一次 `sumbit`，這下正常了!


### checkbox 自動打勾語法: checked

    <input
        checked
        type="checkbox"
        value="newspaper"
        name="news"
        id="checkpaper"
      />

###### tags: `2022 網頁開發全攻略教程`