2019-03-21第六次课表单续

表单
一、 表单的基本应用
(一) 表单典型的应用场景

1. 登录、注册
2. 网上订单
3. 调查问卷
4. 网上搜索
   (二) 表单标签及表单属性
5. 表单标签
   在HTML中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于一个容器标签，其他表单标签需要在它的范围中才有效。
6. 表单的属性
   action
   此属性指示服务器上处理表彰输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。
   语法：action=”URL”
   如果action的属性为空，则默认表单提交到本页。
   method
   此属性告诉浏览器如何将数据发送给服务器，它指定服务器发送数据的方法（post还是get）.
   如果是get，浏览器创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL指定的脚本，以进行处理。
   如果是post，表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。
   语法：method=get|post.
7. 案例演示：简单的表单提交
   效果

核心代码
<FORM name="form1" method="get" action="result.html">
<P>名字：
<INPUT name="name" type="text" class="input" id="fname">
</P>
<P>密码：
<INPUT name="pass" type="password" class="input" id="pass">
</P>
<P>
<INPUT type="submit" name="Button" value="提交">
<INPUT type="reset" name="Reset" value="重填">
</P>
</FORM>

4. get|post提交方式的总结
   post提交不会改变地址栏状态，表彰数据不会被显示
   get提交，地址栏状态会发生变量，表单数据会在URL中显示
   所以POST比GET安全。
   (三) 表单元素及其格式
5. 表单元素
   在表单中添加表单元素，使用<input>标签
   语法
   <input type="text" name="fname" value="text">
   属性说明

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name 指定表单元素的名称。
value 元素的初始值。type 为 radio时必须指定一个值
size 指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text 或 password 时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中

2. 文本框
   描述
   用于输入单行文本信息，如用户名输入框等。
   语法
   <input type="text" name="userName" value="用户名" size="30" maxlength="20" >
   属性说明

size与maxlength的区别，当没有设置maxlength时向文本框中输入内容没有限制，当设置maxlength时再向文本框中输入值将会有字符数的限制。上面代码显示，文本显示长度为30，允许输入的最多字符数为20.
即size是指文本框的长度，maxlength是指输入的数据长度。
案例演示

<form method="post" action="">
<P>名    字：
<input type="text" value="" name="fname">

</P>
<P>姓    氏：
<input type="text" name="lname" value="张" > </P>
<P>登录名：
<input type="text" name="sname" size="30" maxlength="20">
</P>
</form>

3. 密码框
   描述
   用户希望输入的数据被处理，以名被他人利用，如密码。
   语法
   <input type="password " name="pass" size="20" >
   属性说明

type取值为password时为密码框，name属性是必须的，其他属性并不是必须的，实际开发中通常不设置value初始值
案例演示：密码

<form method="post" action="">
<P>用户名：<input name="name" type="text" size="21"> </P>
<P>密   码：
<input name="pass" type="password" size="22">
</P>
</form>
经验
密码框能保证输入数据的安全吗？
不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入数据安全。为了使数据安全，应该加强人为管理，采用数据加密码技术等。

4. 单选框
   描述
   单选按钮用于一组相互排斥的值，组中的每个单选按钮应用具有相同的名称，用户一次只能选择一个选项。
   只有从组中选定的单选按钮才会在提交的数据中提交对应的数值
   在使用单选按钮时，需要一个显式的value属性值
   语法
   <input name="gen" type="radio" value="男" checked="checked" >男
   <input name="gen" type="radio" value="女" >女
   属性说明

1. type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的
2. 同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
3. 希望在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的checked属性
   案例演示：单选按钮

<form method="post" action="">
性别：
<input name="gen" type="radio" class="input" value="男" checked="checked">男 
<input name="gen" type="radio" value="女" class="input">女
</form>

5. 复选框
   描述
   复选框允许用户选择多个选项。
   语法
   <input type="checkbox" name="interest" value="sports">运动
   <input type="checkbox" name="interest" value="talk" checked="checked" >聊天
   <input type="checkbox" name="interest" value="play">玩游戏
   属性说明

1. type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。
2. 同一组复选框，根据需要可设置name属性值相同，也可不同
3. 希望在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有多个复选框有默认的checked属性。
4. 一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。
   案例演示：复选框

