TP03 表单和智能表单的操作

1、表单和智能表单的操作第三章回顾与作业点评回顾与作业点评使用什么标签声明无序列表和列表项？使用什么标签声明无序列表和列表项？定义列表的标签定义列表的标签dl、dt、dd分别表示什么意分别表示什么意义，其作用是什么？义，其作用是什么？创建表格的基本结构语法是什么？创建表格的基本结构语法是什么？提问提问2/35预习检查预习检查语义化的概念是什么？语义化的概念是什么？常见的表单元素有哪些？常见的表单元素有哪些？制作一个下拉列表需要使用哪些标签？制作一个下拉列表需要使用哪些标签？ 提问提问3/35本章任务本章任务制作语义化的表单制作语义化的表单4/35本章目标本章目标会使用表单元素布局表单会使用表单元素

2、布局表单会制作语义化的表单会制作语义化的表单5/35表单在网页中的应用表单在网页中的应用大家在上网时，看到的表单在网页中的应用大家在上网时，看到的表单在网页中的应用有哪些？有哪些？问题问题6/35表单包含的控件表单包含的控件单行文本输入单行文本输入框框(TEXT)单选按钮单选按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(SELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)什么是表单什么是表单官方解释：官方解释： 表单：可以收集用户的信息和反馈意见，是表单：可以收集用户的信息和反

3、馈意见，是网站管理者与浏览者之间沟通的桥梁。网站管理者与浏览者之间沟通的桥梁。 8/35表单语法表单语法语法语法 名字：名字： 密码：密码： 规定如何发送表单数据规定如何发送表单数据常用值：常用值：get | post表示向何处发送表单数据表示向何处发送表单数据演示演示示例示例1：表单的基本结构：表单的基本结构在实际网页开发中通常采用在实际网页开发中通常采用post方式提交表单数据方式提交表单数据经验经验9/35表单元素格式表单元素格式语法语法Input元素类型元素类型Input元素名称元素名称Input元素的值元素的值属性属性说明说明type指定元素指定元素的类型的类型。text、passw

4、ord、checkbox、radio、submit、reset、file、hidden、image 和和 button，默认为默认为 textname指定指定表单元素的名称表单元素的名称。value元素元素的初始值的初始值。type 为为 radio时时必须必须指定一个值指定一个值size指定指定表单元素的初始宽度表单元素的初始宽度。当当 type 为为 text 或或 password时时，表，表单单元素的大小以字符为单位。对于元素的大小以字符为单位。对于其他类型其他类型，宽度以像素为单位，宽度以像素为单位maxlengthtype为为text 或或 password 时，时，输入输入的最大

5、字符的最大字符数数checkedtype为为radio或或checkbox时，时，指定按钮是否是被选中指定按钮是否是被选中10/35表单元素表单元素8-1文本框文本框语法语法文本框文本框文本框名称文本框名称文本框初始值文本框初始值文本框长度文本框长度文本框可输入最大字符文本框可输入最大字符演示演示示例示例2：文本框：文本框11/35表单元素表单元素8-2密码框密码框语法语法密码框密码框密码框的名称密码框的名称密码框的长度密码框的长度演示演示示例示例3：密码框：密码框12/35表单元素表单元素8-3单选按钮单选按钮语法语法男男女女单选按钮框单选按钮框值值单选按钮选中状态单选按钮选中状态演示演示示

6、例示例4：单选按钮：单选按钮13/35表单元素表单元素8-4复选框复选框语法语法运动运动聊天聊天玩游戏玩游戏复选框复选框值值复选框选中状态复选框选中状态演示演示示例示例5：复选框：复选框14/35表单元素表单元素8-5列表框列表框语法语法列表框列表框选项选项演示演示示例示例6：下拉列表框：下拉列表框默认选中项默认选中项15/35表单元素表单元素8-6按钮按钮图片按钮图片按钮语法语法重置按钮重置按钮普通按钮普通按钮演示演示示例示例7：按钮：按钮提交按钮提交按钮图片路径图片路径按钮上显示的文字按钮上显示的文字16/35表单元素表单元素8-7多行文本域多行文本域语法语法文本内容文本内容 多行文本域多

7、行文本域 演示演示示例示例8：文本域：文本域显示的列数显示的列数显示的行数显示的行数17/35表单元素表单元素8-8文件域文件域语法语法 文件域文件域演示演示示例示例9：文件域：文件域18/35学员操作学员操作网易邮箱登录页面网易邮箱登录页面需求说明需求说明制作网页邮箱登录页面制作网页邮箱登录页面完成时间：完成时间：10分钟分钟练习练习19/35学员操作学员操作阿里巴巴用户注册页面阿里巴巴用户注册页面需求说明需求说明电子邮箱、登录名、密码最多能容纳的字符数是电子邮箱、登录名、密码最多能容纳的字符数是32个字符，验证码最多能容纳个字符，验证码最多能容纳5个字符。个字符。默认情况下会员身份中的默认

8、情况下会员身份中的“买家买家”处于选中状态。处于选中状态。提交按钮使用素材中提供的图片代替。提交按钮使用素材中提供的图片代替。完成时间：完成时间：10分钟分钟练习练习20/35学员操作学员操作人人网注册页面人人网注册页面需求说明需求说明注册邮箱、密码、姓名和验证码最多能容纳的字符数注册邮箱、密码、姓名和验证码最多能容纳的字符数分别是分别是50、16、8和和5。默认情况下，性别中的默认情况下，性别中的“男男”处于选中状态。处于选中状态。生日下拉列表中的生日下拉列表中的1991年年10月月30日处于选中状态。日处于选中状态。提交按钮使用素材中提供的图片代替。提交按钮使用素材中提供的图片代替。完成时

