使用html语言和css开发商业站点

第三章表单回顾与作业点评使用什么无序列表和列表项？定义列表的

dl、dt、dd分别表示什么意义，其作用是什么？创建表格的基本结构语法是什么？提问2/35预习检查制作一个下拉列表需要使用哪些？提问语义化的概念是什么？常见的表单元素有哪些？3/35本章任务制作语义化的表单4/35本章目标会使用表单元素布局表单会制作语义化的表单5/35表单在网页中的应用问题大家在上网时，看到的表单在网页中的应用有哪些？6/35表单语法语法<formmethod="post"

action="result.html"><p>

名字：<input

name="name"

type="text"></p><p>

：<input

name="pass"

type="password"

>

</p><p><input

type="submit"

name="Button"

value="提交"><input

type="reset"

name="Reset"

value="重填"></p></form>规定如何发送表单数据常用值：get

|

post表示向何处发送表单数据演示示例1：表单的基本结构在实际网页开发中通常采用post方式提交表单数据经验7/35表单元素格式语法<input

type="text" name="fname"

value="text">Input元素类型Input元素名称Input元素的值属性说明type指定元素的类型。text、password、checkbox、radio、submitreset、file、hidden、image

和button，默认为textname指定表单元素的名称。value元素的初始值。type

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

为text

或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位maxlengthtype为text

或password时，输入的最大字符数checkedtype为radio或checkbox时，指定按钮是否是被选中8/35表单元素8-1文本框语法<input

type="text" name="userName"

value="用户名"size="30"

maxlength="20">文本框文本框名称文本框初始值文本框长度文本框可输入最大字符9/35表单元素8-2框语法<inputtype="password

"

name="pass"

size="20"

>框框的名称框的长度10/35表单元素8-3单选按钮语法<input

name="gen"

type="radio"value="男"checked="checked">男<input

name="gen"

type="radio"value="女">女单选按钮框值单选按钮选中状态11/35表单元素8-4复选框语法<inputtype="checkbox"name="interest"

value="sports">运动<input

type="checkbox"name="interest"

value="talk"checked="checked">聊天<input

type="checkbox"name="interest"

value="play">玩复选框值复选框选中状态12/35表单元素8-5列表框语法列表框<select

name="列表名称"size="行数"><option

value="选项的值"selected="selected">…</option><option

value="选项的值">…</option></select>选项默认选中项13/35表单元素8-6按钮图语法<input

type="button"name="butButton"value="button按钮"/>重置按钮普通按钮演示示例7：按钮提交按钮路径<input

type="reset"name="butReset"value="reset按钮"><input

type="image" src="images/login.gif"

/>按钮上显示的文字14/35表单元素8-7多行文本域语法<textarea

name="showText"cols="x"rows="y">文本内容</textarea>多行文本域显示的列数显示的行数15/35表单元素8-8文件域语法<form

action=""

method="post"

enctype="multipart/form-data"><p><input

type="file"

name="files"

/><input

type="submit"

name="upload"

value="上传"/></p></form>文件域表单编码属性16/35学员操作—网易邮箱登录页面练习需求说明制作网页邮箱登录页面完成时间：10分钟17/35学员操作—阿里巴巴用户页面练习需求说明电子邮箱32个字符默认情况提交按钮完成时间：10分钟18/35学员操作—人人网页面练习需求说明邮箱分别是50默认情况生日下拉提交按钮完成时间：10分钟19/35共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解20/35表单的高级应用隐藏域只读禁用只读文本框禁用按钮21/35隐藏域语法<input

type="hidden"

value="666"

name="userid">隐藏域22/35只读和禁用语法<input

name="name"

type="text"

value=" "

readonly="readonly"><input

type="submit"disabled="disabled"value="保存">只读文本框禁用演示示例11：只读与禁用23/35学员操作—资料修改页面表中n材练习需求说明生日中各下拉列常用邮箱文本框“student@bdq提交按钮使用素完成时间：10分钟24/35共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解25/35语义化的表单2-1表单语义化符合W3C标准语义化的结构合理、代码简洁演示示例12：语义化26/35语义化的表单2-2域域标题演示示例13：域<form

action=""

method="post"

><fieldset><legend>用户信息</legend>：<input

type="text"/>……</fieldset></form>域域标题语法27/35表单元素的标注增强鼠标的可用性自动将焦点转移到与该标注相关的表单元素上演示示例14：标注<label

for="id">标注的文本</label><input

type="radio"

name="gender"

id="male"/>表单元素的id表单元素id语法28/35小结表单语义化语义化的目标是为了页面结构更加合理，在网页设计和开发过程中，使用语义化的能够达到见名知义的作用语义化的结构，更加符合Web标准，更利于搜索引擎的抓取（SEO的优化）和开发29/35学员操作—语义化的调研问卷作本练习需求说明使用语义化的

制能够实现鼠标点击文自动获得焦点。完成时间：10分钟30/35学员操作—码申请页面使用语义化的制作码申请页面。练习需求说明完成时间：10分钟31/35共性问题集中讲解常见问题及解决办法代码规范问题共性问题集中讲解32/35总结表单主要用来制作

页，方便和用户进行交互。常用的表单元素有文本框、

框、单选按钮、复选框、列表框、按钮、多行文本框。使用<label>

的for属性与表单元素的id属性相结合控制单击该

时，对应的表单元素自动获得焦点或者被选中。表单元素的只读和禁用属性为readonly和disabled语义化的表单结构使得页面简洁、合理，同时也符合