1. 打开一个页面,通过效果图来引入今天的内容:从效果图上看出,网页右侧有一个登录区域,里面包含文本框,密码框,下拉菜单、复选框、按钮等,当点击按钮时,该页面会自动将用户输入的内容发送到服务器,这个时候就需要用到表单了,我来为大家讲解一下关于html表单第一章?跟着小编一起来看一看吧!

html表单第一章(HTML表单基础知识)

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) 演示内容------只写 表单 案例,其他内容,写好。

,