KompoZer 製作表單

KompoZer 製作表單 - (純文字介紹) 在製作表單之前請務必先學習上一項(準備工作)環境內的取得網頁程式碼，以利完成聯絡我們表單後可以順利測試。 表單製作 HTML 語法，請參考網頁研習室 - HTML 教學第三篇 HTML 教學 - 09.網頁表單 Go 。 滑鼠放於第三列第一欄，輸入或貼上你計劃好的文字，如：真實姓名。 滑鼠放於第三列第二欄，開始表單各種欄位的製作： 按功能表列：插入表單表單欄位跳出表單欄位屬性視窗。 或按工具列：按表單圖示表單欄位跳出表單欄位屬性視窗。 欄位型態：計有文字、密碼、勾選方塊、單選園鈕、提交按鈕、重置按鈕、檔案、隱藏、、圖片、按鈕等10個選項。 欄位型態：選文字、欄位名稱：填入文字，如：訪客姓名、初始值：空白、欄位大小：填入 12、最大長度：填入 12。 注意：你可以使用滑鼠於編輯區左測調整資料格大小，以適合你的需要。 接下來製作性別(單選園鈕)、詢問問題(勾選方塊)、聯絡電話(文字)、電子信箱(文字)，操作方式與上面類似(部份省略)。 滑鼠放於第三列第三欄，輸入或貼上你計劃好的文字，如：性別。 滑鼠放於第三列第四欄，按功能表列：插入表單表單欄位跳出表單欄位屬性視窗。 欄位型態：選單選園鈕、欄位名稱：填入性別文字、初始值：男生按確定再單選園鈕後面輸入男生完成第一個訪客性別表單製作。 在男生後面，請比照男生再製作一個女生單選園鈕。 注意：這裡的欄位名稱：一定要填寫一樣的文字內容：性別，否則無法產生單選功能喔。 滑鼠放於第四列，輸入或貼上你計劃好的文字，如：詢問問題。 滑鼠放於詢問問題：後，按功能表列：插入表單表單欄位跳出表單欄位屬性視窗。 欄位型態：選單選勾選方塊、欄位名稱：填入詢問問題1文字、欄位值：產品問題按確定。 在勾選方塊後輸入產品問題完成第一個詢問問題表單製作。 在產品問題後面，請比照產品問題自己再完成第二個(詢問問題2、欄位值：網頁問題)、 第三個(詢問問題3、欄位值：網站問題)及第四個(詢問問題4、欄位值：其他問題 )等製作。 注意：這裡的欄位名稱：為利區別及欄位偵測，建議按順序詢問問題1∼詢問問題4填入，如果採用一樣也不會影響送出會結果。 滑鼠放於第五列第一欄，輸入或貼上你計劃好的文字，如：聯絡電話。 滑鼠放於第五列第二欄，按功能表列：插入表單表單欄位跳出表單欄位屬性視窗。 或按工具列：(略) 欄位型態：選單選文字、欄位名稱：填入聯絡電話文字、初始值：空白、欄位大小：填入 12、最大長度：填入 15按確定完成聯絡電話表單製作。 滑鼠放於第五列第三欄，輸入或貼上你計劃好的文字，如：聯絡時間。 滑鼠放於第五列第四欄，按功能表列：插入表單選選項列表跳出選項列表屬性視窗。 或按工具列：(略) 列表名稱：填入聯絡時間文字按增加選項、文字：填入早上文字、值：會同時自動產生早上再按增加選項。 請依此自行完成下午、晚上、列假日、任何時段等建立確定無誤後按確定完成聯絡時間表單製作。 注意：你可以使用滑鼠於編輯區左測調整資料格大小，以適合你的需要。 滑鼠放於第六列，輸入或貼上你計劃好的文字，如：電子信箱。 滑鼠放於電子信箱：後，按功能表列：插入表單表單欄位跳出表單欄位屬性視窗。 或按工具列：(略) 欄位型態：選單選文字、欄位名稱：填入 email 文字、初始值：請輸入正確的電子信箱、欄位大小：填入 30、最大長度：填入 35。 按確定完成電子信箱表單製作。 注意：這裡的欄位名稱務必要填寫 email 文字，以配合程式對映值。 滑鼠放於第七列，輸入或貼上你計劃好的文字，如：諮詢事項。 滑鼠放於諮詢事項：後，按功能表列：插入表單文字區域跳出文字區域屬性視窗。 或按工具列：(略) 欄位名稱：填入諮詢事項文字、列：填入 5、欄：填入 85按確定完成諮詢事項表單製作。 滑鼠放於第八列，按功能表列：插入表單表單欄位跳出表單欄位屬性視窗。 或按工具列：(略) 欄位型態：選單選提交按鈕、欄位名稱：可以空白或填入 submit、欄位值：請輸入確定送出按確定完成送出按鈕製作。 此時送出按鈕應該沒有置中？按一下按工具列上置中對齊圖示即可。 到此為止，基本上該有的都已完成，剩下的就是排版美工了，請自己練習！ 按存檔瀏覽完成。 最後我加上簡單的 JavaScript 偵測欄位程式，完成這個表單，測試看看吧！ 測試完成作品 本報導內容或資料，因限人力、時間，非教學會員，不接受任何使用上的教學與指導，敬請見諒。 如果你喜歡這篇辛苦蒐集整理出來的報導資料，歡迎原文轉載並註明出處，以示尊重個人智慧財產，謝謝你的合作。 如果你願意於貴站或部落格中介紹本站，歡迎使用複製網頁研習室連結語法，再次感謝你的支持與愛護。 版權所有 - 網頁研習室 - 李文能于 100 年 09 月 30 日整理