html表单

HTML(表单)上节回顾•图片和多媒体文件的使用预习检查•表单中一般包括哪些常用的表单元素？•按钮和复选框的应用场合？本章任务•制作“注册”表单页面本章目标•使用各种表单元素实现注册页面表单的典型应用为什么使用表单用户登录/注册收集用户反馈信息提供搜索工具单行文本框(text)单选按钮(radio)复选框(checkbox)下拉列表(select)重置按钮(reset)提交按钮(submit)密码框(password)常见的表单元素文本域(textarea)formaction=表单提交地址method=提交方法…文本框、按钮等表单元素…/form表单的基本语法2-1指定提交后，由服务器上哪个处理程序处理指定向服务器提交的方法：一般为post或get方法,post方法比较安全表单的基本语法2-2……formaction=login.jspmethod=postp用户名：inputname=usernametype=textsize=20maxlength=10//pp密  码：inputname=pwdtype=passwordsize=20//ppinputtype=submitname=btnvalue=提交/  inputname=resettype=resetvalue=重填//p/form……表单输入元素：input表单提交地址和方法的设置操作演示9：表单应用表单的典型应用：假定登录126邮箱表单的执行原理Internet12客户端：请求登录，通过表单填写账户信息服务器端：验证发来的账号信息，然后给出反馈客户端和服务器类似两人沟通一样，从而建立交互活动inputname=表单元素名称type=类型value=值size=显示宽度maxlength=最大长度checked=是否选中/指定元素的类型，可为text、radio、submit等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中checked表单元素的基本格式•文本框formmethod=postaction=p用户名：inputname=userNametype=textsize=21//p……/form表单元素的逐一介绍8-1单行文本输入框，字符宽度为21name用于服务器端获取数据，例如：request.getParameter(userName)操作演示10：文本框应用inputname=名称type=textvalue=初值size=数字“/•密码框formmethod=postaction=p密  码：inputname=passtype=passwordsize=22//p……/form表单元素的逐一介绍8-2隐藏输入的信息操作演示10：密码框应用inputname=名称type=passwordvalue=初值size=数字•按钮......inputtype=resetname=resetvalue=重填/inputtype=submitname=buttonvalue=同意……/inputtype=buttonname=confirmvalue=点播音乐/inputtype=buttonname=cancelvalue=取消/inputtype=imagesrc=images/login.gif/……表单元素的逐一介绍8-3操作演示10：命名按钮应用inputname=名称type=按钮类型value=按钮文字src=图片按钮的图片url普通按钮：button提交按钮：submit重置（清空）按钮：reset图片按钮：image•单选按钮......br/性别：inputname=gentype=radiovalue=男checked=checkedinputname=gentype=radiovalue=女……表单元素的逐一介绍8-4特点：单选名字name相同表明属于同一组操作演示11：单选按钮应用inputname=“组名type=radiovalue=…checked=…•复选框……爱好：inputtype=checkboxname=hobby1value=sports/运动  inputtype=checkboxname=hobby2value=talkchecked=checked/聊天  inputtype=checkboxname=hobby3value=play/玩游戏……表单元素的逐一介绍8-5特点：多选操作演示12：复选框应用inputtype=checkboxname=…value=…checked=…练习——贵美登录页•需求说明：–完成网站登录页面完成时间：20分钟1、提交地址：login.jsp2、提交方法：post•文件域......pinputtype=filename=files/br/inputtype=submitname=uploadvalue=上传//p……表单元素的逐一介绍8-6显示上传文件的地址操作演示13：文件域应用inputtype=filename=…小结•前面所学的各类表单元素，语法分别是什么？type功能例子text单行文本输入inputtype=textname=username/password密码inputtype=passwordname=password/radio单选inputtype=radioname=sexvalue=男/男inputtype=radioname=sexvalue=女/女checkbox多选inputtype=checkboxname=hobbyvalue=书/书inputtype=checkboxname=hobbyvalue=画/画reset重置表单数据inputtype=resetvalue=重置/file文件上传inputtype=filename=files/submit提交表单数据inputtype=submitvalue=提交/image图形提交按钮inputtype=imagesrc=images/button.gif/button普通按钮inputtype=buttonvalue=播放音乐/•列表框......selectname=bmonoptionvalue=selected=selected[选择月份]/optionoptionvalue=0一月/optionoptionvalue=1二月/optionoptionvalue=2三月/optionoptionvalue=3四月/option/select……表单元素的逐一介绍8-7提供固定选项，避免用户输入错误操作演示14：列表框应用selectname=指定列表名称size=行数optionvalue=选项值selected=selected…/option……/select•多行文本框......h2imgsrc=images/read.gifalt=阅读协议title=阅读协议/阅读贵美网服务协议/h2ptextareaname=textareacols=40rows=6欢迎阅读服务条款协议.../textarea/p……表单元素的逐一介绍8-8操作演示15：多行文本框应用textareaname=...cols=列宽rows=行宽文本内容/textarea•隐藏域方便服务器端“记住”客户端的信息、但又不希望客户看到的数据......inputtype=hiddenname=useridvalue=666/……表单的高级用法2-1隐藏的客户代号信息：666，但客户端页面不显示隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感操作演示16：隐藏域应用inputtype=hiddenname=….value=…/•只读和禁用属性–readonly：希望某个框内的内容只允许用户看，不能修改–disabled：因没达到使用的条件，限制用户使用textareaname=contentcols=60rows=8readonly=readonly欢迎阅读服务条款协议，贵美的权利和义务....../textareabr/br/同意以上协议inputname=agreetype=checkbox/inputname=btntype=submitvalue=注册disabled=disabled//p……表单的高级用法2-21、用户不能修改协议2、勾选“同意以上协议”，才允许点击“注册”按钮操作演示16：只读和禁用属性练习——简易求职表•需求说明：–使用表单制作简易求职表完成时间：25分钟“协议”只读，“提交”按钮禁用用隐藏域提交求职者姓名“zhangsan”总结•表单form的基本语法？•表单元素有哪些，语法分别是什么？•如何设置表单元素的只读和禁用属性？作业表单form的基本语法表单元素的熟练掌握利用表单排除注册页面