<form method="post" action="">
爱好：
<input type="checkbox" name="interest" value="sports" checked="checked">运动  
<input type="checkbox" name="interest" value="talk"> 聊天  
<input type="checkbox" name="interest" value="play"> 玩游戏
</form>
技巧
复选框的名称要根据应用来确定名称是否相同。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能够同时获取。例如，兴趣爱好，一个有多个兴趣爱好，这样筛选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。
否则，每个选项都需要单独进行读取，从而降低了效果。

6. 列表框
   描述
   列表框主要是为了用户快速、方便、正确地选择一些选项，并且节省页面空间
   语法
   <select name="列表名称" size="行数">
   <option value="选项的值" selected="selected">…</option >
   <option value="选项的值">…</option >
   </select>
   <select>标签用户显示可供用户选择的下拉列表，每个选项由<option>来表示；
   <select>标签必须包含至少一个<option>标签。
   属性说明

name和value属性是必须的，其他属性并不是必须的。
size确定静静中可同时看到的行数;
selected默认选中，只能有一个选中项
案例演示：列表框

<form method="post" action="">
出生日期:
<input name="byear" value="yyyy" size="4" maxlength="4">  年
<select name="bmon" >
<option value="">[选择月份]</OPTION>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10" selected="selected">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select> 月 
<input name="bday" value="dd" size="2" maxlength="2" > 日
</form>

7. 按钮
   描述
   按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset）。
   普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。
   语法
   <input type=”button|reset|submit” name=”btn” value=”按钮”>
   name和value属性是必须的，其他属性并不是必须的。
   案例演示

<form method="post" action="">
<P>用户名：<input name="name" type="text"> </P>
<P>密    码：<input name="pass" type="password"></P>
<P>
<input type="reset" name="butReset" value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮" onclick="alert(this.value)">
</P>
</form>
图片按钮
<input type="image" src="images/login.gif" />

<input type="image" src="images/login.gif" />

8. 多行文本域
   描述
   当需要在网页中输入两行或以上的文本时，前面学习的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<textarea>
   语法
   <textarea name="showText" cols="x" rows="y">文本内容 </textarea >
   语法说明

案例演示

<form method="post" action="">
<H4>填写个人评价 </H4>
<P>
<textarea name="textarea" cols="40" rows="6">
自信、活泼、善于思考...
</textarea>
</P>
</form>

9. 文件域
   描述
   文件域的作用是用于实现文件的选择，在应用时只需要把type属性设置为”file”即可。
   在实际操作中，文件域通常用于文件上传的操作，如选择需要上传文本、图片等。
   语法
   <form action="" method="post" enctype="multipart/form-data">
   <p><input type="file" name="files" />
   <input type="submit" name="upload" value="上传" /></p>
   </form>
   语法说明
   (1) . type值为file
   (2) . 在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交
   案例演示

<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" /><br />
<input type="submit" name="upload" value="上传" /></p>
</form>
(四) 课堂作业

1. 制作网易邮箱登录页面
   训练要求
   使用表格布局排版
   制作网页邮箱登录页面
   效果图

(五) 课后作业

1. 阿里里巴巴用户注册页面
   需求说明
   (1) . 电子邮箱、登录名、密码最多能容纳的字符数是32个字符，验证码最多能容纳5个字符。
   (2) . 默认情况下会员身份中的“买家”处于选中状态。
   (3) . 提交按钮使用素材中提供的图片代替。
   效果图

二、 表单的高级应用
(一) 表单的隐藏域

1. 描述
   有一些表单不需要在网页上显示，但后台服务器需要这些数据进行业务处理。比如用户的id。

2. 语法
   <input type="hidden" value="666" name="userid">

3. 语法说明
   将”type”属性设置为”hidden”

4. 案例演示：隐藏域的提交
   需求说明
   在登录页面中使用隐藏域保存用户的userid信息。
   实现效果

参考代码
<form action="" method="get">
<p>用户名：<input name="name" type="text"></p>
<p>密  码:<input type="password" name="pwd"></p>
<p><input type="submit" value="提交"></p>
<p><input type="hidden" name="userid" value="1816203"></p>
</form>
提交

(二) 表单的只读与禁用设置

1. 描述
   在某些情况下，需要对表单元素进行限制，即设置表单元素为只读或禁用。它们常见的应用场景如下：
   只读场景：网站服务器不希望用户修改的数据，这些数据在表单元素中显示，例如注册或交易协议、商品价格等
   禁用声景：只有满足某个条件后，才能选用某项功能。例如，只有用户同意注册协议后，才允许单击“注册”按钮；播放器控件在播放状态时，不能再单击“播放”按钮等。
