TP03表单和智能表单的操作

表单和智能表单的操作第三章回顾与作业点评使用什么标签声明无序列表和列表项？定义列表的标签dl、dt、dd分别表示什么意义，其作用是什么？创建表格的基本结构语法是什么？提问2/35预习检查语义化的概念是什么？常见的表单元素有哪些？制作一个下拉列表需要使用哪些标签？提问3/35本章任务制作语义化的表单4/35本章目标会使用表单元素布局表单会制作语义化的表单5/35表单在网页中的应用大家在上网时，看到的表单在网页中的应用有哪些？问题6/35表单包含的控件单行文本输入框(TEXT)单选按钮(RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)什么是表单官方解释：表单：可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。8/35表单语法语法<formmethod="post"action="result.html"><p>名字：<inputname="name"type="text"></p><p>密码：<inputname="pass"type="password"></p><p><inputtype="submit"name="Button"value="提交"><inputtype="reset"name="Reset"value="重填"></p></form>规定如何发送表单数据常用值：get|post表示向何处发送表单数据演示示例1：表单的基本结构在实际网页开发中通常采用post方式提交表单数据经验9/35表单元素格式语法<inputtype="text"name="fname"value="text">Input元素类型Input元素名称Input元素的值属性说明type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和

button，默认为

textname指定表单元素的名称。value元素的初始值。type为

radio时必须指定一个值size指定表单元素的初始宽度。当

type为text或

password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位maxlengthtype为text或password时，输入的最大字符数checkedtype为radio或checkbox时，指定按钮是否是被选中10/35表单元素8-1文本框语法<inputtype="text"name="userName"value="用户名"size="30"maxlength="20">文本框文本框名称文本框初始值文本框长度文本框可输入最大字符演示示例2：文本框11/35表单元素8-2密码框语法<inputtype="password"name="pass"

size="20">密码框密码框的名称密码框的长度演示示例3：密码框12/35表单元素8-3单选按钮语法<inputname="gen"type="radio"value="男"checked="checked">男<inputname="gen"type="radio"value="女">女单选按钮框值单选按钮选中状态演示示例4：单选按钮13/35表单元素8-4复选框语法<inputtype="checkbox"name="interest"value="sports">运动<inputtype="checkbox"name="interest"value="talk"checked="checked">聊天<inputtype="checkbox"name="interest"value="play">玩游戏复选框值复选框选中状态演示示例5：复选框14/35表单元素8-5列表框语法<selectname="列表名称"size="行数"><optionvalue="选项的值"selected="selected">…</option><optionvalue="选项的值">…</option></select>列表框选项演示示例6：下拉列表框默认选中项15/35表单元素8-6按钮图片按钮语法<inputtype="reset"name="butReset"value="reset按钮"><inputtype="submit"name="butSubmit"value="submit按钮"><inputtype="button"name="butButton"value="button按钮"/>重置按钮普通按钮演示示例7：按钮提交按钮图片路径<inputtype="image"src="images/login.gif"/>按钮上显示的文字16/35表单元素8-7多行文本域语法<textareaname="showText"cols="x"rows="y">文本内容</textarea>多行文本域演示示例8：文本域显示的列数显示的行数17/35表单元素8-8文件域语法<formaction=""method="post"><p><inputtype="file"name="files"/><inputtype="submit"name="upload"value="上传"/></p></form>文件域演示示例9：文件域18/35学员操作—网易邮箱登录页面需求说明制作网页邮箱登录页面完成时间：10分钟练习19/35学员操作—阿里巴巴用户注册页面需求说明电子邮箱、登录名、密码最多能容纳的字符数是32个字符，验证码最多能容纳5个字符。默认情况下会员身份中的“买家”处于选中状态。提交按钮使用素材中提供的图片代替。完成时间：10分钟练习20/35学员操作—人人网注册页面需求说明注册邮箱、密码、姓名和验证码最多能容纳的字符数分别是50、16、8和5。默认情况下，性别中的“男”处于选中状态。生日下拉列表中的1991年10月30日处于选中状态。提交按钮使用素材中提供的图片代替。完成时间：10分钟练习21/35共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解22/35表单的高级应用隐藏域只读禁用只读文本框禁用按钮23/35隐藏域语法<inputtype="hidden"value="666"name="userid">隐藏域演示示例10：隐藏域24/35只读和禁用语法<inputname="name"type="text"value="张三"readonly="readonly"><inputtype="submit"

