表单元素[上]

1、表单元素(上)教学目标：1.了解表单元素2.熟悉表单的各项元素本节课程主要学习HTML5中表单元素，表单元素用于获取用户的输入数据。知识点梳理：一表单元素总汇在HTML5的表单中，提供了各种可供用户输入的表单控件。元素名称说明form表示HTML表单input表示用来收集用户输入数据的控件textarea表示可以输入多行文本的控件select表示用来提供一组固定的选项option表示提供提供一个选项optgroup表示一组相关的option元素button表示可用来提交或重置的表单按钮（或一般按钮）datalist定义一组提供给用户的建议值fieldset表示一组表单元素legend表示fie

2、ldset元素的说明性标签label表示表单元素的说明标签output表示计算结果二表单元素解析1.定义表单form method=post action=提交解释：元素主要是定义本身是一组表单。元素名称说明action表示表单提交的页面method表示表单的请求方式：有POST和GET两种，默认GETenctype表示浏览器对发送给服务器的数据所采用的编码格式。有三种：application/x-www-form-urlencoded（默认编码，不能将文件上传到服务器）、multipart/form-data（用于上传文件到服务器）、text/plain（未规范的编码，不建议使用，不同浏览器

3、理解不同）name设置表单名称，以便程序调用target设置提交时的目标位置：_blank、_parent、_self、_topautocomplete设置浏览器记住用户输入的数据，实现自动完成表单。默认为on自动完成，如果不想自动完成则设置off。novalidate设置是否执行客户端数据有效性检查，后面课程讲解。/使用get提交数据 method=get/丧失自动提示功能autocomplete=off/使用_blank新建目标target=_blank2.表示用户输入数据解释：元素默认情况会出现一个单行文本框，有五个属性。属性名称说明autofocus让光标聚焦在某个input元素上，让

4、用户直接输入disabled禁用input元素autocomplete单独设置input元素的自动完成功能form让表单外的元素和指定的表单挂钩提交typeinput元素的类型，内容较多，将在下面展开讲解name定义input元素的名称，以便接收到相应的值/聚焦光标/禁用input/禁止自动完成/表单外的input example .3.添加说明标签example用户名： 解释：元素可以关联input，让用户体验更好。且更加容易设置CSS样式。4.对表单进行编组 example.解释：元素可以将一些表单元素组织在一起，形成一个整体。属性名称说明name给分组定义一个名称form让表单外的分组与

5、表单挂钩disabled禁用分组内的表单5.添加分组说明标签注册表单解释：元素给分组加上一个标题。6.添加按钮解释：元素添加一个按钮，type属性有如下几个值：值名称说明submit表示按钮的作用是提交表单，默认reset表示按钮的作用是重置表单button表示按钮为一般性按钮，没有任何作用/提交表单提交/重置表单重置/普通按钮按钮对于type属性为submit时，按钮还会提供额外的属性。属性名称说明form指定按钮关联的表单formaction覆盖form元素的action属性formenctype覆盖form元素的enctype属性formmethod覆盖form元素的method属性fo

6、rmtarget覆盖form元素的target属性formnovalidate覆盖form元素的novalidate属性/表单外关联提交提交表单的结构METHOD的GET方式和POST方式有什么区别？Post和Get 方法有如下区别: 1、Post传输数据时，不需要在URL中显示出来，而Get方法要在URL中显示。2、Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节3、Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为

7、http请求的内容，而Get是在Http头部传输的。 4、get 方法用Request.QueryStringstrName接收 post 方法用Request.FormstrName 接收 注意： 虽然两种提交方式可以统一用Request(strName)来获取提交数据，但是这样对程序效率有影响，不推荐使用。5、 一般来说，尽量避免使用Get方式提交表单，因为有可能会导致安全问题。二、其他元素表单元素还剩下几个元素没有讲解，包括下拉框列表select、多行文本框textarea。元素名称说明select生成一个下拉列表进行选择optgroup对select元素进行编组optionselect

8、元素中的项目textarea生成一个多行文本框output表示计算结果1.生成下拉列表example苹果橘子香蕉解释：下拉列表元素至少包含一个子元素，才能形成有效的选项列表。元素包含两个子元素项目元素和分组元素，还包含了一些额外属性。属性名称说明name设定提交时的名称disabled将下拉列表禁用form将表单外的下拉列表与某个表单挂钩size设置下拉列表的高度multiple设置是否可以多选autofocus获取焦点required选择验证，设置后必须选择才能通过/设置高度并实现多选/默认首选橘子/使用optgroup进行分组，label为分组名称，disabled可以禁用分组苹果橘子香蕉2.多行文本框example请留下您的建议！ 解释：生成一个可变更大小的多行文本框。属性如下：属性名称说明name设定提交时的名称form将表单外的多行文本框与某个表单挂钩readonly设置多行文本框只读disabled将多行文本框禁用maxlength设置最大可输入的字符长度autofocus获取焦点placeholder设置输入时的提示信息rows设置行数cols设置列数w