10 個實用卻冷門的 HTML 技巧

雖然 HTML 學起來很簡單，但卻有很多實用的技巧被忽略，這些技巧可以讓你更輕鬆地實現特定的功能和效果。

今天介紹 10 個你可能不熟悉，但非常有用的 HTML 標籤及其應用示例，分別是：

1. <details> & <summary> 建立可折疊內容
2. <fieldset> & <legent> 組織表單元素
3. <optgroup> 分類下拉選單
4. <video> poster 屬性
5. multiple 多選屬性
6. download 下載連結
7. contenteditable 可編輯屬性
8. title 屬性顯示補充內容
9. <dialog> 標籤創造 modal
10. <datalist> 提供 input 選項建議

1. 建立可折疊的內容 - <details> 與 <summary>

<details> 可以讓你建立可折疊和展開的內容，和 <summary> 一起使用就能製作標題。

<details>
  <summary>點擊以展開</summary>
  <p>這段內容可以展開或折疊。</p>
</details>

這個標籤非常適合用來顯示 FAQ 或需要隱藏的附加信息。

可惜的是他沒辦法有 transition，只能用 height 或 grid-template-rows 來製作 animation

2. 組織表單元素 - <fieldset> 與 <legend>

<fieldset> 可以將表單元素進行分組，而 <legend> 則為這些分組提供標題。這有助於提高表單的可讀性和可用性。

<form action="http://example.com/adduser" method="post">
   <fieldset>
     <legend>居住地址：</legend>
     <label for="raddress">地址: </label>
     <input type="text" id="raddress" name="raddress" />
     <label for="rzip">郵遞區號: </label>
     <input type="text" id="rzip" name="rzip" />
   </fieldset>
   <fieldset>
     <legend>寄送地址</legend>
     <label for="paddress">地址: </label>
     <input type="text" id="paddress" ame="paddress" />
     <label for="pzip">郵遞區號： </label>
     <input type="text" id="pzip" name="pzip" />
   </fieldset>
</form>

3. 分類下拉選單 - <optgroup>

<optgroup> 可以用來為 <select> 下拉選單中的選項進行分組，從而使選單更具結構性，方便使用者瀏覽。

<select>
  <option value="" disabled selected>Choose Your Favorite</option>
  <hr />
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
    <option value="spinach">Spinach</option>
  </optgroup>
  <optgroup label="Dairy">
    <option value="milk">Milk</option>
    <option value="cheese">Cheese</option>
    <option value="yogurt">Yogurt</option>
  </optgroup>
</select>

4. 設置影片封面 - poster

使用 <video> 來播放影片時，可以設置 poster 屬性來顯示預覽圖。這個標籤可以客製預覽圖來提供更好的使用者體驗

<video controls poster="image.png">
  <source src="video.mp4" type="video/mp4" />
</video>

5. 支持多選功能 - multiple

multiple 屬性可以應用在 <input type="file"> 和 <select> 標籤上，允許使用者一次選擇多個項目。

<input type="file" multiple />

<input type="file" accept="image/png, image/jpeg" />

而在 select 上 multiple 可以搭配 size 屬性來控制一次要顯示幾個選項

<select multiple size="14">
  <option value="" disabled selected>Choose Your Favorite</option>
  <hr />
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
    <option value="spinach">Spinach</option>
  </optgroup>
  <optgroup label="Dairy">
    <option value="milk">Milk</option>
    <option value="cheese">Cheese</option>
    <option value="yogurt">Yogurt</option>
  </optgroup>
</select>

並且用 JS 獲取選的內容。

multipleSelect.addEventListener('change', (e) => {
  const selectedValues = Array.from(multipleSelect.selectedOptions).map(
    (option) => option.value
  );
  selected.innerHTML = selectedValues.join(', ');
});

6. 創建下載連結 - <a download>

<a> 標籤中的 download 屬性允許使用者直接下載文件，而 download 後面的值是下載下來的檔案名稱。

<a href="document.pdf" download="document.pdf">下載 PDF</a>

7. 啟用內容編輯 - contenteditable

contenteditable 屬性可以讓任何元素變成可編輯的，這樣使用者可以直接在頁面上編輯內容。

<div contenteditable="true">
   你可以編輯這段內容。
</div>

8. 顯示補充資訊 - title 屬性

title 屬性可以讓用戶的鼠標停在元素上時，顯示想補充的額外資訊。

這有助於提供額外的上下文信息而不佔用過多空間。

<p title="This.Web">
  我是誰？
</p>

在縮詞時，推薦使用 abbr 會更符合語意:

<abbr title="World Health Organization">WHO</abbr>

9. 顯示對話框 - <dialog>

<dialog> 可以用來顯示 Modal，並通過 open 屬性來控制它是否可見。

<dialog open>
	<p>這是一條一次性消息。點擊按鈕關閉。</p>
	<form method="dialog">
		<button>確定</button>
	</form>
</dialog>

適合用來提示重要信息或跳出通知。我們也能用 JS 簡單控制開啟和關閉

<dialog id="myDialog">
	<p>這是一條一次性消息。點擊按鈕關閉。</p>
	<form method="dialog">
		<button>確定</button>
	</form>
</dialog>

<button onclick="openDialog()">Open Dialog</button>
<button onclick="closeDialog()">close Dialog</button>

function openDialog() {
  document.getElementById('myDialog').showModal();
}

function closeDialog() {
  document.getElementById('myDialog').close();
}

可以用 dialog[open] 來判斷是否有 dialog 是顯示的狀態，並讓頁面禁止滾動。

body:has(dialog[open]) {
  overflow: hidden;
}

也能利用 backdrop 控制背景顏色

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

10. 提供選項建議 - <datalist>

<datalist> 可以為 <input> 提供建議選項，當使用者輸入時，會顯示相對的選項列表。

在某些簡單的場合，也可以當作一個基本的搜尋功能。

<form action="/action_page.php" method="get">
  <label for="browser">從列表中選擇你的瀏覽器:</label>
  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit">
</form>

小結

今天介紹的十個 HTML 標籤和屬性，雖然不是非常常用，但是在某些場合可以快速解決需求，算是冷門但實用的技巧。

今天就這樣，希望這篇文章有幫助到你～