如何讓 HTML 按鈕充當連結

讓 HTML 控制項開啟 URL 的正確方式取決於它的用途。需要導覽時，使用帶有 href 的 <a> 元素，再用 CSS 將它設定成按鈕外觀。需要執行操作時使用 <button>，需要傳送表單資料時使用提交按鈕。不要把 <button> 或 <input> 放在 <a> 內部：它們都是互動元素，這樣巢狀會造成語意和鍵盤行為衝突。

根據結果選擇錨點或按鈕

當啟用控制項會改變位址、開啟文件、下載檔案或前往其他頁面時，應使用錨點。href 提供真實目標，因此使用者可以在新分頁開啟、複製位址、加入書籤，也可以使用鍵盤存取。

當控制項修改目前頁面、開啟對話方塊或面板，或者執行指令碼時，使用 <button type="button">。控制項看起來像矩形按鈕，並不代表它就是連結。元素的角色應與實際行為一致。

將 <a> 設定成按鈕外觀以進行導覽

如果控制項只負責導覽，這是建議的方法。把目標放在 href 中，使用有意義的連結文字，並提供明顯的焦點樣式。將 /docs/ 替換為實際目標。

<a class="button-link" href="/docs/">Open the documentation</a>

.button-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 0.35rem;
  background: #1769aa;
  color: #fff;
  text-decoration: none;
}

.button-link:hover {
  background: #0d4f80;
}

.button-link:focus-visible {
  outline: 3px solid #f5b700;
  outline-offset: 2px;
}

結果看起來像按鈕，但仍然是連結。按 Enter 可以啟用它，瀏覽器也能識別其目標。如果要在新分頁開啟，請在文字中說明：

<a href="https://example.com/docs" target="_blank" rel="noopener">
  Open the documentation (new tab)
</a>

不要使用 href="#" 或 href="javascript:void(0)" 來模擬按鈕。這些值不是真實目標，可能導致捲動和書籤行為異常。href 可以是相對路徑、絕對 HTTPS URL、片段或其他可定址 URL。CSS 只改變外觀，不會移除連結的原生功能。

只有確實需要按鈕操作時才使用 <button> 和 JavaScript

如果導覽前必須檢查狀態或執行其他操作，可以保留 button。指定類型，並使用 addEventListener 註冊監聽器；window.location.assign() 負責導覽。

<button type="button" id="docs-button">Open the documentation</button>

<script>
  document.querySelector("#docs-button").addEventListener("click", () => {
    window.location.assign("https://example.com/docs");
  });
</script>

此範例可以透過指標、Enter 和 Space 啟用，但依賴 JavaScript。一般導覽應優先使用錨點，因為停用 JavaScript 時它仍然可用。在較大的應用程式中，應將監聽器放在模組中，而不是使用內嵌 onclick。空的或錯誤的目標 URL 是邊界情況，呼叫 assign() 前應驗證動態值。

傳送資料時使用表單

如果伺服器需要接收欄位，請在表單的 action 中設定目標並使用提交控制項。這是表單提交，不是普通連結導覽。

<form action="/search" method="get">
  <label for="query">Search</label>
  <input id="query" name="q" type="search">
  <button type="submit">Search</button>
</form>

提交 CSS button 後，根據表單編碼可能產生 /search?q=CSS+button。不要為了按鈕外觀使用空表單。需要為某個 type="submit" 按鈕指定不同目標時，可以使用 formaction。

如果專案需要基於 value 的舊式控制項，<input type="submit"> 也有效：

<form action="/docs/" method="get">
  <input type="submit" value="Open the documentation">
</form>

value 會成為可見標籤。不要用錨點包裹這個 input。<input type="button"> 本身不會提交或導覽，需要指令碼才能工作。

排查按鈕無法開啟連結的問題

• 如果目的是導覽，標記應為 <a href="...">，即使 CSS 讓它看起來像按鈕。
• 表單中不提交的操作應指定 type="button"。省略類型可能變成 submit 並重新載入頁面。
• JavaScript button 無效時，檢查主控台、選取器和指令碼載入情況。停用 JavaScript 時 handler 不會執行。
• 保留 :focus-visible，讓鍵盤使用者知道目前焦點。
• 普通連結不要巢狀 <button> 或 <input>。

總之，導覽使用 <a href="...">，操作使用 <button type="button">，傳送資料時使用表單中的 submit button。這樣瀏覽器和輔助技術可以獲得可預測的語意。