HTML教程

報價表上的客戶編號明明看得到，送到後端卻沒有這個欄位。把驗證規則改了幾次，仍然收到「編號必填」。這時先看表單怎麼組成送出的資料：欄位若設成 disabled，瀏覽器會把它排除；畫面顯示的值，不一定在請求裡。 若你的意思是「讓人看得到，不能直接修改，但仍要隨表單送出」，支援唯讀的文字欄位可以用 readonly。兩個屬性外觀可能相近，處理資料的方式卻不同。先確認請求內容，才知道該修畫面、送出程式，還是後端。 先用一張小表單看出差別 以下例子有四個文字欄位：一般欄位、停用欄位、唯讀欄位，以及沒有名稱的欄位。把它放在本機 HTML 檔，用瀏覽器開啟，再從開發者工具的 Console 執行後面的 JavaScript。這個例子只建立資料，不會傳到伺服器。 <form id="quote"> <input name="customer" value="Ada"> <input name="account" value="A17" disabled> <input name="reference" value="R42" readonly> <input value="visible-but-unnamed"> <input type="hidden" name="plan" value="basic"> </form> const form = document.querySelector('#quote'); const data = new FormData(form); console.log([...data.entries()]); 結果包含 customer= Ada、reference= R42 與 plan= basic，沒有 account，也沒有最後那個未命名文字欄位。停用欄位即使有值、有名稱，仍被略過；唯讀文字欄位則照常加入。沒有 name 的控制項沒有送出鍵名，也不能靠 id 補上。 這裡的空格只是文字展示方式，實際值分別是 Ada、R42、basic。不要用肉眼看輸入框是否有字來判斷資料是否送出，直接查看 FormData 的 entries，或在 Network 面板查看真正的請求，會更可靠。 disabled表示暫時不能使用，不只是不能修改 停用的原生表單控制項通常無法取得焦點，也不參與表單約束驗證。例如停用且帶有 required 的欄位，不會因為空值而擋住表單。這符合「目前不適用這個選項」的意思，卻不適合拿來鎖住仍需要送出的訂單編號。 停用也可能來自外層的 fieldset disabled。如果單看 input 沒有發現屬性，往上檢查父層；停用 fieldset 內的控制項通常一起受影響，其第一個 legend 子元素內的控制項有規格例外。不要只靠 CSS 灰色判斷，也不要把 disabled="false" 當成啟用：這是布林屬性，只要屬性存在，就代表停用。要恢復使用，移除屬性或把 DOM 的 disabled...

想在頁面上彈出配送說明、確認提示或設定視窗，不一定要先找一套彈窗插件。HTML 的 dialog 已經提供開啟、關閉與模態行為；比較容易漏掉的，是關閉按鈕、鍵盤操作和關閉後的焦點。 先分清：只是顯示，還是暫停操作背景？ show() 開啟非模態對話框，背景仍可操作。showModal() 則開啟模態對話框，讓背景暫時不可互動，並把對話框放到瀏覽器的頂層。若只是放一段常駐提示，不必用模態視窗打斷讀者。 直接寫 <dialog open> 只是顯示非模態對話框；不能把它當成 showModal() 的替代品。 一個可關閉的配送說明 下面的例子用普通按鈕開啟視窗。視窗內有標題與關閉按鈕，aria-labelledby 指向標題，讓對話框有可辨識的名稱。 <button id="openInfo" type="button">查看配送說明</button> <dialog id="info" aria-labelledby="infoTitle"> <h2 id="infoTitle">配送說明</h2> <p>範例商品會在三個工作天內安排出貨。</p> <form method="dialog"> <button autofocus>關閉說明</button> </form> </dialog> <script> const info = document.querySelector('#info'); document.querySelector('#openInfo').addEventListener('click', () => { info.showModal(); }); </script> method="dialog" 會關閉對話框，這個表單不會把資料提交到伺服器。範例的配送文字只是示例，實際站點應換成自己的說明。 配送說明開啟後，背景變暗，焦點落在關閉按鈕。 關閉與焦點，比外觀更早確認 先用鍵盤走一次：Tab 移到開啟按鈕，按 Enter 開啟；確認焦點進入視窗，按 Esc 關閉，再看焦點是否回到開啟按鈕。視窗內的關閉按鈕也要能操作，因為手機使用者未必有 Esc 鍵。 autofocus 應放在打開後最合理的控制項。本例沒有需要立即填寫的欄位，因此放在關閉按鈕；有表單時，第一個欄位或其他控制項可能更適合。不要在 dialog 元素上加 tabindex 來勉強取得焦點。 若視窗內容很長，限制它的最大高度並讓內容可捲動；手機上尤其要避免關閉按鈕跑到畫面外。背景點一下是否關閉則需要明確設計，不要假設所有對話框都會如此。 加上薄薄一層外觀即可 dialog { max-width: min(32rem, calc(100vw - 2rem)); } dialog::backdrop { background: rgb(0 0 0 / 45%);...