《HTML制作表单.ppt》由会员分享，可在线阅读，更多相关《HTML制作表单.ppt（30页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、 认识表单 熟悉控件添加 制作简单的表单本章目标1.1.1表单初印象 表单应用场合 注册 登陆 调查反馈 查询注册注册中应用中应用表单表单登录时登录时应用应用表单表单调查反馈时调查反馈时应用应用表单表单查询时查询时应用应用表单表单是web网页上用户界面元素的集合体。而用户界面元素就是网页上一些能让用户实施交互的东西，例如：能输入一段信息的文本域，能让用户选择是或否的问题式框，为用户提供一系列选项的弹出式菜单，用户可以按动的按钮等。1.1.2表单？1.1.3表单作用 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程序以处理，从而使得Web服务器
2、与用户之间具有交互功能1.1.4表单工作机制访问一个包含表单的页面，输入数据后，提交表单浏览器将用户在表单中输入的数据进行打包，并发送给服务器服务器接收数据并转由程序处理data1data21.1.5HTML定义表单 在HTML文档中，标记，用来定义表单的开始和结束 在表单之间嵌入各类表单控件标记（如：文本输入框、密码框、单选按钮、复选框、提交按钮、复位按钮、列表框等）供用户输入信息数据 表单控件标记和表单标记一起工作，共同发挥作用用户名： 年 龄： 表单标记各类表单控件标记案例运行案例运行1.1.6表单举例1.2 表单标记 标记负责创建一个表单 标记的重要属性 action属性 指定表单数据
3、提交至哪个程序，让其处理表单内容 method属性 指定表单数据提交的方式（ get方式和post方式） 1.2.1表单提交理解action属性用户名： 年 龄： 点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打包表单中输入的数据，发送给action属性指定的服务器端程序，表单所在页面也相应跳转，如果action为空或不写，表示提交给当前页面action属性值：url地址相对或绝对路径1.2.2表单提交说明method属性用户名： 年 龄： 根据method属性值（get 或post），浏览器发送打包数据的形式有所不同method属性值：传送方式postmethod属性值：get浏览
4、器在action指定的URL地址后以？形式带上打包数据，多个打包数据之间以&分隔传递数据在url地址栏可见以get方式传递数据，传递数据量有限如果不指定method属性值，get是默认提交方式method属性值：post浏览器将打包数据作为请求消息的实体内容进行发送，多个数据之间以&分隔传递数据在url地址栏不可见以post方式传递数据，传递数据量无限制1.2.3method属性get和post示例代码示例代码实例1.3 表单控件标记I 表单控件标记I 表单控件标记嵌套在标记之内，又称做表单控件元素或表单元素1.3.1 表单控件标记I 能够演变为表单中许多不同的控件标记，取决于type属性 t
5、ype取值： text(单行输入文本框) password（密码输入文本框) submit（提交按钮） reset(复位按钮) radio（单选按钮） checkbox（复选框） button（普通按钮） 单行文本框 创建一个单行文本框 type属性值为text的标记在网页中创建一个单行文本框 name属性：文本框名称 size属性：文本框长度 maxlength属性：文本框最多输入字符数 value属性：文本框中默认值示例代码密码框 创建一个密码文本框 type属性值：password name属性值：控件名称 size属性值：指定密码框大小 maxlength属性值：允许输入最多字符 输入
6、的文本显示为密码形式示例代码提交按钮 创建一个用以提交表单的按钮 type属性值：submit value属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（提交） 作用：点击提交按钮，浏览器将提交表单示例代码复位按钮 将表单元素值恢复为初始默认值 type属性值：reset value属性值：指定按钮上显示文字，不指定，浏览器采取默认显示（重置）示例代码单选按钮 创建单选按钮元素 type属性：radio name属性值：单选按钮的控件名称 value属性值：用户选中后，传送到服务器的值 checked属性值：默认选中的单选项 具有相同name的多个单选按钮称为单选按钮组，一次只能有一项
7、被选中 提交表单时，选中项的value和name被打包发送示例代码复选按钮 创建复选按钮元素 input type=checkbox name=名称value=复选按钮的值 checked=checked/ type属性值：checkbox value属性值：用户选中后，传送到服务器的值 checked属性值：默认选中的复选项 具有相同name的多个复选按钮称为复选按钮组，一次可以选择多项 提交表单时，所有选中项的value和name被打包发送：示例代码普通按钮 创建普通按钮 显示为一个普通按钮 通常和javascript程序代码配合使用示例代码图像控件 创建图像按钮 type属性：image
8、 name属性值：控件名称 src属性值：图像文件地址示例代码隐藏控件 创建隐藏控件 type属性：hidden name属性值：控件名称 用于在表单中包含不希望用户看见的信息https:/ 创建文件控件，便于上传文件 type属性：file name属性值：控件名称 value属性值：上传文件的本地地址示例代码1.4 表单控件标记II 表单控件标记II 多行文本框 列表框表单控件标记嵌套在标记之内，又称做“表单控件元素”或“表单元素”多行文本框 创建一个可输入多行文本的文本框 rows, cols属性：指定行数、列数，不指定则浏览器采取默认显示 标记之间可以放置文本作为显示的初始值 多行文本框的初始显示内容 示例代码列表框 标记创建一个列表框 标记创建一个列表项 与嵌套的一起使用，共同提供在一组选项中进行选择的方式安徽北京西藏 列表框名称一个选项不需要name示例代码1.5作业SOUTH PUDONG OPEN UNIVERSITY2016年12月NextNext