網(wǎng)頁設(shè)計與開發(fā)實驗課件第7章 表單_第1頁
網(wǎng)頁設(shè)計與開發(fā)實驗課件第7章 表單_第2頁
網(wǎng)頁設(shè)計與開發(fā)實驗課件第7章 表單_第3頁
網(wǎng)頁設(shè)計與開發(fā)實驗課件第7章 表單_第4頁
網(wǎng)頁設(shè)計與開發(fā)實驗課件第7章 表單_第5頁
已閱讀5頁，還剩40頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

主要內(nèi)容理解表單的概念掌握表單的屬性設(shè)置掌握表單對象屬性的設(shè)置7.1表單的概念表單可以把來自用戶的信息提交給服務(wù)器，是網(wǎng)站管理員與瀏覽者之間溝通的橋梁。利用表單處理程序可以收集、分析用戶的反饋意見，做出科學(xué)的、合理的決策。表單有兩個重要組成部分：描述表單的HTML源代碼；用于處理用戶在表單域中輸入的信息的服務(wù)器端應(yīng)用程序客戶端腳本，如ASP.NET、JSP等。表單<form>是雙標(biāo)記。表單Form基本語法<formname="…"action=".."method="…"><input>….<select>…..</select>…<textarea>…</textarea></form>表單Form語法說明name：給定表單名稱，表單命名之后就可以用腳本語言(如JavaScript或VBScript)對它進(jìn)行控制。action:指定處理表單信息的服務(wù)器端應(yīng)用程序。method:method屬性用于指定表單處理表單數(shù)據(jù)方法，method的值可以為get或是post，默認(rèn)方式是get。7.2輸入<input><input>是個單標(biāo)記，它必須嵌套在表單標(biāo)記中使用，用于定義一個用戶的輸入項。<input>基本語法<form><inputname=""type=""></form><input>語法說明<input>標(biāo)記主要有六個屬性，type，name，size，value，maxlength，check。其中name和type是必選的兩個屬性；Name:屬性的值是相應(yīng)程序中的變量名。在不同的輸入方式下，<input>標(biāo)記的格式略有不同，其他五種屬性因type類型的不同，其含義也不同；type主要有九種類型：text，submit，reset，password，checkbox，radio，image，hidden，file。7.2.1單行文本輸入框text當(dāng)type=text時，表示該輸入項的輸入信息是字符串。此時，瀏覽器會在相應(yīng)的位置顯示一個文本框供用戶輸入信息。基本語法：<form><inputname="text"type="text"maxlength=""size=""value=""></form><input>語法說明maxlength：設(shè)置單行輸入框可以輸入的最大字符數(shù)，例如限制郵政編碼為6個數(shù)字、密碼最多為10個字符等；size：設(shè)置單行輸入框可顯示的最大字符數(shù)，這個值總是小于等于maxlength屬性的值，當(dāng)輸入的字符數(shù)超過文本框的長度時，用戶可以通過移動光標(biāo)來查看超過超出的內(nèi)容；value：文本框的值，可以通過設(shè)置value屬性的值來指定當(dāng)表單首次被載入時顯示在輸入框中的值。7.2.1單行文本輸入框text<!--程序7-1--><html><head><title>輸入用戶姓名</title></head><body><formaction="/index.aspx"method="get">

請輸入你的姓名：

<inputtype="text"name="yourname"></form></body></html>7.2.1單行文本輸入框text7.2.1單行文本輸入框text7.2.2提交按鈕submit和重置按鈕reset當(dāng)type=submit時，產(chǎn)生一個提交按鈕，當(dāng)用戶單擊該按鈕時，瀏覽器就會將表單的輸入信息傳送給服務(wù)器。當(dāng)type=reset時，產(chǎn)生一個重置按鈕，當(dāng)用戶單擊該按鈕時，瀏覽器就會清除表單中所有的輸入信息而恢復(fù)到初始狀態(tài)。提交與重置按鈕經(jīng)常同時出現(xiàn)?；菊Z法：<form><inputname="text"type="text"maxlength=“"size=“"value=“"></form>7.2.2提交按鈕submit和重置按鈕reset語法說明提交按鈕的name屬性是可以默認(rèn)的。它還有一個可選的屬性value，用于指定顯示在提交按鈕上的文字，value屬性的默認(rèn)值是“提交”。在一個表單中必須有提交按鈕，否則將無法向服務(wù)器傳送信息；重置按鈕的name屬性也是可以默認(rèn)的。value屬性與submit類似，用于指定顯示在清除按鈕上的文字，value的默認(rèn)值為“重置”。7.2.2提交按鈕submit和重置按鈕reset<!--程序7-2--><html><head><title>注冊</title></head><body><formaction="index.aspx"method="get">

