《PHP網(wǎng)頁案例任務教程》課件 3-1 設計公司業(yè)務合同管理頁面動態(tài)網(wǎng)頁_第1頁
《PHP網(wǎng)頁案例任務教程》課件 3-1 設計公司業(yè)務合同管理頁面動態(tài)網(wǎng)頁_第2頁
《PHP網(wǎng)頁案例任務教程》課件 3-1 設計公司業(yè)務合同管理頁面動態(tài)網(wǎng)頁_第3頁
《PHP網(wǎng)頁案例任務教程》課件 3-1 設計公司業(yè)務合同管理頁面動態(tài)網(wǎng)頁_第4頁
《PHP網(wǎng)頁案例任務教程》課件 3-1 設計公司業(yè)務合同管理頁面動態(tài)網(wǎng)頁_第5頁
已閱讀5頁，還剩14頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

項目三動態(tài)網(wǎng)頁表單控件項目引言表單及其控件在動態(tài)網(wǎng)頁的實現(xiàn)中扮演著至關重要的角色，為有效實現(xiàn)人機交互提供了必要的技術支持。這些表單控件不僅賦予了PHP更為豐富的功能，同時與PHP配合使其具備了可編程、可控制的特點。在本項目中對網(wǎng)頁表單的多種控件元素進行了深入介紹，詳盡闡述了PHP、HTML表單、控件的功能用途和施工應用；展示了表單<Form>元素的定義、action屬性的作用、method屬性的用途、<label>標簽的運用等；主要涵蓋了表單的基本構造和屬性設置，包括文本框文本輸入控件，密碼框控件安全輸入隱藏密碼及敏感信息，文本區(qū)域控件多行文本輸入，單選按鈕與復選框控件多個選項中進行選擇，下拉菜單選項菜單的選擇功能，提交按鈕發(fā)送數(shù)據(jù)至服務器處理，重置按鈕將表單數(shù)據(jù)還原至初始狀態(tài)，還介紹了文件上傳控件，使用戶能夠上傳文件，進一步展示每種控件的應用方法，每種控件屬性參數(shù)設置以及效果均得到詳細闡述。在本項目中通過公司業(yè)務合同管理以及調(diào)查問卷兩個施工任務，深入學習了在動態(tài)網(wǎng)頁中常用HTML表單控件的運用方法和PHP交互方面的技能，這些施工任務有助于更好地理解和應用表單控件，以滿足公司各種不同動態(tài)網(wǎng)頁設計的需求。能力目標能掌握HTML表單使用方法能掌握表單輸入控件inputText設計動態(tài)網(wǎng)頁技能能掌握按鈕和提交控件Button設計動態(tài)網(wǎng)頁技能能掌握選擇和選項控件inputCheckbox、inputRadio、select設計動態(tài)網(wǎng)頁技能能掌握文本區(qū)域控件textarea設計動態(tài)網(wǎng)頁技能任務一設計公司業(yè)務合同管理頁面動態(tài)網(wǎng)頁復習知識與技能任務描述鑒于公司業(yè)務的不斷擴大和客戶數(shù)量的增加，希望通過網(wǎng)站動態(tài)網(wǎng)頁來實現(xiàn)對合同的管理。為此，部門負責人已指派工程師小明負責設計和開發(fā)合同管理系統(tǒng)的動態(tài)網(wǎng)頁，該頁面被命名為“030101.php”。該系統(tǒng)將提供方便的合同管理功能，以滿足公司與客戶之間的合同管理需求。通過這個系統(tǒng)，相關人員將能夠更高效地處理和跟蹤合同，提升管理效率，確保合同的準確執(zhí)行。工程師小明將負責確保該網(wǎng)頁的設計和功能達到公司的要求，使其易于使用和操作。這個合同管理系統(tǒng)將成為公司管理合同的重要工具，幫助公司提供更好的客戶服務，并確保合同的順利執(zhí)行。設計“030101.php”動態(tài)網(wǎng)頁詳細信息效果圖如圖3-1-1所示。任務分析鑒于公司業(yè)務的擴大和客戶數(shù)量的增加，公司決定通過開發(fā)網(wǎng)站動態(tài)網(wǎng)頁來實現(xiàn)合同的管理。為此，委派工程師小明負責設計和開發(fā)名為“030101.php”的動態(tài)網(wǎng)頁。該網(wǎng)頁提供了合同添加功能和合同查看功能。（1）網(wǎng)站規(guī)劃參數(shù)。Web站點路徑：C:\phpweb。Web測試IP地址：。Web測試端口號：8899。（2）工程師小明會將動態(tài)網(wǎng)頁文件命名為“030101.php”，以便進行代碼文件的組織和管理。（3）合同添加頁面的設計：①頁面包含合同添加表單，通過post方法將數(shù)據(jù)提交到“030101.php”頁面。②表單中包括合同編號、簽署日期、總金額、計費數(shù)量、合同內(nèi)容和經(jīng)辦人等字段。③用戶可以在文本框中輸入合同相關信息，并通過“提交”按鈕將數(shù)據(jù)保存到系統(tǒng)中。④頁面還提供“重置”按鈕，方便用戶清空已填寫的數(shù)據(jù)。（4）合同查看功能的實現(xiàn)：①頁面中包含合同信息展示區(qū)域。②如果接收到合同信息（通過POST請求），則展示合同編號、簽署日期、總金額、計費數(shù)量、合同內(nèi)容和經(jīng)辦人等字段。③用戶可以在該區(qū)域查看剛剛提交的合同信息。（5）確保網(wǎng)頁結(jié)果的正確性，任務施工結(jié)束時要進行測試與驗收，記錄主要施工技術參數(shù)?！?30101.php”頁面將提供方便的合同管理功能，使公司能夠高效地處理和跟蹤合同，提升管理效率，確保合同的準確執(zhí)行。通過這個合同管理系統(tǒng)，公司將能夠提供更好的客戶服務，并為公司的業(yè)務發(fā)展提供有力支持。1．準備工作按照網(wǎng)站規(guī)劃參數(shù)進行配置。Web站點路徑：C:\phpweb。Web測試IP地址：。Web測試端口號：8899。參照項目一中任務一、任務二、任務三，配置并啟動WAMP環(huán)境，配置好Dreamweaver網(wǎng)站環(huán)境，如果已經(jīng)配置并啟動WAMP環(huán)境、Dreamweaver網(wǎng)站環(huán)境，本步驟可以略過。設計“030101.php”動態(tài)網(wǎng)頁。第一步：創(chuàng)建動態(tài)網(wǎng)頁“030101.php”。第二步：在網(wǎng)頁上添加表單，并使用POST方法將數(shù)據(jù)提交到“030101.php”網(wǎng)頁自身。第三步：在表單中添加合同編號、簽署日期、總金額、計費數(shù)量、合同內(nèi)容和經(jīng)辦人等文本字段。第四步：為每個文本字段添加相應的輸入框或文本域，以供用戶輸入相關信息。第五步：提供“提交”按鈕，使用戶能夠?qū)⑻顚懙暮贤畔⑼ㄟ^表單至PHP來處理。第六步：添加“重置”按鈕，方便用戶清空表單數(shù)據(jù)。2．設計“030101.php”動態(tài)網(wǎng)頁確認準備工作無誤，啟動Dreamweaver軟件，鼠標單擊“文件”菜單，單擊“新建”，在彈出的對話框中單擊“創(chuàng)建”按鈕，單擊“文件”菜單，單擊“保存”，彈出“另存為”對話框，文件名處輸入“030101”，單擊“保存”按鈕。3．在“030101.php”動態(tài)網(wǎng)頁中設計標題、表單與控件在打開“030101.php”網(wǎng)頁狀態(tài)下，鼠標單擊“設計”視圖、“拆分”視圖、“代碼”視圖切換到方便設計編輯的視圖。（1）輸入網(wǎng)頁標題“公司簽訂合同信息添加頁面”。（2）鼠標單擊“窗口”菜單，單擊“插入”調(diào)出插入面板，在插入面板上單擊“表單”調(diào)出表單面板，單擊表單面板上“表單”按鈕，彈出表單form對話框，在對話框操作處輸入“030101.php”，在方法處選擇“post”，單擊“確定”按鈕，如圖3-1-2所示。圖3-1-2標簽編輯器form-常規(guī)對話框（3）參照圖3-1-1在表單中插入8行4列表格，參照樣張根據(jù)需要對單元格進行合并。（4）參照圖3-1-1在表單中輸入文字“公司簽訂合同信息添加頁面”，選中文字“公司簽訂合同信息添加頁面”設置文字格式為標題1，用鍵盤輸入組合鍵“Shift+Enter”換行。（5）參照圖3-1-1在表單中插入“文本字段”控件6個，插入“按鈕”控件2個。（6）分別在6個文本控件左側(cè)對應位置輸入“合同編號：”“簽署日期：”“總金額：”“計費數(shù)量：”“經(jīng)辦人：”，在表格中樣張位置輸入文字“合同內(nèi)容：注：(這是簡要說明，不超過20字)”和“查看合同”。（7）參照圖3-1-1在表格第7行合適位置插入2個“按鈕”控件，鼠標分別單擊“按鈕”控件，在屬性面板中值處輸入“提交”和“重置”，結(jié)果對照看源代碼第43～44行。4．在“030101.php”動態(tài)網(wǎng)頁中輸入PHP源代碼（1）鼠標單擊“窗口”菜單，單擊“插入”調(diào)出插入面板，在插入面板單擊“PHP”調(diào)出PHP面板，單擊PHP面板上“<?”或“echo”按鈕，在源代碼編輯區(qū)域需要的位置自動插入<?php?>和<?phpecho?>代碼塊。（2）參照源代碼第48～55行，鍵盤輸入PHP源代碼（注意為節(jié)約設計，注釋可以省略，正式技術資料歸檔時，按照行業(yè)規(guī)范要求必須有詳細規(guī)范的注釋）。通過以上步驟成功創(chuàng)建了名為“030101.php”的動態(tài)網(wǎng)頁，并在其中添加了表單。該表單包含了合同編號、簽署日期、總金額、計費數(shù)量、合同內(nèi)容和經(jīng)辦人等字段，為每個字段提供了相應的輸入框或文本域控件，以供用戶輸入相關信息，頁面提供了“提交”按鈕和“重置”按鈕，分別用于保存填寫的合同信息和清空已填寫的數(shù)據(jù)。5．“030101.php”動態(tài)網(wǎng)頁源代碼1<!doctypehtml><!--定義文檔類型為HTML5-->2<html>3<head>4<metacharset="utf-8"><!--設置字符編碼為utf-8-->5<title>公司簽訂合同信息添加頁面</title><!--設置頁面標題為“公司簽訂合同信息添加頁面”-->6</head>7<?php8$a="";//定義變量$a，并賦值為空字符串9?>10<body>11<formaction="030101.php"method="post"><!--創(chuàng)建表單提交到030101.php，用post方法-->12<table>13<tr>14<tdalign="center"colspan="4"><h1><strong>公司簽訂合同信息添加頁面</strong></h1></td><!--創(chuàng)建單元格，設置水平居中對齊，跨越4列，并顯示標題-->15</tr>16<tr>17<tdalign="right">合同編號：</td><!--創(chuàng)建單元格設置右對齊，顯示“合同編號：”-->18<td><inputname="a"type="text"value="<?phpecho$a;?>"></td><!--創(chuàng)建輸入框，名稱為“a”，類型為文本，值為變量$a的值-->19<tdalign="right">簽署日期：</td><!--創(chuàng)建單元格設置右對齊，顯示文本“簽署日期：”-->20<td><inputname="b"type="text"></td><!--創(chuàng)建輸入框，名稱為“b”，類型為文本-->21</tr>22<tr>23<tdalign="right">總金額：</td><!--創(chuàng)建單元格，設置右對齊，并顯示文本“總金額：”-->24<td><inputname="c"type="text"></td><!--創(chuàng)建輸入框，名稱為“c”，類型為文本-->25<tdalign="right">計費數(shù)量：</td><!--創(chuàng)建單元格設右對齊，并顯示文本“計費數(shù)量：”-->26<td><inputname="d"type="text"></td><!--創(chuàng)建輸入框，名稱為“d”，類型為文本-->27</tr>28<tr>29<tdalign="right">合同內(nèi)容：</td><!--創(chuàng)建單元格設置右對齊，顯示文本“合同內(nèi)容：”-->30<tdcolspan="3">注：(這是簡要說明，不超過20字)</td><!--創(chuàng)建跨越3列的單元格，顯示注釋說明-->31</tr>32<tr>33<tdalign="right"colspan="4">34<textareaname="e"cols="72"rows="8"></textarea></td><!--創(chuàng)建文本域，名稱為“e”，顯示8行、每行72個字符-->35</tr>36<tr>37<tdalign="right">經(jīng)辦人：</td><!--創(chuàng)建單元格設置右對齊，并顯示文本“經(jīng)辦人：”-->38<td><inputname="f"type="text"></td><!--創(chuàng)建輸入框，名稱為“f”，類型為文本-->39<td> </td><!--創(chuàng)建空單元格-->40<td> </td><!--創(chuàng)建空單元格-->41</tr>42<tr>43<tdalign="right"colspan="2"><inputname="保存"type="submit"value="提交"></td><!--創(chuàng)建單元格，跨越2列，顯示提交按鈕-->44<tdcolspan="2"><inputname="重置"value="重置"type="reset"></td><!--創(chuàng)建跨越2列的單元格，顯示重置按鈕-->45</tr>46<tr>47<tdalign="left"colspan="4">查看合同：<br/><!--創(chuàng)建單元格，跨越4列，并顯示文本“查看合同：”-->48<?phpif(isset($_REQUEST['a'])){?>49<?phpecho'合同編號：'.$_REQUEST['a'];?><br/><!--如接收到合同編號，顯示合同編號-->50<?phpecho'簽署日期：'.$_REQUEST['b'];?><br/><!--如接收到簽署日期，顯示簽署日期-->51<?phpecho'總金額：'.$_REQUEST['c'];?><br/><!--如接收到總金額，顯示總金額-->52<?phpecho'計費數(shù)量：'.$_REQUEST['d'];?><br/><!--如接收到計費數(shù)量，顯示計費數(shù)量-->53<?phpecho'合同內(nèi)容：'.$_REQUEST['e'];?><br/><!--如接收到合同內(nèi)容，顯示合同內(nèi)容-->54<?phpecho'經(jīng)辦人：'.$_REQUEST['f'];?><br/><!--如果接收到經(jīng)辦人，顯示經(jīng)辦人-->55<?php}?></td>56</tr>57</table>58</form>59</body>60</html>1．HTML表單HTML表單用于搜集不同類型的用戶輸入。HTML表單包含表單元素，表單元素指的是不同類型的input元素、復選框、單選按鈕、提交按鈕等。2．HTML元素HTML元素包括<form>元素，用以定義HTML表單格式如下。<form></form>3．a(chǎn)ction屬性action屬性定義在提交表單時執(zhí)行的動作。向服務器提交表單的方法是使用提交按鈕，通常表單會被提交到Web服務器上的網(wǎng)頁中。在上面的例子中，指定了某個服務器腳本來處理被提交表單。如果省略action屬性，則action會被設置為當前頁面。格式如下。<formaction=""></form>4．method屬性Method屬性規(guī)定了在提交表單時使用的HTTP方法，提交表單可以是get或post。默認method屬性的值是get，此時表單提交數(shù)據(jù)會顯示在瀏覽器的地址欄中，這樣信息易泄露存在安全隱患。對比get方法post方法具有更好的安全性，因此post方法能適用于更多場景之中。method屬性格式如下。<formaction="action_page.php"method="get">或<formaction="action_page.php"method="post">5．表單描述標簽的使用<label>標簽為input元素定義標注，label元素不會向用戶呈現(xiàn)任何特殊效果。不過，它為鼠標用戶改進了可用性。如果在label元素內(nèi)點擊文本，就會觸發(fā)此控件，使該控件獲得焦點。當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關的表單控件上。<label>標簽的for屬性應當與相關元素的id屬性相同。格式如下。<labelfor="wenzi">文字</lab

溫馨提示

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

最新文檔

評論

0/150

提交評論