表单元素[上]综述.docx

表单元素(上) 教学目标： 1.了解表单元素 2.熟悉表单的各项元素 本节课程主要学习HTML5中表单元素，表单元素用于获取用户的输入数据。 知识点梳理： 一．表单元素总汇 在HTML5的表单中，提供了各种可供用户输入的表单控件。 元素名称说明form表示HTML表单input表示用来收集用户输入数据的控件textarea表示可以输入多行文本的控件select表示用来提供一组固定的选项option表示提供提供一个选项optgroup表示一组相关的option元素button表示可用来提交或重置的表单按钮（或一般按钮）datalist定义一组提供给用户的建议值fieldset表示一组表单元素legend表示fieldset元素的说明性标签label表示表单元素的说明标签output表示计算结果二．表单元素解析 1.form定义表单 form method=post action=/ button提交/button /form 解释：form元素主要是定义本身是一组表单。 元素名称说明action表示表单提交的页面method表示表单的请求方式：有POST和GET两种，默认GETenctype表示浏览器对发送给服务器的数据所采用的编码格式。有三 种：application/x-www-form-urlencoded（默认编码， 不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）、text/plain（未规范的编码，不建议使用，不同浏览器理解不同）name设置表单名称，以便程序调用target设置提交时的目标位置：_blank、_parent、_self、_topautocomplete设置浏览器记住用户输入的数据，实现自动完成表单。默认为on自动完成，如果不想自动完成则设置off。novalidate设置是否执行客户端数据有效性检查，后面课程讲解。//使用get提交数据 method=get //丧失自动提示功能 autocomplete=off //使用_blank新建目标 target=_blank 2.input表示用户输入数据 input name=user 解释：input元素默认情况会出现一个单行文本框，有五个属性。 属性名称说明autofocus让光标聚焦在某个input元素上，让用户直接输入disabled禁用input元素autocomplete单独设置input元素的自动完成功能form让表单外的元素和指定的表单挂钩提交typeinput元素的类型，内容较多，将在下面展开讲解name定义input元素的名称，以便接收到相应的值//聚焦光标 input name=user  HYPERLINK code/autofocus.html autofocus //禁用input input name=user  HYPERLINK code/disabled.html disabled //禁止自动完成 input name=user  HYPERLINK code/autocomplete.html autocomplete=off //表单外的input HYPERLINK code/a.html  example form method=get id=register ... /form input name=email form=register 3.label添加说明标签 HYPERLINK code/label.html example plabel for=user用户名：inputid=user name=user/label/p 解释：label元素可以关联input，让用户体验更好。且更加容易设置CSS样式。 4.fieldset对表单进行编组  HYPERLINK code/fieldset.html example fieldset.../fieldset 解释：fieldset元素可以将一些表单元素组织在一起，形成一个整体。 属性名称说明name给分组定义一个名称form让表单外的分组与表单挂钩disabled禁用分组内的表单5.legend添加分组说明标签 fieldset legend注册表单/legend /fieldset 解释：legend元素给分组加上一个标题。 6.button添加按钮 button type=submit/button 解释：button元素添加一个按钮，type属性有如下几个值： 值名称说明