請輸入你的姓名：

<inputtype="text"name="yourname"><br/>

請輸入你的年齡：

<inputtype="text"name="yourage"><br/><inputtype="submit"value="提交"><inputtype="reset"value="重置"></form></body></html>7.2.2提交按鈕submit和重置按鈕reset7.2.2提交按鈕submit和重置按鈕reset7.2.3密碼輸入框password

密碼輸入框password與單行文本輸入框text使用起來非常相似，所不同的只是當(dāng)用戶在輸入內(nèi)容時，是用“*”來代替顯示每個輸入的字符，以保證密碼的安全性?；菊Z法：<form><inputname="password"type="password"maxlength=""size=""></form>語法說明:在表單中插入密碼框，只要將<input>標(biāo)記中type屬性值設(shè)為password就可以插入密碼框，maxlength、size屬性同文件輸入框text的屬性一樣。7.2.3密碼輸入框password

<!--程序9-3--><html><head><title>輸入用戶名和密碼</title></head><body><formaction="index.aspx"method="post">

用戶名：

<inputtype="text"name="yourname"size=15><br>

密 碼：

<inputtype="password"name="yourpw"size=15><br><inputtype="submit"value="登錄"><inputtype="reset"value="取消"></form></body></html>7.2.3密碼輸入框password

7.2.3密碼輸入框password

7.2.4復(fù)選框checkbox基本語法：<form><inputname="text"type="checkbox"value=""></form>語法說明：用戶可以同時選中表單中的一個或多個復(fù)選項作為輸入信息，由于選項可以有多個，屬性name應(yīng)取不同的值；屬性value的參數(shù)值就是在該選項被選中并提交后，瀏覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，value屬性的參數(shù)值必須與選項內(nèi)容相同或基本相同，該屬性是必選項；checked屬性用于指定該選項在初始時是否被選中。<!--程序7-4--><html><head><title>選擇</title></head><body>請選擇你喜歡的運動：<br><formaction="index.aspx"method="post"><inputtype="checkbox"name="basketball"value="basktball">籃球<br><inputtype="checkbox"name="football"value="football">足球<br><inputtype="checkbox"name="tennis"value="tennis">網(wǎng)球<br><inputtype="submit"value="提交"></form></body></html>7.2.4復(fù)選框checkbox7.2.4復(fù)選框checkbox7.2.5單選框radio基本語法：<form><inputname="radio"type="radio"value=""></form>語法說明：單選項必須是唯一的，即用戶只能選中表單中所有單選項中的一項作為輸入信息，因此，所有屬性的name都應(yīng)取相同的值；不同的選項其屬性value的值應(yīng)是不同的；checked屬性用于指定該選項在初始時是被選中的。<!--程序7-5--><html><head><title>設(shè)置</title></head><body>

每頁最多顯示郵件數(shù)：<br><formaction="ParaSet.aspx"method="post"><inputtype="radio"name="mail"value="10">10封<br><inputtype="radio"name="mail"value="20">20封(推薦)<br><inputtype="radio"name="mail"value="30">30封<br><inputtype="radio"name="mail"value="50">50封<br><inputtype="radio"name="mail"value="100">100封<br><inputtype="submit"value="提交"></form></body></html>7.2.5單選框radio7.2.5單選框radio7.2.6圖像按鈕image基本語法：<form><inputname="image"type="image"src="url"></form>語法說明：單擊該按鈕時，瀏覽器就會將表單的輸入信息傳送給服務(wù)器。image類型中的src屬性是必需的，它用于設(shè)置圖像文件的路徑。<!--程序7-6--><html><head><title>表單中圖像按鈕</title></head><body><formaction="index.aspx"method="post">

你最喜歡的運動：

<selectname="sports"><optionvalue="football">足球

<optionvalue="bastetball">籃球

<optionvalue="volleyball">排球

</select><inputtype="image"src="./img/confirm.gif"value="提交"></form></body></html>7.2.6圖像按鈕image7.2.6圖像按鈕image7.2.7文件選擇輸入框file基本語法：<form><inputname="file"type="file"></form>語法說明：在表單中插入文件選擇輸入框，只要將<input>標(biāo)記中type屬性值設(shè)為file就可以插入文件選擇輸入框。<!--程序7-7--><html><head><title>表單中文件選擇輸入框</title></head><body><formaction="index.aspx"method="post"><p>

