网页设计与制作第07章 网页表单应用.pptx

网页设计与制作第07章 网页表单应用本章内容网页设计与制作关于表单基本的表单控件表单制作示例7.1 关于表单网页设计与制作7.1.1 什么是表单1．表单（form）表单（form）是网页中用来与用户进行交互的元素，如图所示：可以包含文本框、单选按钮或复选框、下拉选择框、密码输入框以及文件上传控件等。7.1 关于表单网页设计与制作2．表单的实现如代码src/ex7_1.htmlex7_1.html，将呈现如图的表单。7.1 关于表单网页设计与制作7.1.2 表单的作用表单的作用就是与用户进行交互，提供一个收集用户意见和资料的界面或途径，用户只有通过表单控件，可以方便地与服务器进行交互。7.2 基本的表单的控件网页设计与制作7.2.1 表单标签介绍1．表单的含义表单是用来组织和包含表单元素（表单控件）的逻辑单元，一个表单可以包含若干表单元素，最常见的有：文本框、密码框、按钮、复选框、单选按钮、选择框等。在网页代码中，需要使用一对form/form标签来组装表单元素。7.2基本的表单的控件2．form标签如代码src/ex7_2.htmlex7_2.html，将呈现如图的表单。bodyform action= method=post您的姓名：input type=text /br/您的性别：input type=radio name=sex /男input type=radio name=sex /女/form/body网页设计与制作7.2基本的表单的控件3．Dreamweaver中插入表单按照以下三个步骤依次操作可以插入文本域网页设计与制作7.2基本的表单的控件4．form标签的常见属性网页设计与制作7.2基本的表单的控件7.2.2 控件的通用属性和事件1．表单控件表单中的元素可以称为表单控件，这些控件通常都是一个input标签。需要进行不同的输入操作可以使用不同类型的表单控件，比如文本控件、按钮控件、选择控件等。网页设计与制作7.2基本的表单的控件2．常见的表单控件网页设计与制作7.2基本的表单的控件3．表单控件的通用属性网页设计与制作7.2基本的表单的控件4．表单控件的通用方法事件网页设计与制作7.2基本的表单的控件7.2.3 文本控件1.文本控件文本控件是表单输入时最为常见的，主要用来输入用户名称、密码、用户留言等信息。文本控件包括：单行文本域、密码框和多行文本区域网页设计与制作7.2基本的表单的控件2.文本控件属性设置在Dreamweaver中插入文本控件后，可以如下图的方式进行属性设置网页设计与制作7.2基本的表单的控件3.用代码设置文本控件属性单行文本框用户名：input type=text name=username /密码框用户密码：input type=password name=pwd /多行文本区域留言内容：textarea name=message id=msg cols=45 rows=5/textarea网页设计与制作7.2基本的表单的控件7.2.4 选择控件1.选择控件选择控件不需要用户输入，用户直接在给定的选项中进行选择，可以实现单选、多选、下拉选择等。选择控件包括：单选按钮、复选（检取）框和下拉选择框。网页设计与制作7.2基本的表单的控件2.单选按钮单选按钮用来在多个选项中选择一个，而且通常必须选择一个，如性别选择就是很典型的应用。注意：如果一组选项只能选择其中一个时，必须将该组选项每个按钮的name 属性设置为相同，否则，单选操作将无法实现。在一个表单中，可以通过设置不同的name属性来实现多组单选。网页设计与制作7.2基本的表单的控件如下代码(src/ex7_3.htmlex7_3.html)可以实现单选您的性别：input type=radio name=sex id=sex value=male /男input type=radio name=sex id=sex2 value=female /女br /您的民族：input name=nation type=radio id=mz value=han checked=checked /汉input type=radio name=nation id=mz2 value=zang /藏input type=radio name=nation id=mz3 value=hui /回input type=radio name=nation id=mz4 value=meng /蒙input type=radio name=nation id=mz5 value=qita /其他br /- 运行效果如图所示：网页设计与制作7.2基本的表单的控件3.复选框（检取框）复选框也称检取框，用来在若干选项中选择零个或多个。注意：如果要将若干选项