HTML教程

想在頁面上彈出配送說明、確認提示或設定視窗，不一定要先找一套彈窗插件。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%);...

替網站加上聯絡表單，常會遇到兩個單選問題：訪客想用Email還是電話聯絡？需要挑選模板還是修改網站？如果選完需求，原本的聯絡方式卻被取消，先檢查兩組radio是不是用了同一個name。 同一組用相同name，不同問題要分開 瀏覽器用name判斷哪些radio互相排斥。聯絡方式共用contact，網站需求共用need；兩個name不同，就能各選一項。id則用來讓label對應到個別欄位，不能拿它代替分組。 <fieldset> <legend>希望怎麼聯絡？</legend> <label><input type="radio" name="contact" value="email" checked>Email</label> <label><input type="radio" name="contact" value="phone">電話</label> </fieldset> <fieldset> <legend>想處理什麼？</legend> <label><input type="radio" name="need" value="template" checked>挑選模板</label> <label><input type="radio" name="need" value="customize">修改網站</label> </fieldset>兩個問題分別保留一項選擇，訪客不用反覆重選。 點文字也能選，問題名稱要看得懂 把input放進label，訪客點「電話」文字也能選取。fieldset配合legend交代這組選項在問什麼，比把四個圓點排在一起清楚。先保留原生radio，再調整周圍間距；不要只畫一個好看的圓圈，卻失去鍵盤操作與選取狀態。 送出前看value，不只看畫面 這個例子選「電話」和「修改網站」，表單資料應是contact=phone、need=customize。顯示文字給人看，value才是收件程式讀到的值。沒有選取的radio群組不會出現在提交資料；若這個問題必答，可加入required，並在接收端再次確認允許的值。 radio只處理選擇，不會自己寄信。接到網站表單時，仍要另外接好接收、驗證與回覆訊息。你可以先在自己的測試頁切換兩組選項，再用Tab與方向鍵確認能操作，最後查看實際提交值是否各有一份。 參考資料 MDN：radio輸入欄位 MDN：fieldset與legend 資料核對於2026年10月3日；實際介面與文件可能更新。