請選擇文件<br><inputtype="file"name="uploadfile"size="40"></p><div><inputtype="submit"value="上傳"name="Send""></div></form></body></html>7.2.7文件選擇輸入框file7.2.7文件選擇輸入框file7.2.8隱藏框hidden基本語法：<form><inputname="hidden"type="hidden"value=""></form>語法說明：當(dāng)type=hidden時，表示輸入項將不在瀏覽器中顯示。7.3多行文本輸入框<textarea><textarea>是雙標(biāo)記?？梢詠矶x高度超過一行的文本輸入框，首標(biāo)記<textarea>和尾標(biāo)記</textarea>之間的內(nèi)容就是顯示在文本輸入框中的初始信息。<textarea>標(biāo)記有四個屬性：name，rows，cols，wrap。基本語法：<form><textareaname="textarea"cols=""rows=""wrap="“</textarea></form>語法說明：name：用于指定文本輸入框的名字。rows：設(shè)置多行文本輸入框的行數(shù)，此屬性的值是數(shù)字，瀏覽器會自動為高度超過一行的文本輸入框添加垂直滾動條。但是，當(dāng)輸入文本的行數(shù)小于或等于rows屬性的值時，滾動條將不起作用。cols：設(shè)置多行文本輸入框的列數(shù)。wrap：默認(rèn)值是文本自動換行，當(dāng)輸入內(nèi)容超過文本域的右邊界時會自動轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時自動換行的地方不會有換行符出現(xiàn)。7.3多行文本輸入框<textarea><!--程序7-8--><html><head><title>請?zhí)釋氋F意見</title></head><body><formaction="index.aspx"method="get">

請?zhí)釋氋F意見：<br><textareaname="yoursuggest"cols="50"rows="3"></textarea><br><inputtype="submit"value="提交"><inputtype="reset"value="重寫"></form></body></html>7.3多行文本輸入框<textarea>7.3多行文本輸入框<textarea>7.4下拉列表框<select>、<option><select>和<option>標(biāo)記可以在瀏覽器中設(shè)計一個下拉式的列表或帶有滾動條的列表，用戶可以在列表中選中一個或多個選項?；菊Z法：<form><selectname=""size=""><optionsvalue="">…<optionsvalue=""></select></form>7.4下拉列表框<select>、<option>語法說明：<select>是雙標(biāo)記：首標(biāo)記<select>和尾標(biāo)記</select>之間的內(nèi)容就是一個下拉式菜單的內(nèi)容。<select>標(biāo)記必須與<option>標(biāo)記配套使用。<option>標(biāo)記用于定義列表中的各個選項，<select>標(biāo)記有name，size，multiple三個屬性。name：設(shè)定下拉列表名字。size：可選項，用于改變下拉框的大小。size屬性的值是數(shù)字，表示顯示在列表中選項的數(shù)目，當(dāng)size屬性的值小于列表框中的列表項數(shù)目時，瀏覽器會為該下拉框添加滾動條，用戶可以使用滾動條來查看所有的選項，size默認(rèn)值為1。multiple：如果加上該屬性，表示允許用戶從列表中選擇多項。7.4下拉列表框<select>、<option>語法說明

<option>標(biāo)記用來定義列表中的選項，設(shè)置列表中顯示的文字和列表條目的值，列表中每個選項有一個顯示的文本和一個value值(當(dāng)選項被選擇時傳送給處理程序的信息)。<option>是單標(biāo)記，它必須嵌套在<select>標(biāo)記中使用。一個列表中有多少個選項，就要有多少個<option>標(biāo)記與之相對應(yīng)，選項的具體內(nèi)容寫在每個<option>之后。<option>標(biāo)記有兩個屬性：value和selected，它們都是可選項。value:用于設(shè)置當(dāng)該選項被選中并提交后，瀏覽器傳送給服務(wù)器的數(shù)據(jù)。如果是默認(rèn)狀態(tài)，瀏覽器將傳送選項的內(nèi)容。selected:用來指定選項的初始狀態(tài)，表示該選項在初始時被選中。<!--程序7-9--><html><body><formaction="index.aspx"method="post">

你最喜歡的運動：

<

溫馨提示

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

評論

0/150

提交評論