disabled="disabled"value="保存">只读文本框禁用演示示例11：只读与禁用25/35学员操作—新浪微博资料修改页面需求说明生日中各下拉列表默认为空。常用邮箱文本框中的默认文本为“student@”，且文本框不可修改。提交按钮使用素材中提供的图片代替。完成时间：10分钟练习26/35共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解27/35语义化的表单2-1什么是表单语义化语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解语义化的作用语义化的(X)HTML文档有助于提升你的网站对访客的易用性，提供方便符合W3C标准使用语义化的标签结构合理、代码简洁28/35语义化的表单2-2域域标题演示示例13：域<formaction=""method="post">

<fieldset>

<legend>用户信息</legend>

姓名：<inputtype="text"/> ……</fieldset></form>域域标题语法29/35表单元素的标注增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上演示示例14：标注<labelfor="id">标注的文本</label><inputtype="radio"name="gender"id="male"/>表单元素的id表单元素id语法30/35小结表单语义化语义化的目标是为了页面结构更加合理在网页设计和开发过程中，使用语义化的标签，能够达到见名知义的作用语义化的结构，更加符合Web标准，更利于搜索引擎的抓取（SEO的优化）和开发维护31/35学员操作—语义化的调研问卷需求说明使用语义化的标签制作调研问卷。能够实现鼠标点击文本时，与文本对应的表单元素自动获得焦点。完成时间：10分钟练习32/35学员操作—QQ号码申请页面需求说明使用语义化的标签制作QQ号码申请页面。完成时间：10分钟练习33/35共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解34/35HTML5智能form表单新属性智能表单介绍1、XHTML中需要放在form之中的诸如input/button/select/textarea等标签元素，在HTML5中完全可以放在页面任何位置，然后通过新增的form属性指向元素所属表单的ID值，即可关联起来。<FORMid=foo>…</FORM><INPUT…

form="foo">2、HTML5提供了多样的输入类型和风格，让设计界面更加丰富HTML5智能form表单新属性HTML5智能form表单新属性<inputtype=email…限制用户输入email格式<inputtype=url…限制用户输入网址格式<inputtype=date…限制用户输入日期格式<inputtype=time…限制用户输入时间格式<inputtype=month…限制用户输入月份格式<inputtype=week…限制用户输入周格式<inputtype=number…限制用户输入数字格式<inputtype=range…一个滑动条效果<inputtype=search…搜索格式results="n"<inputtype=color…选择颜色格式HTML5智能form表单新元素datalist:元素规定输入域的选项列表keygen:元素是密钥对生成器output:元素用于不同类型的输出，比如计算或脚本输出<inputid=“movielist"list="mydata"/><datalistid="mydata">

<optionlabel="Top1"value="让子弹飞"><optionlabel="Top2"value="非诚勿扰2"><optionlabel="Top3"value="大笑江湖"><optionlabel="Top4"value="赵氏孤儿"><optionlabel="Top5"value=“PHP100"></datalist>List属性表示引用的是datalist标签里面的选项keygen\output的使用<formaction=“”method="get">

Username:<inputtype="text"name="usr_name"/>

Encryption:<keygenname="security"/>

<inputtype="submit"/></form><formoninput="res.value=no1.value*no2.value“> <inputtype="text"name="no1"> <inputtype="text"name="no2"> <outputname="res"></output></form>新增的input属性属性值说明Requiredrequired表单拥有该属性表示其内容不能为空，必填placeholder提示文本表单的提示信息，存在默认值将不显示Autofocusautofocus自动聚焦属性，页面加载完成自动聚焦到指定表单的位置，比如打开一个页面，如果某一个表单元素上使用了此属性，那么焦点会自动聚集在此位置Pattern正则表达式输入的内容必须匹配到指定正则pattern

属性指定输入内容必须符合指定模式（正则表达式）。例：<inputid="phone_num"name="phone_num"type=“tel"pattern="\d{3}-\d{4}-\d{4}"placeholder="xxx-xxxx-xxxx"/>form属性HTML5加强了表单验证功能，可验证是否可空及输入内容的类型及格式，并可通过为表单或控件设置novalidate

属性指定在提交表单时不验证整个form或指定的input。input的属性autocomplete

默认为on

其含义代表是否让浏览器自动记录