HTML与CSS前台页面设计许莉第09章创建表单课件教学.pptVIP

PPT研究院 POWERPOINT ACADEMY * * HTML与CSS前台页面设计 第九章 HTML与CSS前台页面设计 创建表单 第九章 创建表单 HTML与CSS前台页面设计 本章要点 常用表单标记的意义及使用 表单布局标记的意义及使用 第九章 创建表单 HTML与CSS前台页面设计 目录： 9.1 表单的作用 9.2 表单标记 9.3 表单布局标记 9.4 综合实例 9.1 表单的作用 HTML中的表单(form)是网页中最常用的组件，是网站服务器端与客户 端之间沟通的桥梁。表单在网上随处可见，它们被用于在登录页面输 入用户名和密码，对博客进行评论等。 9.2 表单标记 1.form 可用form标记来定义一个表单，当一个表单被定义后就可在表单内放置表单标记。表单使用form作为开始标记，以/form结尾。在一个HTML页面中允许有多个表单，以表单的名字（name）和（id）作为它们之间的区分。表单格式的代码如下： form 表单标记的各种属性设置 设置各种表单标记 /form 9.2 表单标记 2.input 最常用的表单控件是input，这一类的表单控件被称为输入类控件，通过input来标记。输入类控件有很多种类型，通过type属性进行设置。input标记可以为表单提供单行文本输入框、单选按钮、复选按钮、普通按钮等。 9.2 表单标记 3.textarea HTML语言提供了多行文本的输入框，这是接收大量数据的文本区，它可以用于数据的输入，又可用于数据的显示区域。实现多行文本输入区的标记为textarea，其语法为： textarea class=“class name”id=“ID name”cols=“number”rows=“number”style=“style information”read only在文本区中显示内容/textarea 9.2 表单标记 4. select和option HTML语言支持具有选择功能的标记select。使用选择功能方便了用户在多个选项中进行选择，提高了窗口区域的利用率。通过对select标记的属性size的值的设置，可产生不同的列表形式：如下拉列表和滚动列表。对属性multiple进行设置，可以使同时选择多个列表项。select标记是定义一个列表结构的标记，列表中的列表项（或称菜单项）是真正被选择的对象，对它的定义要用option标记。因此，设置一个列表，要同时使用select和option标记。 select class=“class name” id=“id name” name=“selectname” size=“number” multiple option标记 /select 9.2 表单标记 5.optgroup optgroup标记可以对选项进行分组，通过optgroup标记可以对选项进行分类，并使用label属性在下拉列表里显示为一个不可选的缩进标题。语法如下： optgroup label=组名 9.3 表单布局标记 1.fieldset和legend fieldset标记可将表单内的相关标记分组。当一组表单控件放到fieldset标记内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，甚至可创建一个子表单来处理这些标记。 legend标记为fieldset标记定义标题，legend且必须在fieldse标记中使用。 9.3 表单布局标记 2 . label 可以对form表单中的文本内容关联一个label标记，并使用label标记的for属性使其与表单组件关联起来，效果为单击文本是，光标显示在相关联的表单组件内。使用时要将lable绑定到其它的控件，将lable标记的for属性设置为与该控件的id相同。将lable绑定到控件的name属性没有作用。语法为： label for=fname显示内容字符串/label 9.4 综合实例 创建表单 第九章 本章结束 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 馋死 HTML与CSS前台页面设计