1、表单的认识
1.1 什么是表单？
表单在网页中主要负责**数据采集**功能。
一个表单有三个基本组成部分：
- **表单标签**：这里面包含了处理表单数据请求URL地址以及数据提交到服务器的方式。
- **表单域**：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
- **表单按钮**：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的处理程序或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
1.2 表单的应用
表单的常见应用：
搜索
登录
注册
完善个人信息
评论框
发表文章
问卷调查
2、 表单的三大结构和属性
2.1 表单的三大结构
<form name="表单名称" action="表单处理程序页面" method="post/get"> <fieldset> <legend> 表单名称 </legend> <input type="控件类型" name="控件名称"> <input type="submit" value="提交"> </fieldset> </form>
2.2表单的基本语法和属性
<form action="URL" method="get|post">...</form>
属性说明：
| **属性** | **值** | **描述** |
| [accept-charset]| charset_list | 规定服务器可处理的表单数据字符集。 |
| [action]| URL | 规定当提交表单时向何处发送表单数据。 |
| [autocomplete]| onoff | 规定是否启用表单的自动完成功能。|
| [enctpe] | 可能的值：application/x-www-form-urlencoded(默认)**multipart/form-data**text/plain | 规定在发送表单数据之前如何对其进行编码。上传文件时必须指定为：**multipart/form-data** |
| [method]| get(默认)post | 规定用于发送 form-data 的 HTTP方法。 |
| [name]| form_name | 规定表单的名称。 |
| [novalidate]| novalidate | 如果使用该属性，则提交表单时不进行验证。|
| [target] | _blank_self(默认)_parent_topframename | 规定在何处打开 action URL。 |
3、表单元素
3.1 输入框input (重点)
<input /> 标签用于搜集用户信息。
**根据不同的 type 属性值，输入字段拥有很多种形式**。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<input />是一个行内元素，也是一个单标签，需要自关闭。
input类型：
| **类型** | **名称** | **特点** |
| text | 普通文本框 | 默认 |
| password | 密码框 | 内容显示为*号 |
| submit | 提交按钮 | 点击后就提交表单 |
| button | 普通按钮 | |
| reset | 重置按钮 | 回到最初状态（注意：不是清空） |
| radio | 单选 | 一组单选必需name相同 |
| checkbox | 多选 | 一组多选必需name相同 |
| file | 文件上传框 | 可以选择文件进行提交 |
| hidden | 隐藏域 | 隐藏控件，但是会被提交 |
file类型的注意事项
- 默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。
- application/x-www-form-urlencoded不是不能上传文件，是只能上传文本格式的文件，multipart/form-data是将文件以二进制的形式上传，这样可以实现多种类型的文件上传。
3.2 select
select 元素可创建单选或多选菜单。<seclet>和<option>一般同时使用，select代表的下拉框，option表示它的每一项。
当option中有value的时候，传将value传到后台,没有value的时候，将它显示的内容传到后台
<select name="country" > <option value="">---请选择---</option> <option value="zh" selected="selected">中国</option> <option value="en">英国---</option> </select>
select 的属性：
| **属性** | **值** | **描述** |
| [autofocus]| autofocus | 规定在页面加载后文本区域自动获得焦点。|
| [disabled] | disabled | 规定禁用该下拉列表。 |
| [multiple] | multiple | 规定可选择多个选项。 |
| [name] | *name* | 规定下拉列表的名称。 |
| [size] | *number* | 规定下拉列表中可见选项的数目。 |
option的属性：
| **属性** | **值** | **描述** |
| [disabled]| disabled | 规定此选项应在首次加载时被禁用。 |
| [selected]| selected | 规定选项（在首次显示在列表中时）表现为选中状态。|
| [value] | *text* | 定义送往服务器的选项值。 |
3.3 textarea
在网页中，用户需要输入大量的文字信息的时候，就会用到textarea标签，它就是多行文本域。比如：留言，备注等。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
- cols
- rows
3.4 button
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。 与标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
请始终为<button>规定 type 属性。Internet Explorer(低版本) 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。
<button type="submit" name="btn-search" id="btn-search"> <img src="url"> </button>
**重要事项：**如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交按钮之间的文本，而其他浏览器将提交 value 属性的内容。建议在 HTML 表单中使用 input 元素来创建按钮。
4、表单的语义化
label标签的语义化:
<label><input type="checkbox">同意协议</label> <input type="checkbox" id="agree"><label for="agree">同意协议</label> fieldset标签和legend标签 Markup <form name="login" action="" method="post"> <fieldset> <legend> 用户登录 </legend> <div class="in"> <input type="email" name="email" id="email" placeholder="输入邮箱地址" autocomplete="off" autofocus> </div> <div class="in"> <input type="submit" value="登录"> </div> </fieldset> </form>
fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。 一个表单可以有多个fieldset标签。
legend元素必位于fieldset内的第一个元素，用于描述表单的内容。
好处：
1.增强表单的语义。
2.可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。
5、表单总结
表单的难点：
- 最接近后端开发的html标签
- 不理解后端数据处理的逻辑就比较难理解表单的原理
- 所以主要以记住表单控件类型和用户行为流程为主
6、课堂总结
6.1 重点
- img标签和多媒体标签基本语法及使用
- a标签的属性和相对路径的使用
- ul标签语法及使用
6.2 难点
- img标签是行内元素的理解
- ul列表的嵌套关系
- 多媒体的标准
6.3 学习方法
- 多写代码，理解基本结构及注意事项。
- 注意单词不要写错
6.4 排错技巧
- 利用chrome浏览器的开发者调试工具
3279916262