（中職）Web前端設計基礎 項目五電子課件

1、YCF正版可修改PPT（中職）Web前端設計基礎 項目五電子課件網頁中的表單項目五授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結6.技能訓練一 項目描述本項目學習要點表單的高級應用；使用CSS樣式修飾表單。表單的作用和語法格式；表單中各元素的作用和語法格式；二 知識準備表單概述；表單高級元素。表單基本元素；表單其他元素；表單概述在HTML文檔中，使用表單可以收集用戶的相關信息，提交后的數(shù)據可以交付后臺進行處理，比如登錄界面、調查問卷、個人信息填寫等。表單的標簽為，其格式如下：表單概述其中各屬性的含義如表所示。屬性含義說明name表單

2、名稱為了區(qū)分多個表單，用該屬性給表單命名，以防止表單提交到后臺程序出現(xiàn)混亂。action表單提交地址用于指定表單數(shù)據提交到哪個地址進行處理或者以郵件形式發(fā)送到哪個郵箱。如：action=”form-action.asp”或者action=”mailto:415770947”method傳送方法指明提交表單的HTTP方法，取值為get或post，由于get方法安全性較低，所以大部分采用post的方法。target目標顯示方式目標窗口的打開位置，與超鏈接標簽一樣，有四個屬性值：_self：默認值，表示在當前的窗口打開頁面。_blank：表示在新的窗口打開頁面（常用）。_parent：表示在父級窗口

3、中打開頁面。_top：頁面載入到包含該鏈接的窗口，取代當前在窗口中的所有頁面。enctype編碼方式用于設置表單信息提交的編碼方式，有兩個值：application/x-www-form-urlencoded：默認的編碼方式。multipart/form-data：MIME編碼，對于“上傳文件”這種表單必須選擇該值。表單概述結合以上表單屬性的介紹，可以創(chuàng)建如圖所示的表單。第8、9行代碼為：這句代碼創(chuàng)建了一個表單，name=“form1”表示表單名稱為form1，action=”form-action.asp”表示提交表單后將數(shù)據交給form-action.asp文件來執(zhí)行，method=”po

4、st”表示傳送方法為post，target=”_blank”表示提交表單后在新的窗口打開頁面，enctype=”application/x-www-form-urlencoded”定義了表單信息提交時的編碼方式。表單概述也可以如圖所示創(chuàng)建表單。第8、9行代碼為：這句代碼中action=mailto:someone表示提交表單后將表單內容以郵件形式發(fā)送給someone。表單基本元素按照上面的方法創(chuàng)建的表單，在網頁上并沒有內容顯示，因為表單是一個包含表單元素的容器，只有通過插入各種表單元素，才能顯示不同的交互界面。標簽用于搜集用戶信息，通過設置不同的type屬性值，可以有很多類型，type屬性值如

5、表所示。type值含義說明text單行文本框用戶可在其中輸入簡短文本，默認寬度為 20 個字符。password密碼為了保證文本的安全性，該字段中的字符被掩碼，以點的形式顯示。checkbox復選框用戶在一組選項中可以選擇一項或多項。radio單選按鈕用戶在一組選項中只能選擇一項。button普通按鈕可點擊的按鈕，一般用于通過 JavaScript 啟動腳本。submit提交按鈕作用是把表單數(shù)據發(fā)送到服務器。reset重置按鈕作用是清除表單中的所有數(shù)據。image圖像域圖像形式的提交按鈕。file上傳按鈕定義輸入字段和瀏覽按鈕，供文件上傳。hidden隱藏字段需要提交數(shù)據又不顯示在瀏覽器中的表

