. 打开一个页面,通过效果图来引入今天的内容:从效果图上看出,网页右侧有一个登录区域,里面包含文本框,密码框,下拉菜单、复选框、按钮等,当点击按钮时,该页面会自动将用户输入的内容发送到服务器,这个时候就需要用到表单了
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) 演示内容------只写 表单 案例,其他内容,写好。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、表单是什么
文本框、按钮、单选框、复选框、下拉列表等的统称
如图:
二、表单标签
在HTML中,表单标签有5种:form、input、textarea、select和option。
从外观上划分,表单可以分以下8种:
(1)单行文本框
(2)密码文本框
(3)单选框
(4)复选框
(5)按钮
(6)文件上传
(7)多行文本框
(8)下拉列表
三、form标签
input、textarea、select、option都是表单标签,一般要放在form标签内部
语法:
<form>
//各种表单标签
</form>
举例:
<form>
<input type="text" value="单号文本框" /><br />
<textarea>多行文本框</textarea><br />
<select>
<option>下拉框选项1</option>
<option>下拉框选项2</option>
<option>下拉框选项3</option>
</select>
</form>
效果:
3.1form标签属性:
1)name 表单名称
举例:<form name="表单1"></form
2)method 提交方式
在form标签中,method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个:一个是“get”,另外一个是“post”。
get的安全性较差,而post的安全性较好。所以在实际开发中,使用post比较多。
举例:
<form method="post"></form
3)action 提交地址
在form标签中,action属性用于指定表单数据提交到哪一个地址进行处理。
举例:
<form action="index.php"></form
4)target 打开方式
form标签的target属性跟a标签的target属性是一样的,都是用来指定窗口的打开方式。一般情况下,我们只会用到“_blank”这一个属性值
<form target="_blank"></form
5)enctype 编码方式
在form标签中,enctype属性用于指定表单数据提交的编码方式。一般情况下,我们不需要设置,除非你用到上传文件功能.
单的作用:用来收集用户的信息。
提示信息: 说明性的文字,用于提示用户进行填写和操作。
表单控件:包含了具体的表单功能项,如文本框、密码框、单选框、复选框、提交按钮、重置按钮等。
表单域:相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表单数据提交的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
<input />标签为单标签,type属性为input标签最基本的属性,取值有多种,用于指定不同的标签类型。除了type属性之外,<input />标签还可以定义很多其他的属性:
文本框 <input type="text" value="默认值"/>
密码框 <input type="password" />
单选按钮组
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral” checked=“checked”/>(默认选中)女
<!--*disabled="disabled" (禁用) * checked="checked" (默认选中)-->
复选框组
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
按钮组:
空按钮 <input type="button" value="按钮内容" />
提交按钮 <input type="submit" value="按钮内容" />
重置按钮 <input type="reset" value="按钮内容" />
图片按钮 <input type="image" src='bg.png' />
文件按钮 <input type="file" />
label 标签为 input 元素定义标注。
<label>
<input type="text" value="">
</label>
<label for="name">姓名</label>
<input type="text" id="name" value="">
如果需要输入大量的信息,则需要用到<textarea></textarea>标签。textarea控件可以创建多行文本输入框,语法:
<textarea cols="每行中显示的字符数" rows="显示的行数">
文本信息
</textarea>
<select>
<option>选项1</option>
<option selected>选项2</option>
<option>选项3</option>
...
</select>
关于表单的第一节课,我们讲过表单由三部分组成:表单控件(input控件,select、textarea、button)、提示信息、表单域。
在HTML中,form标签用于定义表单域,即创建一个表单,用来收集和传递用户的输入信息,指定提交到的服务器,以及提交方式。
*请认真填写需求信息,我们会在24小时内与您取得联系。