《Dreamweaver CC网页设计与制作》课件 项目五 表单元素的应用

项目五表单元素的应用1331制作登录表单2制作注册表单目录CONTENTS134任务1制作登录表单1351. 了解表单的形式和登录表单的构成及作用。2. 了解表单、input元素的标签格式和属性。3. 能创建登录表单并用“属性”面板设置其属性。4. 能修改表单标签和表单元素标签及属性代码。136本任务为登录表单的制作实例（见右图）。通过本任务的学习，可以掌握使用“插入”面板、“属性”面板、代码视图来插入表单和表单元素并设置其属性的方法和技巧，熟悉其标签及属性代码，积累用表格布局表单页面的经验。137登录表单最终效果一、表单概述1. 表单的概念表单是网页浏览者与网站服务器之间进行信息传递的重要工具，同时它还包含传送表单数据、向处理的动态页面提交表单数据信息等操作。138表单一般由表单域、提示信息和表单元素三部分组成。表单域是表单元素的“容器”；提示信息是表单元素周围用于提示用户输入或选择数据的文本；表单元素用于收集用户输入的数据。在表单页面中创建表单时，首先要插入表单域，然后将表单元素添加到表单域内部，否则表单页面将不能正常运行。1392. 表单域的插入方法（1）单击“插入”面板上的“表单”按钮。（2）单击“插入”→“表单”→“表单”命令。（3）在代码视图中输入创建表单域的有关代码。3. 表单域的标签和常用属性表单域的标签格式为<form name="f1" id="f1" action="URL" method="get|post" target="_blank">…</form>。140表单域的常用属性及说明见下表。141表单域的常用属性及说明二、表单元素概述表单元素是网页中用于收集用户输入数据的元素。这些表单元素使得用户可以与网页交互，输入数据并提交给服务器处理。可以把表单域看做一个“容器”，表单元素就是放在这个“容器里的东西”，只有添加了表单元素，表单才能真正起作用，才可以让访问者输入数据或执行其他操作。142网页中的表单元素主要有input、select、textarea、label、button、option、datalist、keygen、output等，常见的表单元素及功能见下表。143常见的表单元素及功能input元素用<input>标签定义，用于在网页中收集用户输入的数据。input元素的常见形式和应用示例如图所示。144input元素的常见形式和应用示例input元素的HTML代码基本格式为<input type="元素类型" name="元素名称" value="元素的值">。通过设置input元素的type属性，可得到不同类型的input元素（见下表）。145input元素的type属性和说明146input元素的type属性和说明下面以input元素中最常用的文本框的插入方法和属性设置为例，说明input元素的插入和属性设置方法。1. 文本框的插入方法（1）单击“插入”面板中的“文本”按钮。（2）单击“插入”→“表单”→“文本”命令。（3）在代码视图中输入文本框的代码。1472. 文本框的属性文本框的属性及说明见下表。148文本框的属性及说明任务2制作注册表单1491. 了解标签、单选按钮、复选框、列表框、文本域的标签格式和属性。2. 能创建注册表单，并用“属性”面板设置其属性。3. 能修改注册表单及其表单元素标签和属性代码。150本任务是一个注册表单的制作实例（见右图）。通过本任务的学习，可以掌握利用“插入”面板、“属性”面板、代码视图制作注册表单的过程和方法，熟悉用表格布局注册表单网页的技巧。151注册表单一、下拉列表框下拉列表框可用来创建菜单或者下拉列表，实现单选或多选。下拉列表框的代码格式示例和对应效果如图所示。152下拉列表框的代码格式示例和对应效果select标签的属性及说明见下表。153select标签的属性及说明option标签用于定义选择列表中的一项，option标签必须放在select标签中。HTML5的option标签的属性及说明见下表。154HTML5的option标签的属性及说明二、文本域文本域是一个多行的文本框，可以让用户输入较长的数据。文本域的代码示例如图所示。155文本域的代码示例文本域的属性及说明见下表。156文本域的属性及说明三、HTML5的input类型元素及使用方法1. email类型email类型的input元素是一种专门输入电子邮件地址的文本输入框，在提交表单的时候，会自动验证输入框中值的合法性。email类型的input元素的HTML代码格式为<input type="email" name="user_email" />。1572. number类型number类型的input元素提供用于输入数值的文本框，还能对所接收的数字的取值范围进行限定。number类型的input元素的HTML代码格式为<input type="number" name="number1" min="1" max="20" step="4"/>。3. search类型search类型的input元素提供用于输入搜索关键词的文本框。search类型的input元素的HTML代码格式为<input type="search" name="search1"/>。1584. tel类型tel类型的input元素提供专门用于输入电话号码的文本框。tel类型的input元素的HTML代码格式为<input type="tel"