6、單元素。表單基本元素【例5-1】制作一個登錄框實例，代碼如下所示（示例文件5-1.html）。 創(chuàng)建一個登錄框姓名： 密碼： 插入了一個單行文本框，其type屬性值為“text”，value屬性定義文本框的初始值為“請輸入姓名”；size屬性定義文本框的寬度為“20”個字符寬度；maxlength屬性文本框定義最多輸入的字符數(shù)為“15”。插入了一個密碼框，其type屬性值為“password”，其他的屬性及含義和文本框是一樣的，密碼文本框的中的文本以點的形式顯示，但它僅僅使周圍的人看不見輸入的文本，但并不能真正使得數(shù)據安全。為了數(shù)據安全，還需要后端技術解決。插入一個提交按鈕，其type屬性是“

7、submit”，value的取值“登錄”就是顯示在按鈕上的文字。提交按鈕單擊后會將表單的信息提交給表單form的action屬性所指向的文件進行處理。插入一個重置按鈕，其type屬性為“reset”，value屬性的意義與提交按鈕相同，重置按鈕的作用是將表單中的內容清空。表單基本元素【例5-1】制作一個登錄框實例，代碼如下所示（示例文件5-1.html）。在chrome瀏覽器中預覽表單基本元素【例5-2】制作一個滿意度測評表單實例，代碼如下所示（示例文件5-2.html）。網站滿意度打分：非常滿意比較滿意一般不滿意您希望我們增加些哪方面的知識：網頁設計： css3動畫：后期運營維護：設置了一個

8、單選按鈕組，共四個選項，單選按鈕的type屬性為radio，name屬性為單選項命名，value屬性為該選項的值，它是與服務器連接的重要參數(shù)。設置了一個復選按鈕組，共三個選項，復選按鈕的type值為checkBox，復選框checkbox不像單選按鈕radio，它不需要設置選項列表的name屬性，因為復選框可以多選，一個選項列表中可以有多個復選框被選中。表單基本元素【例5-2】制作一個滿意度測評表單實例，代碼如下所示（示例文件5-2.html）。在chrome瀏覽器中預覽表單基本元素【例5-3】制作上傳附件頁面實例，代碼如下所示（示例文件5-3.html）。 上傳附件上傳圖片：創(chuàng)建了一個文件域

9、，用于上傳文件，其type屬性值是file。當使用文件域file時，必須在標簽中說明編碼方式：enctype=“multipart/form-data，這樣服務器才能接收到正確的信息。創(chuàng)建了一個普通的表單按鈕，type屬性值為button，value屬性值是顯示在按鈕上的文字，onclick表示單擊該按鈕觸發(fā)的事件：alert(歡迎來到我們的網站！)，表示彈出窗口并顯示“歡迎來到我們的網站！”。創(chuàng)建了一個圖片域，type屬性值為“image”，src表示圖片路徑，其作用相當于提交按鈕。表單基本元素【例5-3】制作上傳附件頁面實例，代碼如下所示（示例文件5-3.html）。在chrome瀏覽器中

10、預覽單擊“選擇文件”按鈕單擊“圖片要求”按鈕表單其他元素表單其他元素如表所示。標簽含義說明textarea多行文本輸入框主要用于輸入較長的文本信息。select下拉列表框下拉列表是一種簡單的帶有預選值的下拉列表，能夠在有限空間設置多個選項表單其他元素【例5-4】制作入庫單實例，代碼如下所示（示例文件5-4.html）。 入庫單bodyline-height:30px;入庫單入庫產品編號： 表單其他元素【例5-4】制作入庫單實例，代碼如下所示（示例文件5-4.html）。請選擇所入倉庫： 倉庫一倉庫二倉庫三請選擇經手庫管員： 張金紅李穎王占坤 入庫原因：填寫貨物來源創(chuàng)建了一個下拉列表，下拉列表是

11、一種簡單的帶有預選值的下拉列表，能夠在有限空間設置多個選項，由和這兩個標簽配合使用，表示整個列表，表示一個列表項，Value屬性表示選項值，Selected表示是否被選中。創(chuàng)建了一個可以同時顯示三條記錄的列表，它的寫法與倉庫列表類似，不同之處是在select標簽后面加上size屬性：，表示下拉列表展開，可見列表項數(shù)目為3。創(chuàng)建了一個文本區(qū)域，標簽是，rows屬性定義文本框的高度，cols屬性定義文本框的寬度，單位是單個字符數(shù)。表單其他元素【例5-4】制作入庫單實例，代碼如下所示（示例文件5-4.html）。在chrome瀏覽器中預覽表單高級元素input標簽還有一些高級應用，如表所示。type

