web前端開發技術實驗報告實驗五_第1頁
web前端開發技術實驗報告實驗五_第2頁
web前端開發技術實驗報告實驗五_第3頁
web前端開發技術實驗報告實驗五_第4頁
web前端開發技術實驗報告實驗五_第5頁
已閱讀5頁，還剩2頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、 長 春 大 學 20 15 2016學年第 二 學期 Web前端開發技術 課程實 驗 報 告學 院： 計算機科學技術專 業： 軟件工程 班 級： 軟件14402 學 號： 041440210 姓 名： 王 悅 任課教師： 車 娜 實驗五 HTML表單一、實驗目的1.理解表單的構成，可以快速創建表單。2.掌握表單相關標記，能夠創建具有相應功能的表單控件。3.掌握表單樣式的控制，能夠美化表單界面。二、內容及要求使用表單控件，并通過CSS控制表單樣式制作一個學員檔案，其效果如圖6-1所示，滿足以下要求：1.學員檔案上面的標題和下面的表單兩部分構成。2.標題部分通過標題標記定義。3.表單部分通過相關

2、的表單控件進行定義圖6-1 “學員檔案”CSS樣式效果三、實驗原理表單：是網頁上用于輸入信息的區域，它的主要功能是收集用戶信息，并將這些信息傳遞給后臺服務器，實現網頁與用戶的溝通。表單由表單控件、提示信息和表單域構成。創建表單：<form></form>標記被用于創建一個表單，action、method、name為表單標記<form>的常用屬性。action屬性用于指定接收并處理表單數據的服務器程序的url地址。method屬性用于設置表單數據的提交方式，其取值為get或post。其中，get為默認值，這種方式提交的數據將顯示在瀏覽器的地址欄中，保密性差，且

3、有數據量的限制。post方式的保密性好，并且無數據量的限制，使用method="post"可以大量的提交數據。input控件：定義單行文本輸入框、單選按鈕、復選框、提交按鈕、重置按鈕等控件。select控件：可以定義下拉菜單效果。其中，<select></select>標記用于在表單中添加一個下拉菜單，<option></option>標記嵌套在<select></select>標記中，用于定義下拉菜單中的具體選項，每對<select></select>中至少應包含一對<o

4、ption></option>。textarea控件：定義的多行文本輸入框。cols和rows為<textarea>標記的必須屬性，其中cols用來定義多行文本輸入框每行中的字符數，rows用來定義多行文本輸入框顯示的行數，它們的取值均為正整數。CSS控制表單樣式：使用CSS可以輕松地控制表單控件的樣式，主要體現在控制表單控件的字體、邊框、背景和內邊距等。四、實驗步驟1、結構分析“傳智學員檔案”由多個表單控件構成。整個頁面可以使用一個大盒子<div>進行整體控制，然后通過<form>標記定義表單，并在其中嵌套相應的表單控件。另外，由于表單控

5、件屬于內塊元素，不會單獨占據一行，可以通過<p>標記嵌套表單控件使其獨占一行。2、樣式分析(1) 通過最外層的div對頁面進行整體控制，需要對其設置寬度和高度以及背景圖片等。(2) 通過form對表單進行整體控制，需要對其設置寬度和內外邊距樣式。(3) 定義表單標題的樣式，主要控制其文本樣式及內外邊距。(4) 定義各個表單控件的樣式，主要控制他們的寬度、高度、文本、背景及邊距等。3、制作頁面結構根據上面的分析，可以使用相應的HTML標記來搭建網頁結構。使用background屬性設置背景圖片和設置顏色了。使用<hn>設置標題。用了<div>標簽設置了一個盒子

6、，同時根據width、height設置盒子的大小。還應用了<from>標簽，來定義表單。 4、定義CSS樣式 (1) 定義基礎樣式，應用body等標簽全局控制。(2) 整體控制頁面，定義<div>的樣式，以及添加背景圖片。(3) 整體控制表單，定義表單的寬度、內邊距樣式來對表單進行整體控制。(4) 控制表單標題，應用h2標題來定義(5) 控制姓名、年齡文本框(6) 控制單選按鈕及復選框，控制薪資積及多行文本框，控制按鈕提交。五、實驗代碼及網頁效果圖1搭建基本結構關鍵代碼如下：<body><div class="all"> &l

7、t;form class="list" action="#" method="post"> <h2>傳智播客學員檔案</h2> <p> <input type="text" value="本人真實姓名" class="txt" /> </p> <p> <input type="text" value="請填寫實際年齡" class="age&q

8、uot; /> </p> <p class="choose"> <label><input type="radio" name="sex" />男</label> <label><input type="radio" name="sex" />女</label> </p> <p class="choose"> <label><inpu

9、t type="checkbox" />傳智老學員</label> <label><input type="checkbox" />朋友推薦</label> <label><input type="checkbox" />視頻教程</label> <label><input type="checkbox" />CSDN討論</label> </p> <p> <s

10、elect class="course"> <option>JAVA就業班</option> <option selected="selected">網頁平面UI設計就業班</option> <option>IOS就業班</option> </select> </p> <p class="money_box"> <input type="text" value="工作薪資" c

11、lass="money" /><span>元/月（收入）</span> </p> <p> <textarea cols="50" rows="5" class="message">請簡述您有沒有基礎,以及為什么選擇來傳智新播客學習？</textarea> </p> <p> <input type="submit" class="btn" value="提 交&

12、quot; /> </p> </form> </div> </body>效果如圖6-2所示。圖6-2 HTML頁面結構效果圖2定義CSS樣式關鍵代碼如下：<style type="text/css">bodyfont-size:12px; font-family:"微軟雅黑"body,h2,form,img,input,select,textareapadding:0; margin:0;list-style:none; border:0;.all width:1024px; height

13、:863px; margin:0 auto; background:url(bg.png) no-repeat;.listwidth:685px; padding:180px 0 0 340px;pmargin-top:20px;h2font-size:38px; color:#26211e; margin-bottom:60px; padding-left:50px;.txt,.agewidth:360px; height:30px; line-height:30px; padding-left:40px; color:#ccc;.txtbackground:#fff url(icon2.p

14、ng) no-repeat 5px 5px;.agebackground:#fff url(icon3.png) no-repeat 5px 5px;.choosewidth:390px; height:25px; line-height:25px;background-color:#FFF; padding:5px 0 0 10px;.course,.moneywidth:190px; height:25px; padding-left:10px;.moneycolor:#ddd;.money_box spanfont-size:18px; font-weight:bold; color:#fff;.messagewidth:390px; height:80px; padding:5px 0 0 10px; font-size:12px; color:#ccc;

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論