臺北企業在外貿詢價表顯示既選型號,卻發現接收資料沒有型號,應先檢查該欄位的實際狀態。畫面不能編輯,可能是唯讀,也可能是停用;兩者對焦點及表單資料的行為不同。以下針對原生HTML欄位示範,不能直接推斷自訂外掛用了相同提交方式。

先看最小離線樣例

<form id="demo-form">
  <label for="a">停用示意型號</label>
  <input id="a" name="disabled_model" value="DEMO-A" disabled>
  <label for="b">唯讀示意型號</label>
  <input id="b" name="readonly_model" value="DEMO-B" readonly>
</form>
<script>
const form = document.getElementById("demo-form");
console.log([...new FormData(form).entries()]);
</script>

依這個樣例,停用的欄位不會出現在FormData資料中,具名稱的唯讀文字欄位則會保留。MDN同時說明唯讀欄位仍可取得焦點,停用欄位不能。若專案自行用JavaScript組合JSON,則要核對該程式實際選取哪些值,不能用原生FormData的行為代替程式審查。

比較的是行為,不是字色

本例文字輸入欄位的差異
事項disabledreadonly
一般使用者直接編輯不允許不允許
取得焦點不能仍可
原生表單資料不包含停用欄位具名稱且符合條件的欄位可包含
是否所有控制元件都適用仍需看具體元素及狀態不是所有元素支援,例如select沒有此屬性

修正前,先對照接收需求

  1. 記錄目前元素、名稱、狀態與實際組裝資料的方法。
  2. 用受控的示意值核對提交前的資料,不送出真實客戶需求。
  3. 確認未啟用選項與固定顯示資訊各有明確用途。
  4. 由伺服器核對允許的物件及必要條件。
  5. 復測鍵盤焦點、畫面說明與接收結果是否一致。
1元素辨認原生或自訂控制元件。
2資料看實際提交包含甚麼。
3驗證後端按規則確認。
4回饋準確說明接受或缺失。
從畫面追到接收
把文字變灰就算停用了嗎?

不是。樣式與元素狀態不同,必須檢視實際屬性和行為。

加required可以強制唯讀欄有內容嗎?

MDN說明readonly輸入不按一般required方式參與此約束;必要資料仍應由正確的程式與伺服器規則保障。