12、值含義說明urlURL地址輸入框要求輸入網站網址，在提交表單時，會自動驗證是否是URL地址。emailemail地址輸入框要求輸入email地址，在提交表單時，會自動驗證是否是email地址。date 日期選擇框選擇一個日期。time時間選擇框選擇一個時間。number數(shù)字輸入框用戶可以直接輸入數(shù)字，也可以通過上下箭頭選擇數(shù)字。range滑條控件可以通過滑塊選擇合適的數(shù)值。表單高級元素【例5-5】將上例的入庫單繼續(xù)完善一下，修改成如圖所示效果，增加了入庫日期、入庫時間、入庫數(shù)量、入庫產品合格率等內容（示例文件5-5.html）。表單高級元素【例5-5】將上例的入庫單繼續(xù)完善一下，修改成如圖所示

13、效果，增加了入庫日期、入庫時間、入庫數(shù)量、入庫產品合格率等內容（示例文件5-5.html）。在【例5-4】的26行之后插入如下代碼：入庫日期：入庫時間：入庫數(shù)量：入庫產品合格率：創(chuàng)建了日期選擇框，type屬性值為date，用戶單擊輸入框中的向下按鈕，即可在彈出的窗口中選擇需要的日期，也可以通過微調按鈕選擇日期。創(chuàng)建了時間選擇框，type屬性值為time，用戶可以直接輸入時間，也可以點擊右側的微調按鈕，選擇時間。創(chuàng)建了數(shù)字選擇框，type屬性值為number，用戶可以直接輸入數(shù)字，也可以單擊微調按鈕上下選擇合適的數(shù)值。創(chuàng)建了一個滑塊控件，type屬性值為range，min屬性表示滑塊的最小數(shù)值，

14、max屬性值表示滑塊的最大數(shù)值，step屬性表示滑塊梯度的大小。表單高級元素【例5-6】驗證URL地址和email地址的功能實例，代碼如下所示（示例文件5-6.html）。驗證地址bodyline-height:30px;驗證一個網址：驗證郵箱地址：創(chuàng)建了URL地址輸入框，type屬性值為url，如果在此輸入的不是網站地址，當單擊提交按鈕時，會彈出錯誤提示。required屬性值為“required”，表示該項不能為空，用戶如果沒填寫這一項，就單擊“提交”按鈕，將彈出提示信息。創(chuàng)建了email地址輸入框，type屬性值為email，如果在此輸入的不是郵箱地址，在提交表單時，會彈出錯誤提示。表單

15、高級元素【例5-6】驗證URL地址和email地址的功能實例，代碼如下所示（示例文件5-6.html）。在chrome瀏覽器中預覽三 項目實施利用所學的表單知識制作網上銀行注冊頁面，如圖所示。captionfont-size:24px;line-height:50px;tdheight:30px;三 項目實施啟動Sublime程序，新建并保存文件名稱為5-7.html。第一步第二步Head標簽內的CSS代碼輸入如下：設置了表格標題的樣式：文字大小為24像素；標題文字行高為50像素。設置了單元格的樣式，高為30像素。三 項目實施第三步在body標簽中，先插入form表單，再在form表單中插入1

16、0行2列的表格，在表格中填寫內容。中國XXX銀行注冊頁面 注冊卡/賬戶類型 標準卡/賬戶閃酷卡創(chuàng)建了一個表單，將所有的表格以及表單元素都放在表單標簽中。創(chuàng)建表格標題。表格第一行，第二個單元格中是一個單選按鈕組，包含兩個單選項。三 項目實施第三步請輸入注冊卡（賬）號注冊卡（帳）戶密碼 手機號碼 證件類型身份證軍官證表格第二行，第二個單元格中是一個文本框。表格第三行，第二個單元格中是一個密碼框。表格第四行，第二個單元格中是一個文本框。表格第五行，第二個單元格中是一個列表框，包含兩個列表項。三 項目實施第三步請輸入證件號碼請留下你的聯(lián)系郵箱選擇您要開通的業(yè)務短信提醒信用卡自動還款支付寶表格第六行，第