9、间：完成时间：10分钟分钟练习练习21/35共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题22/35表单的高级应用表单的高级应用隐藏域隐藏域只读只读禁用禁用只读文本框只读文本框禁用按钮禁用按钮23/35隐藏域隐藏域语法语法隐藏域隐藏域演示演示示例示例10：隐藏域：隐藏域24/35只读和禁用只读和禁用语法语法只读文本框只读文本框禁用禁用演示演示示例示例11：只读与禁用：只读与禁用25/35学员操作学员操作新浪微博资料修改页面新浪微博资料修改页面需求说明需求说明生日中各下拉列表默认为空。生日中各下拉列表默认为空。常用邮箱文本框中的默认文本为常用邮箱文本

10、框中的默认文本为“”，且文本框不可修改。，且文本框不可修改。提交按钮使用素材中提供的图片代替。提交按钮使用素材中提供的图片代替。完成时间：完成时间：10分钟分钟练习练习26/35共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题27/35语义化的表单语义化的表单2-1什么是表单语义化什么是表单语义化语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解语义化的作用语义化的作用语义化的(X)HTML文档有助于提升你的网站对访客的易用性，提供方便符合符合W3C标准标准使用语义化的标签使用语义

11、化的标签结构合理、代码简洁结构合理、代码简洁28/35语义化的表单语义化的表单2-2域域域标题域标题演示演示示例示例13：域：域 用户信息用户信息 姓名：姓名： 域域域标题域标题语法语法29/35表单元素的标注表单元素的标注增强鼠标的可用性增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上自动将焦点转移到与该标注相关的表单元素上演示演示示例示例14：标注：标注标注的文本标注的文本表单元素的表单元素的id表单元素表单元素id语法语法30/35小结小结表单语义化表单语义化语义化的目标是为了页面结构更加合理语义化的目标是为了页面结构更加合理在网页设计和开发过程中，使用语义化的标签，在网页设计和

12、开发过程中，使用语义化的标签，能够达到见名知义的作用能够达到见名知义的作用语义化的结构，更加符合语义化的结构，更加符合Web标准，更利于搜索标准，更利于搜索引擎的抓取（引擎的抓取（SEO的优化）和开发维护的优化）和开发维护31/35学员操作学员操作语义化的调研问卷语义化的调研问卷需求说明需求说明使用语义化的标签制作调研问卷。使用语义化的标签制作调研问卷。能够实现鼠标点击文本时，与文本对应的表单元素能够实现鼠标点击文本时，与文本对应的表单元素自动获得焦点。自动获得焦点。完成时间：完成时间：10分钟分钟练习练习32/35学员操作学员操作QQ号码申请页面号码申请页面需求说明需求说明使用语义化的标签制

13、作使用语义化的标签制作QQ号码申请页面。号码申请页面。完成时间：完成时间：10分钟分钟练习练习33/35共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题34/35HTML5 智能智能form表单新属性表单新属性智能表单介绍智能表单介绍1、XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富HTML5 智能智能form表单新属性表单新属

14、性HTML5 智能智能form表单新属性表单新属性input type=email input type=email 限制用户输入限制用户输入emailemail格式格式input type=url input type=url 限制用户输入网址格式限制用户输入网址格式input type=date input type=date 限制用户输入日期格式限制用户输入日期格式input type=time input type=time 限制用户输入时间格式限制用户输入时间格式input type=month input type=month 限制用户输入月份格式限制用户输入月份格式input t

15、ype=week input type=week 限制用户输入周格式限制用户输入周格式input type=number input type=number 限制用户输入数字格式限制用户输入数字格式input type=range input type=range 一个滑动条效果一个滑动条效果input type=search input type=search 搜索格式搜索格式 results=nresults=ninput type=color input type=color 选择颜色格式选择颜色格式HTML5 智能智能form表单新元素表单新元素ndatalist:元素规定输入域的选项

16、列表nkeygen:元素是密钥对生成器noutput:元素用于不同类型的输出，比如计算或脚本输出datalist option List属性表示引用的是datalist标签里面的选项keygen output的使用的使用 Username: Encryption: 新增的新增的input属性属性属性属性值值说明说明Requiredrequired表单拥有该属性表示其内容不能为空，必填placeholder提示文本表单的提示信息，存在默认值将不显示Autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单的位置，比如打开一个页面，如果某一个表单元素上使用了此属性，那么焦点会

17、自动聚集在此位置Pattern正则表达式输入的内容必须匹配到指定正则pattern属性指定输入内容必须符合指定模式（正则表达式）。例：form属性属性HTML5加强了表单验证功能，可验证是否可加强了表单验证功能，可验证是否可空及输入内容的类型及格式，并可通过为表单空及输入内容的类型及格式，并可通过为表单或控件设置或控件设置 novalidate 属性指定在提交表单属性指定在提交表单时不验证整个时不验证整个 form 或指定的或指定的input。input 的属性的属性autocomplete 默认为默认为on其含义代表是否让浏览器自动记录之前输其含义代表是否让浏览器自动记录之前输入的值入的值 小结小结新的新的 属性：属性：autocompletenovalidate新的新的 input 属性：属性：autocomplete autofocusformform overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)height 和和 width listmin, max