项目6和用户交互——表单详解.ppt

1 项目6 和用户交互——表单 《HTML5网页设计与实现》 『作 者』徐 琴 『时 间』2015.6 和用户交互—表单——学习情境 在前面的学习中，列表、图片等元素已经添加到页面了，并且也设置了相应的CSS样式达到预期的效果。不过小黄发现搜索框、登录和注册等页面中很多元素还没有添加，他需要学习有关表单的知识来完成这些内容。 2 表单在网页中主要负责数据采集功能，通过脚本程序可以将表单中采集的数据转移。一个表单有两个基本组成部分：表单标签，这里面包含了处理表单数据传递方式；?表单元素，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、按钮和文件上传框等。 3 表单标签 form规定输入域所属的一个或多个表单。 4 id 表单标识 method 表单的数据传递方式，有get和post两种传递数据方式 action 定义表单数据传递后的处理页面 name 规定表单的名称 target 规定在何处打开action URL，值有_blank,_self,_parent,_top和framename accept-charset 规定服务器可处理的表单数据字符集 autocomplete 规定是否启用表单的自动完成功能，有on和off两个值。 novalidate 设置了该特性不会在表单提交之前对其进行验证 表单元素 表单元素是允许用户在表单中（比如:文本域，下拉列表，单选框，复选框等等）输入信息的元素。 单行文本框 5 id 标识一个单行文本框 name 文本框名 value 单行文本框的初始值 size 单行文本框的长度 maxlength 在文本框中能够输入的最大字符数 表单元素 多行文本框 6 cols 指定文本输入框的可见的列数 rows 指定文本输入框的可见的行数 name 指定文本区的名称 disable 使得文本输入框无效，无法填写 maxlength 在文本框中能够输入的最大字符数 wrap off：不自动换行，为默认动作 virtual：将实现文本区内的自动换行，但在传输数据时，文本只在用户按下 Enter 键的地方进行换行，其他地方没有换行的效果 physical：将实现文本区内的自动换行，并以文本框中的文本效果进行数据传递 表单元素 单选按钮 7 name 组别名称，同一组按钮有相同名称 value 单选按钮进行数据传递时的选项值 checked 默认选择项 表单元素 复选框 8 name 组别名称，同一组按钮有相同名称 value 单选按钮进行数据传递时的选项值 checked 默认选择项 表单元素 下拉列表 9 name 列表名称 multiple 允许多选 Size size 属性规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，浏览器会显示出滚动条，表示可以查看更多选项。 下拉列表的常见属性 表单元素 下拉列表 10 name 选项名称 value 选项被选中后进行数据传递时的值 checked 默认选择项 下拉列表选项的常见属性 表单元素 按钮 11 name 按钮名称 value 按钮上显示的文本 onmousedown 用户鼠标按下时触发的事件 onmouseup 鼠标抬起时触发的事件 onclick 点击按钮事件(包括鼠标按下和抬起两个动作) 表单元素 隐藏域 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。HTML描述为：input type=hidden 。 12 表单元素 HTML5的新INPUT类型 INPUT类型---email email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值。HTML描述为：input type=email。 INPUT类型---number number类型用于应该包含数值的输入域，可设定数字的范围。 INPUT类型---range range 类型用于应该包含一定范围内数字值的输入域，range 类型显示为滑动条。 INPUT类型--- Date Pickers（日期选择器） 13 练习题 14 1. 制作一个搜索栏，如下图所示。 练习题 15 利用素材包中的img.png制作出如下图所示的注册页面。（注：圆角边框效果可以参考项目5中的知识点border-radius） 16 THANK YOU! 项目6 和用户交互——表单 《HTML5网页设计与实现》