《网页前端技术》HTML任务六.ppt

* * 注意：我们可以创建不可编辑的单行文本框或者通过使用readonly条目让单行文本框的只读(例如：用户不能够编辑文本)。 * 注意: 这种类型所有的input应当有相同的名字。这个名字是他们是什么组。如果每个单选按钮有不同的名字，他们将各自进行动作。 如果我们想显示选择的单选按钮，甚至于有时候在用户尝试选择之前，我们就应该使用checked条目。 通过使用disabled条目，我们可以创建禁用单选按钮。 * HTML 任务六 会用表单收集用户输入的信息 案例分解 案例资讯 制作用户登录界面 制作用户注册界面 表单概述 单行文本框 密码框 提交按钮 重置按钮 复选框 单选按钮 下拉列表和列表框 普通按钮 图像按钮 隐藏域 多行文本框 教学目的：了解什么是表单 了解表单的属性 掌握各种按钮的用法 掌握各种文本框的类型 教学重点：了解表单的属性 掌握各种按钮的用法 掌握各种文本框的类型 教学难点：掌握各种按钮的用法 掌握各种文本框的类型 案例一 制作用户登录界面 利用表单来做一个用户登录的界面。 案例资讯 会员注册页面、购买某个商品收集信息页面、网上调查问卷页面、搜索工具页面等等，很多的一部分都是用表单做的 表单主要是用来收集客户端相关信息 网页具有交互功能。 一、表单概述 1、在用户注册某种服务或事件时收集姓名、地址、电话号码、电子邮件和其他信息。 2、为收集购买某个商品的订单信息。 3、收集关于调查问卷信息。大部分提供服务性的网站都鼓励用户参与调查问卷，提供反馈信息。这些反馈信息除了维系良好的客户关系外，它还有助于改进和提高网站的服务质量，从而使网站的服务更具人性化，吸引更多的浏览者。 4、为网站提供搜索工具。提供各种信息的站点通常会为用户提供一个搜索框，使用户能够更快地找到想要的信息。 1、form标记 form…/form标记用于表示一个表单的开始和结束，并且通知服务器处理表单的内容。参数分别介绍如下： name: 用于指定表单的名称。 action：用于指定提交表单后，将对表单进行处理的文件路径及名称（即URL） method：用于指定发送表单信息的方式，有GET方式（通过URL发送表单信息）和POST方式（通过HTML发送表单信息）。 2、input标记 input标记用于在表单内放置表单对象，单标签。它有type等参数，对于不同的type参数有不同的属性。 当type=text（文本域表单对象，在文本框中显示文字）或type=password（密码域表单对象，在文本框中显示*号代替输入的文字，起保密作用）时input标记参数介绍如下： name：用于指定表单文本/密码域对象的名称。 size：文本框在浏览器的显示宽度，实际能输入的字符数由maxlength参数决定。 maxlength：在文本框最多能输入的字符数。 当type=radio（单选钮）或type=checkbox（复选钮）时input标记参数介绍如下： name：用于指定表单单选钮或复选钮对象的名称。 value：用于设定单选钮或复选钮的值。 checked：可选参数，若带有该参数，则默认状态下该按钮是选中的。同一组radio单选钮（name属性相同）中最多只能有一个单选钮带checked属性。复选钮则无此限制。 当type=image（图像）时input标记参数介绍如下： name：图像对象的名称。 src：图像文件的名称。 width：图像宽度。 heigh：图像高度。 alt：图像无法显示时的替代文本。 align：图像对象的对齐方式，取值可以是top、left、bottom、middle和right。 3、select和option标记 select…/select标记用于在表单中插入一个列表框对象。它和option/option标记一起使用，option标记为列表框添加列表项。select标记的参数介绍如下： name：指定列表框的名称。 size：指定列表框中显示多少列表项（行），如果列表项数目大于size参数值，那么通过滚动条来滚动显示。 multiple：指定列表框是否可以选中多项，默认下只能选择一项。 option标签的参数有两个可选参数，介绍如下： selected：用于设定在初始时本列表是被默认选中的。 value：用