HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第6章 表單_第1頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第6章 表單_第2頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第6章 表單_第3頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第6章 表單_第4頁
HTML CSS DIV網(wǎng)頁設(shè)計(jì)與布局（第3版）（微課版） 課件 第6章 表單_第5頁
已閱讀5頁，還剩27頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第6章

表單6.1添加表單

6.2輸入標(biāo)簽

6.3下拉列表

6.4文本域

6.5小結(jié)

6.1添加表單6.1.1鏈接跳轉(zhuǎn)

6.1.2鏈接跳轉(zhuǎn)方式

6.1.3表單名稱

6.1.1鏈接跳轉(zhuǎn)action屬性<formaction="鏈接跳轉(zhuǎn)的地址">設(shè)置各種表單元素</form>【示例6-1】設(shè)置表單的鏈接跳轉(zhuǎn)地址。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>設(shè)置表單的處理程序</title>5

</head>6

<body>7

<p>表單的作用就是收集用戶信息。8

<formaction=mailto:html-css@163.com>9

<p><inputtype="submit"value="提交">10

</form>11

</body>12

</html>6.1.2鏈接跳轉(zhuǎn)方式method屬性<formmethod="表單的鏈接跳轉(zhuǎn)方式">表單元素</form>表單的鏈接跳轉(zhuǎn)方式一般可以設(shè)置為get和post兩種，其具體含義如表6.1所示。跳轉(zhuǎn)方式含義注意事項(xiàng)get表單數(shù)據(jù)會(huì)被視為參數(shù)發(fā)送，用戶輸入的數(shù)據(jù)會(huì)附加在URL之后，由用戶端直接發(fā)送至服務(wù)器，是METHOD屬性的默認(rèn)值其速度較快，但數(shù)據(jù)不能太長。如果信息超過8192個(gè)字符，則可能會(huì)被截去，另外，該方式不具有保密性post表單數(shù)據(jù)與URL分開，將數(shù)據(jù)寫在表單主體內(nèi)發(fā)送沒有字符長度的限制，可以發(fā)送較長的信息，但速度相對較慢6.1.3表單名稱name屬性<formname="表單名稱">表單元素</form>6.2輸入標(biāo)簽6.2.1文本框

6.2.2密碼框

6.2.3單選按鈕

6.2.4復(fù)選框

6.2.5“提交”按鈕

6.2.6“重置”按鈕

6.2.7“圖像”按鈕

6.2.8文件域

6.2.9隱藏域

6.2.1文本框<form>

<inputtype="text"></form>【示例6-2】在表單中插入一個(gè)文本框。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加文本框</title>5

</head>6

<body>7

<p>表單的作用就是收集用戶信息。</p>8

<form>9 輸入文字：<inputtype="text"/>10

</form>11

</body>12

</html>6.2.2密碼框<form>

<inputtype="password"></form>【示例6-3】在表單中設(shè)置一個(gè)密碼框。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加密碼框</title>5

</head>6

<body>7

<p>表單的作用就是收集用戶信息。</p>8

<form>9

<p>姓名：<inputtype="text"/></p>10

<p>密碼：<inputtype="password"/></p>11

</form>12

</body>13

</html>6.2.3單選按鈕<form>

<inputtype="radio"name="名稱"></form>【示例6-4】在表單中添加一個(gè)單選按鈕。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加單選按鈕</title>5

</head>6

<body>7

<form>8

<p>選擇您所在的城市：<br/>9

<inputtype="radio"/>北京10

<inputtype="radio"/>上海11

<inputtype="radio"/>南京12

<inputtype="radio"/>石家莊13

</p>14

</form>15

</body>16

</html>下面將示例6-4代碼進(jìn)行更改。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加單選按鈕</title>5

</head>6

<body>7

<form>8

<p>選擇您所在的城市：<br/>9

<inputtype="radio"name="city"/>北京10

<inputtype="radio"name="city"/>上海11

<inputtype="radio"name="city"/>南京12

<inputtype="radio"name="city"/>石家莊13

</p>14

</form>15

</body>16

</html>6.2.4復(fù)選框<form>

