HTML表单基础知识

1. 打开一个页面，通过效果图来引入今天的内容：从效果图上看出，网页右侧有一个登录区域，里面包含文本框，密码框，下拉菜单、复选框、按钮等，当点击按钮时，该页面会自动将用户输入的内容发送到服务器，这个时候就需要用到表单了

2. 什么是表单

(1) 通俗说表单是一个将用户输入的信息组织起来的容器，需要将用户输入信息填写到表单容器中，当点击按钮时，表单会将数据统一发送到服务器

(2) 典型的应用场景：登录注册 网上订单 网上搜索 在网页中应用非常广泛，例如申请邮箱，需要先填写注册信息，然后才能申请提交，同时如果希望登录邮箱，也必须在登录邮箱才能进入到邮箱里，这就是表单典型应用

(3) 为了方便操作，表单提供了多种表单元素：文本框 密码框单选按钮 复选框 下拉列表多行文本等等。在接下来的学习中，逐步掌握在网页中创建表单的方法以及常用的表单元素

3. 表单怎么使用呢

(1) 在代码视图下，光标移动到需要放置表单的位置上，点击--插入---表单----表单，可以在工作区插入一个表单。由于表单仅仅是一个容器，不会在浏览器显示。

(2) 可以看到 表单使用<form></form>标签表示，在开始和结束标签之间存放表单元素等内容。

(3) 表单属性

① 为了能够实现信息提交目的，还需要为表单指定要提交的页面地址，并指定提交方式

② 光标停留在表单任意位置，单击属性面板会自动显示表单相关的属性

③ Id:设置表单的id。相当于现实中身份证，处理表单，一般都要表单设置id id=””

④ 动作：当提交表单时，如何向发送表单数据，处理表单数据的目标地址 action=””

⑤ 方法：规定提交方式 取值 get或者post method =””

⑥ 咱们前期学网页的时候，先不考虑这些元素，简单了解就好，后期跟程序在进行整合

(4) 表单属性

① 最常用的输入元素是单行文本框，提供给用户输入单行文本信息，比如用户名的输入。步骤如下，光标停留到表单里 插入---表单---文本域

② 插入单行文本框之后，鼠标单击选中文本框

1) 元素名称：对应于属性面板中name， 用来指定表单元素的名称，提交的时候，填写的数据是随着表单名称一起提交的

2) 字符宽度:单行文本框的宽度 属性面板中 size

3) 最多字符：允许用户输入的最多字符数.超过该数值，将无法继续输入 属性面板中 Max Length

4) 初始值：打开网页的时候，文本默认的显示文本.一般用于提示用户输入信息 属性面板中 value

5) Type: 表单元素的类型 name:表单元素的名称 size:表单元素的宽度 maxlength:允许输入的最大字符 value文本框的初始值

③ 密码框

1) 用户登录的表单，为了保障账户的安全，在需要密码的地方使用*代替。防止密码被窃取的风险，只不过是文本显示输入的文本，密码框将用户输入文本为 *来显示。

2) 代码显示-- 除了type属性值不一样之外，其他属性和单行文本框是一样的

④ 单选按钮

1) 也是网页中应用非常广泛，主要作用是 来限制用户选中一组数据中的其中一个，以确保数据的准确性。 例如用户的性别的时候，正确的是 男或者女，如果是单行文本，可以随意填写，往往提交的信息不准确

2) 插入---表单----单选按钮：插入一个单选按钮，如果需要多个话，在重复上述步骤即可

3) 选中插入的单选按钮，发现效果不是我们期待的，两个单选按钮可以同时选中。那咱们如何能选中一个呢

4) 可以根据单选按钮名称进行分组，相同名称的一组按钮才能相互排斥。只需要在多个单选框设置为相同的名称就可以了， 被选中的单选按钮连同该项的值会一起提交

5) 是否是默认选中，checked:表示按钮的默认选中的状态

⑤ 复选框

1) 在一些特殊情况下，并不强调要求用户选择其中的一项，例如选择自己兴趣爱好的，爱好可能会有多项，就需要用到复选框，允许用户选择其中多项内容

2) 插入---表单---复选框，如果想添加多个，重复上述步骤

3) 同单选按钮一样，同一组的复选框应当设置统一名称，便于提交数据，同时也可以为复选框设置默认选中，可以设置多个默认选中状态

⑥ 下拉列表

1) 主要用在多个项目中选中其中一个场景，可以使用单选或者多选按钮来定义，如果备选选项较多是，会占用较大空间， 用户选择自己所在的省份和城市变得不太现实，下拉列表能解决这一问题而出现的。占用极少空间显示较多内容

2) 插入----表单---选择,可以向表单中插入一个下拉列表，刚创建的列表的时候，是没有内容的，给列表添加 列表值

3) 单击列表值，会弹出列表设置面板，设置下拉备选框

4) 下拉列表：select标签 列表项使用option标签

5) Select name:下拉列表的名称，option是放入到select标签内的，使用value属性表示当前项的值，selected 该选项默认是选中的 option开始标签和结束标签之间的内容是 显示在用户面前的文本

⑦ 按钮

1) 是表单中是不可缺少的部分，写好表单元素之后，需要添加按钮，用来响应用户的操作。

2) 常见按钮：提交、重置、普通、图片

a. 提交按钮：整个表单提交的内容发送到服务器

b. 重置按钮：整个表单还原初始状态

c. 普通按钮：没有任何反应，通常和javascript特效方面，后面课程继续学习

d. 图片：主要是为了弥补普通按钮在外观上不足，允许我们使用一张图片来代替

3) 插入---表单---按钮， 功能通过属性面板中

4. 表单在实际项目中怎么使用，看一下综合案例

(1) 制作 网易邮箱登录页面

(2) 演示内容------只写 表单 案例，其他内容，写好。