【筆記】HTML5 中 5 個好用但不常被發現的功能

本文依據
Amazing HTML5 Features That Just 3% of Developers Knows — Easy and Surprising (The top 5 amazing and hidden features of HTML5) 而來，詳細內容可看該文。

1. 使用 「auto-complete」（自動完成）

在使用 <input type="text"> </input> 做文字輸入時，可以配合 <datalist> </datalist> 將一些專有名詞，或是常用名詞建檔，這樣在輸入時，這些名詞會自動出現，讓使用者可以加快輸入速度。

例如：

<h5>請輸入你所去過的行政區域：</h5>
<input type="text" list="auto-complete">
<datalist id="auto-complete">
    <option value="三民區"></option>
    <option value="旗津區"></option>
    <option value="前鎮區"></option>
    <option value="苓雅區"></option>
    <option value="左營區"></option>
    <option value="鼓山區"></option>
</datalist>

執行結果：

請輸入你所去過的行政區域：




可以「直接打字」，也可以點一下，然後便會出現選項，便於使用者節省輸入時間。

---

2. 使用 「accept」

在使用 <input type=”file” > </input> 讓使用者檔案上傳時，可以利用 accept 允許使用者可以上傳的檔案格式。

例如，僅允許上傳 pdf 檔時：

 <input type="file" accept=".pdf" > 

執行結果：

瀏覽檔案時，僅會看見 pdf 檔

---

又，例如，僅允許上傳 jpg, png 圖檔時：

 <input type="file" accept=".jpg, .png" > 

執行結果：

瀏覽檔案時，僅會看見 jpg 和 png 檔

---

3. 配合 <details> </details> 中使用 <summary> </summary>

例如

  <details>
      <summary>更多...</summary> 
    高雄市三民區是原高雄市行政區域中最大的行政區域，........
  </details>

執行結果：(點一下「更多」)

更多…

高雄市三民區是原高雄市行政區域中最大的行政區域，……..


點一下「更多」後，便會看見更詳盡的說明了。

---

4. <metter> </metter> 顯示刻度圖

簡單說，如果全部有 100 , 目前持有了 60 ！

<label>目前持有量是 60 ：</label>
  <meter value="60" max="100">  </meter>

執行結果：

目前持有量是 60：


 

---

5. <progress> </progress> 顯示進度

簡單說，用法和 meter 很類似。若全部為 100 , 目前進度為 47 ！

<label>目前進度為 47：</label>
  <progress value="47" max="100">  </progress>

執行結果：

目前進度為 47：