CSS第10篇.ppt

常见的表单元素 创建表单 制作表单页面 （1）创建表单 （2）在表单中添加表单元素 1、表单的基本语法2-1 1、表单的基本语法2-2 2、表单元素的基本格式 表单元素的逐一介绍8-1 文本框 表单元素的逐一介绍8-2 密码框 表单元素的逐一介绍8-3 按钮 表单元素的逐一介绍8-4 单选按钮 表单元素的逐一介绍8-5 复选框 文件域 小结 前面所学的各类表单元素，语法分别是什么？ 表单元素的逐一介绍8-7 列表框 表单元素的逐一介绍8-8 多行文本框 表单的高级用法2-1 隐藏域 方便服务器端“记住”客户端的信息、但又不希望客户看到的数据 只读和禁用属性 readonly：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用 课外作业1：贵美登录页 需求说明： 完成网站登录页面 课外作业2：简易求职表 需求说明： 使用表单制作简易求职表 总结 表单form的基本语法 ？ 表单元素有哪些，语法分别是什么 ？ 如何设置表单元素的只读和禁用属性 ？ * * 网站的登录、注册；网上订单；调查问卷；网上有哪些信誉好的足球投注网站 以上示例是登录验证的表单。对比银行自动柜员机的存取款过程如下： （1）用户填写帐号信息，提交给服务器；（2）服务器验证提交的帐号，如不正确，则提示帐号错误；如正确，则进入取钱或存钱等操作，再次让用户填写一张新的业务表单。 使用ol li有序列表，ul li无序列表和dl dt dd定义列表实现简单的商品购买页 第 10 章 表单 网页设计基础 本章目标 会使用各种表单元素制作表单页面 在表单中插入文本域 应用复选框和单选按钮 创建列表和菜单 本章任务 制作产品订单页面 本章任务 制作留言板页面 本章任务 制作会员注册表 本章任务 制作精品鲜花网页 表单的典型应用 为什么使用表单 用户登录/注册 收集用户反馈信息 提供有哪些信誉好的足球投注网站工具 单行文本框(text) 单选按钮(radio) 复选框(checkbox) 下拉列表(select) 重置按钮 (reset) 提交按钮(submit) 密码框(password) 多行文本域(textarea) form action=表单提交地址 method=提交方法 … 文本框、按钮等表单元素… /form 指定提交后，由服务器上哪个处理程序处理 指定向服务器提交的方法： 一般为post或get方法, post方法比较安全 GET方法是将值附加到请求的URL（URL的长度被限制在8192个字符以内）中，并将其传输到服务器。 如果要收集用户名和密码、信用卡或其他机密信息，POST方法比GET方法更安全。 …… form action=login.jsp method=post p用户名： input name=username type=text size=20 maxlength=10 //p p密nbsp;nbsp;码： input name=pwd type=password size=20 //p pinput type=submit name=btn value=提交 /nbsp;nbsp; input name=reset type=reset value=重填 //p /form …… 表单输入元素：input 表单提交地址和方法的设置 操作演示：表单应用 表单的典型应用：假定登录 126 邮箱 表单的执行原理 Internet 1 2 客户端：请求登录，通过表单填写账户信息 服务器端：验证发来的账号信息，然后给出反馈 客户端和服务器类似两人沟通一样，从而建立交互活动 input name=表单元素名称 type=类型 value=值 size=显示宽度 maxlength=对大长度 checked=是否选中 / 指定元素的类型，可为text、radio、submit等 控件的名称 控件的初始值 控件的初始宽度 控件中输入的最多字符个数 控件是否被选中checked form method=post action= p用户名： input name= userName type=text size=21 / /p …… /form 单行文本输入框，字符宽度为21 操作演示：文本框应用 input name= 名称 type= text value= 初值 size= 数字 form method=post action= p