HTML 與 核心差異與選擇指南

雖然 `` 和 `` 在視覺上均渲染為按鈕，且都能觸發 JavaScript 事件，但它們在**內容承載能力、表單提交行為、樣式靈活性、語義化**等方面存在本質差異。本文詳細對比，助你做正確選擇。

核心差異對比表

特性	<button>	<input type="button">
內容模型	容器標籤：可包含文字、圖片 ``、圖標 ``、甚至其他行內元素 (如 ``, ``)	空元素：無法包含任何子內容，僅能通過 value 屬性顯示純文字
HTML 結構	<button>內容</button> (雙標籤)	<input type="button" value="文字" /> (單標籤/自閉合)
表單提交行為	在 ` ` 中**預設為 `type="submit"`**，會提交表單。 若不想提交，**必須顯式寫 `type="button"`**	永遠**不提交表單** (除非配合 JS 手動 submit)
value 屬性提交	若有 name 和 value，**提交時會發送 `name=value`**	同樣發送 `name=value`，但內容固定為 value 字串
CSS 樣式靈活度	極高：可對內部子元素單獨樣式，支援 `::before`/`::after` 偽元素，圖文混排簡單	受限：僅能樣式化按鈕整體，無法對內部文字/圖標獨立控制，偽元素在部分瀏覽器不生效
無障礙/語義化	原生語義為「按鈕」，螢幕閱讀器友好，內容即標籤文本	語義同為按鈕，但依賴 `value` 屬性作為可訪問名稱
瀏覽器相容性	IE8+ 完美支援；IE6/7 有 Bug (提交表單時發送 innerHTML 而非 value)，極少見	所有瀏覽器完美支援

代碼示例

<button>：豐富內容、圖文混排

<button type="button" class="btn-primary">
    <svg class="icon"><use xlink:href="#icon-search"></use></svg>
    <span>搜尋</span>
    <span class="badge">3</span>
</button>

<input type="button">：純文字、簡單動作

<input type="button" value="取消" class="btn-secondary" onclick="closeDialog()" />

選擇建議

1. 現代 Web 開發首選 <button>：語義更清晰、支援圖文混排、偽元素動畫、無障礙更好。記得在表單外或不想提交時寫 `type="button"`。
2. 僅需純文字按鈕、極簡場景、或需相容極舊環境：`` 依然可用。
3. 表單提交按鈕：`

提交` 或 `` 二選一，前者更彈性。

常見坑點提醒

• 忘寫 `type="button"`：在 `` 中 `` 預設提交表單，導致頁面跳轉或驗證觸發。
• IE 早期版本提交 value 問題：IE6/7 提交 `Delete` 時發送 `act=Delete` (innerHTML) 而非 `act=del` (value)。現代項目可忽略。
• CSS `appearance: none`：兩者重置預設樣式時均需加此屬性 (含前綴)。

總結

<button> 是功能超集：它能做 `` 的一切，並提供更豐富的內容、樣式與語義能力。除非有極特殊相容需求，**現代項目建議統一使用 ``** 作為非提交按鈕，`` 作為提交按鈕。