第三章 表單
主要內(nèi)容：制作簡(jiǎn)單的網(wǎng)頁(yè)萝风，實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面跳轉(zhuǎn)
網(wǎng)頁(yè)中有很多視頻和音頻嘀掸，簡(jiǎn)單實(shí)現(xiàn)方式如下：
將所需要的視頻、音頻與代碼放在同一文件夾下规惰，
<video autoplay src="../video/ch5.1.mp4 " controls></video>
代碼釋義：
視頻元素：<video src="視頻路徑" controls></video>
其中：
??????? controls:提供播放睬塌、暫停和音量的控件。
??????? autoplay:自動(dòng)播放(部分瀏覽器不支持自動(dòng)播放歇万，詳情可自行百度揩晴，我所了解到的一些小情況)
????????網(wǎng)址(https://www.cnbeta.com/articles/soft/652127.htm)所見(jiàn)！Ｌ盎恰硫兰！
音頻元素：<audio controls src="../audio/audio.mp3"></audio>
????????controls:提供播放、暫停和音量的控件
頁(yè)面結(jié)構(gòu)：
網(wǎng)頁(yè)主要包含三個(gè)部分
???????header:標(biāo)題頭部區(qū)域的內(nèi)容（用于頁(yè)面或頁(yè)面中的一塊區(qū)域）
???????section:Web頁(yè)面中的一塊獨(dú)立區(qū)域
???????footer:標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面的一塊區(qū)域）
頁(yè)面中的區(qū)域又分為三個(gè)部分：
???????article:獨(dú)立的文章內(nèi)容
???????aside:相關(guān)內(nèi)容或應(yīng)用（常用于側(cè)邊欄）
???????nav:導(dǎo)航類輔助內(nèi)容
今天的主要內(nèi)容表單等網(wǎng)頁(yè)的制作：
一寒锚、 表單語(yǔ)法：
- 1.文本框：
<form method="post" action="">
文本框：賬號(hào)：<input type="text" size="30" maxlength="10"/><br/>
</form>
- 2.密碼框：
<form method="post" action="">
密碼框：密碼：<input type="password" size="30" maxlength="10" />
</form>
屬性：
???????type:表單類型
???????size：指定表單元素的初始寬度劫映。當(dāng) type 為 text 或 password時(shí)，表單元素的大小以字符為單位刹前。對(duì)于其他類型泳赋，寬度以像素為單位
???????maxlength：type為text 或 password 時(shí)，輸入的最大字符數(shù)
- 3.單選按鈕：
<form method="post" action="">
單選按鈕：性別： <input name = "gen" type="radio" value="男" checked/>男
<input name = "gen" type="radio" value="女"/>女<br/>
</form>
???????注意：
???????相互排斥的單選按鈕name必須一致才能達(dá)到效果
???????checked：默認(rèn)選擇一個(gè)單選按鈕
- 4
<form method="post" action="">
復(fù)選框： 愛(ài)好： <input type="checkbox" />運(yùn)動(dòng)
<input type="checkbox" />聊天
<input type="checkbox" />玩游戲<br/>
</form>
???????checked：默認(rèn)選擇一個(gè)選項(xiàng)
- 5
下拉列表框：月份
<select >
<option value="一月">一月</option>
<option value="二月">二月</option>
<option value="三月" selected = selected >三月</option>
</select>
???????selected=selected：頁(yè)面加載時(shí)默認(rèn)選擇的一項(xiàng)
- 6
多行文本域：<textarea cols="40" rows="3">
iG奪冠
</textarea><br/>
???????cols：顯示的行數(shù)
???????rows：顯示的列數(shù)
- 7
文件域：<input type="file"/>
- 8
郵箱：
<input type="email"/>
<input type="submit" value="提交"/><br/>
???????帶有自動(dòng)驗(yàn)證輸入的郵箱格式功能喇喉。
- 9
數(shù)字：<input type="number" max="50" min="10" step="2"/>
???????只能輸入數(shù)字祖今，且可滾動(dòng)加減。
- 10
滑塊：<input type="range" max = "50" min = "10" step = "2"/>
???????max:最大值
???????min:最小值
???????step:合法的間隔數(shù)
- 11
隱藏域：<input type="hidden" id = "userid"/>
<input type="text" placeholder="用戶名" pattern="^1[358]\d{9}" required/>
<input type="submit" value="提交" disabled/>
???????readonly：只讀
???????disabled：禁用
- 12
搜索框：<input type="search"/>
- 13
重置按鈕：重置：<input type="reset"/>
- 14
圖片按鈕：圖片：<input type="image"src = "../images/星之守護(hù)者.png"/>
- 15
普通按鈕：提交：<input type="button" value="提交" />
二拣技、 網(wǎng)頁(yè)跳轉(zhuǎn)：
1-15個(gè)表單都掌握后千诬，就可以制作簡(jiǎn)單的網(wǎng)頁(yè)，網(wǎng)頁(yè)制作完成后膏斤，就要去實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)站頁(yè)面跳轉(zhuǎn)大渤，就像你注冊(cè)QQ號(hào)一樣，填完所需要的資料掸绞，點(diǎn)擊申請(qǐng)就要進(jìn)入下一個(gè)新的頁(yè)面。
這主要就是<form method="post" action="">······網(wǎng)頁(yè)制作過(guò)程例如上面1-15個(gè)表單的內(nèi)容一樣······</form>
的功勞了其中：
???????method 屬性規(guī)定如何發(fā)送表單數(shù)據(jù)（表單數(shù)據(jù)發(fā)送到 action 屬性所規(guī)定的頁(yè)面）耕捞。
表單數(shù)據(jù)可以作為 url 變量（method="get"）或者 http post （method="post"）的方式來(lái)發(fā)送衔掸。
???????action"程序"指明提交保單后執(zhí)行的程序URL地址，也就是按回車(chē)或者點(diǎn)提交以后打開(kāi)的網(wǎng)頁(yè)俺抽，可以是任何存在的網(wǎng)頁(yè)地址(抱歉敞映！目前我們所學(xué)的知識(shí)還不可以！)磷斧。
???????在action后加上你制作的網(wǎng)站的名稱振愿，就可以實(shí)現(xiàn)簡(jiǎn)單的網(wǎng)頁(yè)跳轉(zhuǎn)捷犹，要實(shí)現(xiàn)復(fù)雜的網(wǎng)頁(yè)跳轉(zhuǎn)，還是有待學(xué)習(xí)懊崮Ｆ记浮！档桃！
網(wǎng)頁(yè)跳轉(zhuǎn)代碼如下：
<form method="post" action="demo.html">
賬號(hào)：<input type="text" size="30" maxlength="10"/><br/><p></p>
密碼：<input type="password" size="30" maxlength="10" /><br/><p></p>
性別：<input name = "gen" type="radio" value="男" checked/>男
<input name = "gen" type="radio" value="女"/>女<br/><p></p>
愛(ài)好： <input type="checkbox" />運(yùn)動(dòng)
<input type="checkbox" />聊天
<input type="checkbox" />玩游戲<br/><p></p>
<input type="submit" value="提交" />
</form>
噢Ｇ购ⅰ！藻肄！對(duì)了蔑舞，所謂的簡(jiǎn)單網(wǎng)頁(yè)跳轉(zhuǎn)，并不是跳轉(zhuǎn)隨便一個(gè)網(wǎng)頁(yè)嘹屯，而是跳轉(zhuǎn)到你用HTML5制作的網(wǎng)頁(yè)攻询，謹(jǐn)記！Ｖ莸堋钧栖！
暫時(shí)不能隨便跳轉(zhuǎn)你想要的網(wǎng)頁(yè) ( 起碼暫時(shí)不能 ！４裟佟桐经！)所以想要實(shí)現(xiàn)更厲害的操作，就要好好學(xué)習(xí)浙滤，慢慢來(lái)阴挣，后面一定會(huì)更加有趣！７睦啊畔咧！
三、 課后作業(yè)制作：
阿里巴巴會(huì)員注冊(cè)頁(yè)面：
代碼內(nèi)容如下：
所需照片導(dǎo)入與此代碼保存文件夾相同的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../images/作業(yè)阿里巴巴會(huì)員注冊(cè)頁(yè)面1.jpg " alt=""/><br/>
<div style="margin-left: 201px" >電子郵箱:<input type="email "/></div><br/>
<div style="margin-left: 185px" >會(huì)員登錄名:<input type="text"/></div><br/>
<div style="margin-left: 235px" >密碼:<input type="password "/></div><br/>
<div style="margin-left: 170px" >再次輸入密碼:<input type="password"/></div><br/>
<div style="margin-left: 185px" >會(huì)員身份：
<input name = "gen" type="radio" value = "買(mǎi)家" checked />買(mǎi)家
<input name = "gen" type="radio" value = "賣(mài)家"/>賣(mài)家
<input name = "gen" type="radio" value = "兩者都是"/>兩者都是</div><br/>
<div style="margin-left: 215px" >驗(yàn)證碼:
<input type="text"/>
<img src="../images/作業(yè)阿里巴巴注冊(cè)4.gif "/>
<a href="#">看不清揖膜？換一張</a></div><br/>
<div style="margin-left: 270px" ><img src="../images/作業(yè)阿里巴巴注冊(cè)5.gif " alt=""/></div><br/>
<div style="margin-left: 270px" ><textarea cols="60" rows="6">
歡迎閱讀阿里巴巴公司（阿里巴巴）服務(wù)條款協(xié)議(下稱"本協(xié)議")誓沸，您應(yīng)當(dāng)在使用服務(wù)之前認(rèn)真閱讀本協(xié)議全部?jī)?nèi)容，且對(duì)本協(xié)議中加粗字體顯示的內(nèi)容壹粟，阿里巴巴督促您應(yīng)重點(diǎn)閱讀拜隧。本協(xié)議闡述之條款和條件適用于您使用阿里巴巴中文網(wǎng)站（所涉域名為：Alibaba.com.cn、alibaba.cn趁仙、1688.com洪添，下同），所提供的在全球企業(yè)間(B-TO-B)電子市場(chǎng)(e-market)中進(jìn)行貿(mào)易和交流的各種工具和服務(wù)(下稱"服務(wù)")雀费。</textarea></div><br/>
<img src="../images/作業(yè)阿里巴巴會(huì)員注冊(cè)頁(yè)面2.jpg " alt=""/>
</body>
</html>
網(wǎng)頁(yè)制作結(jié)果如下圖所示：
有意思吧８缮荨！盏袄！好玩吧７蘧１∩丁！
行了逛尚，行了垄惧，今天就這樣吧！：诘汀赘艳！
看代碼也看累了，來(lái)個(gè)美圖養(yǎng)養(yǎng)眼克握。
OK蕾管！OK！OK菩暗！明天見(jiàn)ｊ！停团！
