HTML 中 Name 與 ID 的關係：從 Selenium 自動化測試談起

在 Web 開發與自動化測試中，document.getElementById() 與元素的 name 屬性是定位元素的兩大核心手段。本文從 Selenium IDE 錄製腳本切入，深入探討 HTML 表單中 Name 與 ID 的異同、用途與最佳實踐。

Selenium 實戰觀察

觀察 Selenium 錄製的 Google 搜尋腳本：

selenium.Type("q", "Selenium 介紹");
selenium.Click("btnG");

這裡的 "q" 與 "btnG" 分別對應搜尋輸入框與按鈕的 name 屬性。檢視頁面原始碼可見：

<input title="Google 搜尋" maxLength="2048" size="55" name="q" autocomplete="off" />
<input title="Google Search" maxLength="2048" size="55" name="btnG" autocomplete="off" />

Google 採用 name 而非 id 進行元素定位，對應 JavaScript 的 document.getElementsByName()。

Name 與 ID 的核心差異

關鍵結論

• Name 不可被 ID 完全取代：表單提交、同名分組、Target 指定等場景仍仰賴 Name。
• ID 是客戶端腳本與 CSS 選取的首選：唯一性保證了精準定位。
• ASP.NET 強制 ID 唯一：重複 ID 會導致編譯錯誤，這也是 UniqueID/ClientID 機制存在的原因之一。

最佳實踐建議

1. 表單輸入元素同時設定 id 與 name，id 供前端腳本/CSS 使用，name 供表單提交使用。
2. Radio/Checkbox 群組使用相同 name、不同 id。
3. 非表單元素（div、span 等）僅需 id。