第三章 表单
主要内容：制作简单的网页，实现简单的页面跳转
网页中有很多视频和音频，简单实现方式如下：
将所需要的视频、音频与代码放在同一文件夹下，
<video autoplay src="../video/ch5.1.mp4 " controls></video>
代码释义：
视频元素：<video src="视频路径" controls></video>
其中：
controls:提供播放、暂停和音量的控件。
autoplay:自动播放(部分浏览器不支持自动播放，详情可自行百度，我所了解到的一些小情况)
网址(https://www.cnbeta.com/articles/soft/652127.htm)所见！！！
音频元素：<audio controls src="../audio/audio.mp3"></audio>
controls:提供播放、暂停和音量的控件
页面结构：
网页主要包含三个部分
header:标题头部区域的内容（用于页面或页面中的一块区域）
section:Web页面中的一块独立区域
footer:标记脚部区域的内容（用于整个页面或页面的一块区域）
页面中的区域又分为三个部分：
article:独立的文章内容
aside:相关内容或应用（常用于侧边栏）
nav:导航类辅助内容
今天的主要内容表单等网页的制作：
一、 表单语法：
- 1.文本框：
<form method="post" action="">
文本框：账号：<input type="text" size="30" maxlength="10"/><br/>
</form>
账号
- 2.密码框：
<form method="post" action="">
密码框：密码：<input type="password" size="30" maxlength="10" />
</form>
密码
属性：
type:表单类型
size：指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength：type为text 或 password 时，输入的最大字符数
- 3.单选按钮：
<form method="post" action="">
单选按钮：性别： <input name = "gen" type="radio" value="男" checked/>男
<input name = "gen" type="radio" value="女"/>女<br/>
</form>
性别
注意：
相互排斥的单选按钮name必须一致才能达到效果
checked：默认选择一个单选按钮
- 4
<form method="post" action="">
复选框： 爱好： <input type="checkbox" />运动
<input type="checkbox" />聊天
<input type="checkbox" />玩游戏<br/>
</form>
爱好
checked：默认选择一个选项
- 5
下拉列表框：月份
<select >
<option value="一月">一月</option>
<option value="二月">二月</option>
<option value="三月" selected = selected >三月</option>
</select>
月份
selected=selected：页面加载时默认选择的一项
- 6
多行文本域：<textarea cols="40" rows="3">
iG夺冠
</textarea><br/>
可写文本域
cols：显示的行数
rows：显示的列数
- 7
文件域：<input type="file"/>
选择文本域
- 8
邮箱：
<input type="email"/>
<input type="submit" value="提交"/><br/>
邮箱
带有自动验证输入的邮箱格式功能。
- 9
数字：<input type="number" max="50" min="10" step="2"/>
数字
只能输入数字，且可滚动加减。
- 10
滑块：<input type="range" max = "50" min = "10" step = "2"/>
滑块
max:最大值
min:最小值
step:合法的间隔数
- 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/星之守护者.png"/>
图片按钮
- 15
普通按钮：提交：<input type="button" value="提交" />
普通按钮
二、 网页跳转：
1-15个表单都掌握后，就可以制作简单的网页，网页制作完成后，就要去实现简单的网站页面跳转，就像你注册QQ号一样，填完所需要的资料，点击申请就要进入下一个新的页面。
这主要就是<form method="post" action="">······网页制作过程例如上面1-15个表单的内容一样······</form>
的功劳了其中：
method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
表单数据可以作为 url 变量（method="get"）或者 http post （method="post"）的方式来发送。
action"程序"指明提交保单后执行的程序URL地址，也就是按回车或者点提交以后打开的网页，可以是任何存在的网页地址(抱歉！目前我们所学的知识还不可以！)。
在action后加上你制作的网站的名称，就可以实现简单的网页跳转，要实现复杂的网页跳转，还是有待学习啊！！！
网页跳转代码如下：
<form method="post" action="demo.html">
账号：<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>
爱好： <input type="checkbox" />运动
<input type="checkbox" />聊天
<input type="checkbox" />玩游戏<br/><p></p>
<input type="submit" value="提交" />
</form>
噢！！！对了，所谓的简单网页跳转，并不是跳转随便一个网页，而是跳转到你用HTML5制作的网页，谨记！！！
暂时不能随便跳转你想要的网页 ( 起码暂时不能 ！！！)所以想要实现更厉害的操作，就要好好学习，慢慢来，后面一定会更加有趣！！！
三、 课后作业制作：
阿里巴巴会员注册页面：
代码内容如下：
所需照片导入与此代码保存文件夹相同的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="../images/作业阿里巴巴会员注册页面1.jpg " alt=""/><br/>
<div style="margin-left: 201px" >电子邮箱:<input type="email "/></div><br/>
<div style="margin-left: 185px" >会员登录名:<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" >会员身份：
<input name = "gen" type="radio" value = "买家" checked />买家
<input name = "gen" type="radio" value = "卖家"/>卖家
<input name = "gen" type="radio" value = "两者都是"/>两者都是</div><br/>
<div style="margin-left: 215px" >验证码:
<input type="text"/>
<img src="../images/作业阿里巴巴注册4.gif "/>
<a href="#">看不清？换一张</a></div><br/>
<div style="margin-left: 270px" ><img src="../images/作业阿里巴巴注册5.gif " alt=""/></div><br/>
<div style="margin-left: 270px" ><textarea cols="60" rows="6">
欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。</textarea></div><br/>
<img src="../images/作业阿里巴巴会员注册页面2.jpg " alt=""/>
</body>
</html>
网页制作结果如下图所示：
阿里巴巴会员注册页面
有意思吧！！！好玩吧！！！
行了，行了，今天就这样吧！！！
看代码也看累了，来个美图养养眼。
拉克丝-大元素使
古力娜扎
OK！OK！OK！明天见！！！
网友评论