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

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

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

核心代码

名字：

密码：

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

属性 说明
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. 文本框
   描述
   用于输入单行文本信息，如用户名输入框等。
   语法
   
   属性说明

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

名    字：

姓    氏：

登录名：

3. 密码框
   描述
   用户希望输入的数据被处理，以名被他人利用，如密码。
   语法
   
   属性说明

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

用户名：

密   码：

经验
密码框能保证输入数据的安全吗？
不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入数据安全。为了使数据安全，应该加强人为管理，采用数据加密码技术等。

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

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

性别：
男 
女

5. 复选框
   描述
   复选框允许用户选择多个选项。
   语法
   运动
   聊天
   玩游戏
   属性说明

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

爱好：
运动  
聊天  
玩游戏

技巧
复选框的名称要根据应用来确定名称是否相同。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能够同时获取。例如，兴趣爱好，一个有多个兴趣爱好，这样筛选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。
否则，每个选项都需要单独进行读取，从而降低了效果。

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

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

出生日期:
 年

[选择月份]
一月
二月
三月
四月
五月
六月
七月
八月
九月
十月
十一月
十二月
月 
日

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

用户名：

密    码：

图片按钮

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

案例演示

填写个人评价

<br> 自信、活泼、善于思考...<br>

9. 文件域
   描述
   文件域的作用是用于实现文件的选择，在应用时只需要把type属性设置为”file”即可。
   在实际操作中，文件域通常用于文件上传的操作，如选择需要上传文本、图片等。
   语法
   
   
   

   
   

   
   
   
   语法说明
   (1) . type值为file
   (2) . 在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交
   案例演示

(四) 课堂作业

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

(五) 课后作业

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

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

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

2. 语法
   

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

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

参考代码

用户名：

密  码:

提交

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

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

核心代码

用户名：

密    码：

(三) 课堂练习

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

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

1. 未使用

效果图 代码

姓名	职务
张三	技术员

2. 使用语义标签
   效果图 代码
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   岗位信息表

   姓名	职务
   张三	技术员

   
   从上面的例子可以看出，语义化更符合表现的要求
   (二) 语义化表单
3. 标签
   在表单中，可以使用
   标签实现域的定义，使用

   标签来实现域的标题。
   什么是域呢？简单地说就是将一组表单元素放到

   标签内，浏览器就会以特殊的方法来显示。
   通常

   标签和

   标签一起使用。
4. 案例演示
   效果

核心代码

用户信息

姓名：
年龄：

手机：
邮箱：

(三) 表单元素的标注

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

核心代码

请选择性别:
男

女

(四) 课堂练习

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

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

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

(一) 问卷调查表

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