17、二個單元格中是一個文本框。表格第七行，第二個單元格中是一個email地址輸入框。表格第八行，第二個單元格中是一個復選框組，包含三個復選項。三 項目實施第三步個人備注信息您確定注冊并開通以上業(yè)務嗎？ 表格第九行，第二個單元格中是一個文本框。表格第八行，第二個單元格中是是兩個按鈕，一個提交按鈕，另一個是重置按鈕。三 項目實施再次保存文件后，在頁面中右擊，從彈出的快捷菜單中選擇“在瀏覽器中打開”命令，效果如圖所示。第四步四 項目拓展通過項目實施，表單以及表單元素的標簽、屬性已經基本掌握，如何能讓表單在內容完整的同時又能美化一點呢？這就要結合css進行樣式設置，此項目拓展制作如圖所示的調查問卷。四 項

18、目拓展首先要創(chuàng)建一個大的div塊，需要給塊設置背景和邊框，然后創(chuàng)建標題、表單以及具有布局作用的表格。第一步 分析需求第二步Head標簽內的CSS代碼輸入如下：#layoutwidth:700px;margin:0 auto;background-color:#F6F6F6;border:2px solid #8FC629;h1border-bottom:2px solid #8FC629;text-align:center;設置了ID名為“l(fā)ayout”的div塊樣式，寬為700像素；居中顯示；背景顏色灰色；邊框為2像素的黃綠色實線邊框。設置了標題h1的樣式，下邊框為2像素的黃綠色實線邊框；文

19、本對齊方式為居中對齊。四 項目拓展第二步h3padding:10px;tablewidth:500px;font-size: 12px;th,tdpadding:3px;thtext-align:right;.textInputwidth:150px;height:20px;border:1px solid #58805f;.textStyleborder:1px solid #58805f;.submitButwidth:100px;height:25px;margin:10px;font-weight:bold;border:2px solid #abd8b3;設置了標題h3的樣式，內邊距

20、為10像素。設置了標題行單元格th，普通單元格的樣式td內邊距為3像素。設置了標題行單元格th的樣式，文本右對齊。設置了表格table的樣式，寬為500像素，字號為12像素。設置了類名為.textInput的姓名輸入框和email地址框的樣式，寬為150像素，高為20像素，邊框為1像素的青色實線邊框。設置類名為.textStyle的文本框邊框為1像素的青色實線邊框。設置了類名為.submitBut的按鈕的樣式寬為100像素；高為25像素；外邊距為10像素；文字加粗；邊框為2像素的青色實線邊框。四 項目拓展第三步 幾個有關Web標準的問題 幫助我們更好的了解您對Web標準網頁設計的想法與看法 您

21、是否曾使用表格式布局？ 是 否 您是否開始使用CSS布局？ 是 否 body標簽內的HTML代碼輸入如下：表格的第一行，第二個單元格中是一個單選按鈕組，name值為“c1”。表格的第二行，第二個單元格中是一個單選按鈕組，name值為“c2” ，包含兩個單選項。四 項目拓展第三步 是否訂閱CSS郵件？ 是的 您所從事的行業(yè)： 設計師 程序員 總監(jiān) 美術編輯 項目經理 表格的第三行，第二個單元格中是一個復選框。表格的第四行，第二個單元格中是一個下拉列表框。四 項目拓展第三步 請留下您的姓名： 請留下您的Email地址： 請留下您的建議： 表格的第五行，第二個單元格中是一個文本框，用于輸入姓名。表格的第七行，第二個單元格中是一個多行文本輸入框，用于輸入建議。表格