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

下載本文檔

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

文檔簡(jiǎn)介

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

請(qǐng)輸入你的姓名：

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

請(qǐng)輸入你的姓名：

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

請(qǐng)輸入你的年齡：

<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)容時(shí)，是用“*”來代替顯示每個(gè)輸入的字符，以保證密碼的安全性。基本語法：<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>語法說明：用戶可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為輸入信息，由于選項(xiàng)可以有多個(gè)，屬性name應(yīng)取不同的值；屬性value的參數(shù)值就是在該選項(xiàng)被選中并提交后，瀏覽器要傳送給服務(wù)器的數(shù)據(jù)。因此，value屬性的參數(shù)值必須與選項(xiàng)內(nèi)容相同或基本相同，該屬性是必選項(xiàng)；checked屬性用于指定該選項(xiàng)在初始時(shí)是否被選中。<!--程序7-4--><html><head><title>選擇</title></head><body>請(qǐng)選擇你喜歡的運(yùn)動(dòng)：<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>語法說明：?jiǎn)芜x項(xiàng)必須是唯一的，即用戶只能選中表單中所有單選項(xiàng)中的一項(xiàng)作為輸入信息，因此，所有屬性的name都應(yīng)取相同的值；不同的選項(xiàng)其屬性value的值應(yīng)是不同的；checked屬性用于指定該選項(xiàng)在初始時(shí)是被選中的。<!--程序7-5--><html><head><title>設(shè)置</title></head><body>

每頁(yè)最多顯示郵件數(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>語法說明：?jiǎn)螕粼摪粹o時(shí)，瀏覽器就會(huì)將表單的輸入信息傳送給服務(wù)器。image類型中的src屬性是必需的，它用于設(shè)置圖像文件的路徑。<!--程序7-6--><html><head><title>表單中圖像按鈕</title></head><body><formaction="index.aspx"method="post">

你最喜歡的運(yùn)動(dòng)：

<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>

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

請(qǐng)?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è)計(jì)一個(gè)下拉式的列表或帶有滾動(dòng)條的列表，用戶可以在列表中選中一個(gè)或多個(gè)選項(xiàng)。基本語法：<form><selectname=""size=""><optionsvalue="">…<optionsvalue=""></select></form>7.4下拉列表框<select>、<option>語法說明：<select>是雙標(biāo)記：首標(biāo)記<select>和尾標(biāo)記</select>之間的內(nèi)容就是一個(gè)下拉式菜單的內(nèi)容。<select>標(biāo)記必須與<option>標(biāo)記配套使用。<option>標(biāo)記用于定義列表中的各個(gè)選項(xiàng)，<select>標(biāo)記有name，size，multiple三個(gè)屬性。name：設(shè)定下拉列表名字。size：可選項(xiàng)，用于改變下拉框的大小。size屬性的值是數(shù)字，表示顯示在列表中選項(xiàng)的數(shù)目，當(dāng)size屬性的值小于列表框中的列表項(xiàng)數(shù)目時(shí)，瀏覽器會(huì)為該下拉框添加滾動(dòng)條，用戶可以使用滾動(dòng)條來查看所有的選項(xiàng)，size默認(rèn)值為1。multiple：如果加上該屬性，表示允許用戶從列表中選擇多項(xiàng)。7.4下拉列表框<select>、<option>語法說明

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

你最喜歡的運(yùn)動(dòng)：

<

溫馨提示

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

評(píng)論

0/150

提交評(píng)論