<inputtype="checkbox"name="名稱"></form>【示例6-5】在表單中設(shè)置一個(gè)復(fù)選框。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加復(fù)選框</title>5

</head>6

<body>7

<form>8

<p>選擇您想要的資訊內(nèi)容：<br/>9

<inputtype="checkbox"name="zixun"/>體育10

<inputtype="checkbox"name="zixun"/>美容11

<inputtype="checkbox"name="zixun"/>服飾12

<inputtype="checkbox"name="zixun"/>旅游13

</p>14

</form>15

</body>16

</html>6.2.5“提交”按鈕<form><inputtype="submit"name="名稱"value=""></form>【示例6-6】在表單中添加一個(gè)文本框、一個(gè)密碼框和一個(gè)“提交”按鈕。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加“提交”按鈕</title>5

</head>6

<body>7

<p>表單的作用就是收集用戶信息。8

<form>9

<p>姓名：<inputtype="text"/></p>10

<p>密碼：<inputtype="password"/></p>11

<p><inputtype="submit"value="提交"/></p>12

</form>13

</body>14

</html>6.2.6“重置”按鈕<form>

<inputtype="reset"name="名稱"value=""></form>【示例6-7】在表單中添加一個(gè)文本框、一個(gè)密碼框和一個(gè)“重置”按鈕。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加“重置”按鈕</title>5

</head>6

<body>7

<form>8

<p>姓名：<inputtype="text"/></p>9

<p>密碼：<inputtype="password"/></p>10

<inputtype="reset"value="重置"/>11

</form>12

</body>13

</html>6.2.7“圖像”按鈕<form>

<inputtype="image"src="圖像源文件"></form>【示例6-8】在表單中設(shè)置一個(gè)“圖像”按鈕。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加“圖像”按鈕</title>5

</head>6

<body>7

<form>8

<p>姓名：<inputtype="text"/></p>9

<p>密碼：<inputtype="password"/></p>10

<inputtype="image"src="qd.jpg"/>11

</form>12

</body>13

</html>6.2.8文件域<form>

<inputtype="file"name="名稱"></form>【示例6-9】在表單中添加一個(gè)文件域。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>為頁面添加文件域</title>5

</head>6

<body>7

<p>表單的作用就是收集用戶信息。</p>8

<form>9

<p><inputtype="file"/></p>10

</form>11

</body>12

</html>6.2.9隱藏域<form>

<inputtype="hidden"></form>【示例6-10】設(shè)置一個(gè)隱藏域，保存上次以及本次在文本框中輸入的內(nèi)容。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>隱藏域</title>5

<scriptlanguage="javascript">6

functiontesttxt()7

{8

if(myform.oldname.value.length==0)9

{alert("您是第一次輸入姓名，本次輸入的姓名為"+myform.myname.value)}10

else11

{alert("您上次輸入的姓名為"+myform.oldname.value+"\n本次輸入的姓名："+myform.myname.value)}12

myform.oldname.value=myform.myname.value13

}14

</script>15

</head>16

<body>17

<formname="myform"id="myform">18 請輸入您的姓名：<inputtype="text"name="myname"/>19

<inputtype="hidden"name="oldname"value=""/>20

<inputtype="button"onclick="testtxt()"value="確定"/>21

</form>22

</body>23

</html>6.3下拉列表<selectname="名稱">

<optionvalue="">選項(xiàng)內(nèi)容</option>

<optionvalue="">選項(xiàng)內(nèi)容</option>

<optionvalue="">選項(xiàng)內(nèi)容</option>

…</select>【示例6-11】在表單中設(shè)置一個(gè)下拉列表。1

<!DOCTYPEhtml>2

<html>3

<head>4

<title>下拉列表</title>5

</head>6

<body>7

<formname="myform1"id="myform1">8 用戶名：<inputtype="text"name="username"/><br/><br/>9 從何處得知本站：10

<selectname="where">11

<optionvalue="web">網(wǎng)絡(luò)</option>12

<optionvalue="newspapers">報(bào)刊</o

溫馨提示

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

最新文檔

評論

0/150

提交評論