2. 语法
   只读：
   readonly=”readonly”
   禁用
   disabled=”disalbled”
3. 案例演示：只读与禁用
   需求说明
   用户名只读，提交按钮禁用
   实现效果

核心代码
<form action="" method="get">
<p>用户名：<input name="name" type="text" value="张三" readonly="readonly"></p>
<p>密    码：<input type="password" name="pwd"></p>
<p><input type="submit" value="提交" disabled="disabled"></p>
<p><input type="hidden" name="userid" value="1816203"></p>
</form>
(三) 课堂练习

1. 制作新浪微博资料修改页面
   需求说明
   (1) . 生日中各下拉列表默认为空。
   (2) . 常用邮箱文本框中的默认文本为“student@bdqn.cn”，且文本框不可修改。
   (3) . 提交按钮使用素材中提供的图片代替。
   实现效果

三、 语义化的表单
(一) 关于语义化
没有明确的定义，只是为了让搜索引擎更好的搜索到本网页和布局的美观，语义化显示得非常重要。
对比下面二个例子，一个是使用了语义化标签，一个是没有使用语义化标签。

1. 未使用

效果图 代码
<table>
<tr>
<td>姓名</td>
<td>职务</td>
</tr>
<tr>
<td>张三</td>
<td>技术员</td>
</tr>
</table>

2. 使用语义标签
   效果图 代码
   <table width="170">
   <caption> 岗位信息表</caption>
   <thead>
   <tr>
   <th>姓名</th>
   <th>职务</th>
   </tr>
   </thead>
   <tbody>
   <tr>
   <td>张三</td>
   <td>技术员</td>
   </tr>
   </tbody>
   </table>
   从上面的例子可以看出，语义化更符合表现的要求
   (二) 语义化表单
3. 标签
   在表单中，可以使用<fieldset>标签实现域的定义，使用<legend>标签来实现域的标题。
   什么是域呢？简单地说就是将一组表单元素放到<fieldset>标签内，浏览器就会以特殊的方法来显示。
   通常<fieldset>标签和<legend>标签一起使用。
4. 案例演示
   效果

核心代码
<form>
<fieldset>
<legend>用户信息</legend>
姓名：<input type="text" />
年龄：<input type="text"/>

手机：<input type="text" />
邮箱：<input type="text" />

</fieldset>
</form>
(三) 表单元素的标注

1. 描述
   对表单元素进行标注，这样做的目的就是为了增强鼠标的可用性，这是因为使用表单元素标注时，在客户端呈现的效果不会有任何特殊的改进。但是如果当用户使用鼠标单击标注的文本内容时，浏览器会自动将焦点转移到与该标注相关的表单元素上。
2. 语法
   <label for=”表单元素的id”>标注的文本</label>
3. 案例演示
   实现效果

核心代码
<form>
请选择性别:
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
女
<input type="radio" name="gender" id="female" />
</form>
(四) 课堂练习

1. 制作调查问卷
   需求说明
   (1) . 使用语义化的标签制作调查问卷。
   (2) . 能够实现鼠标点击文本时，与文本对应的表单元素自动获得焦点。
   实现效果

四、 本章总结
(1) . 表单主要用来制作动态网页，方便和用户进行交互。
(2) . 常用的表单元素有文本框、密码框、单选按钮、复选框、列表框、按钮、多行文本框。
(3) . 使用<label>标签的for属性与表单元素的id属性相结合控制单击该标签时，对应的表单元素自动获得焦点或者被选中。
(4) . 表单元素的只读和禁用属性为readonly和disabled
(5) . 语义化的表单结构使得页面简洁、合理，同时也符合W3C开发标准、有利与被网络搜索引擎抓取。
五、 课后作业
(一) 申请表

1. 需求
   (1) . 教育程度：默认选中硕士
   (2) . 国籍：有美国、澳大利亚、日本、新加坡，默认选中澳大利亚
2. 实现效果

(一) 问卷调查表

1. 需求
   (1) . 请输入您的购买日期：月份下拉选项为1-12月，日期下拉选项1-31日
   (2) . 你是否查看过我们的在线产品目录：默认选中“是”
2. 实现效果