单元7 注册页面—Axure动态面板与表单在网页中的应用《WEB前端开发实用案例教程》.ppt

《WEB前端开发实用案例教程》第七单元注册页面—Axure动态面板与表单在网页中的应用表单在网页中的作用不可小视,应用表单可以收集来自用户的信息,表单通常的用处包括网上调查、网上订单和建立搜素界面等。当用户在表单中完成各种信息的输入,并且将表单提交后,通过服务器端的应用程序或者脚本程序,信息就会反馈到服务器,并被转换为可以识别的数据,存储在数据库中,从而实现与客户的交互,表单是网页浏览者与网站服务器之间进行信息传递的重要工具。教学目标:了解认识Aure的动态面板◎掌握Awue的动态面板的条件设置掌握向网页中插入表单标签◎利用表单元素制作较为复杂的表单页面,能对表单元素进行灵活运用日录页/Contents1任务1仿蜜淘全球购网登录界面表单结构2任务2仿蜜淘全球购物注册页面使用CS控制表单01知识储备任务1仿蜜淘全球购网登录界面一一表单结构【知识储备】在网站设计中,网站常常会出现表单页面供用户填写,以获取用户的基本信息,便于和用户联系,在商业性网站会要求用户注册成为会员才能使用些服务,特别是网络注册账号时都会见到网络公司提供的注册页面,而这些页面都必须使用表单才能完成。表单在网页设计中占有非常重要的地位,下面介绍常用表单标签的结构及用法。<form>…/form>语法<formname="formnameaction=URLmethod="GETPOST">.</FORM>name:定义表单的名称method:定义表单结果从浏览器传送到服务器的方式,默认参数为:getaction:用来指定表单处理程序的位置asp等服务器端脚本处理程序)任务1仿蜜淘全球购网登录界面一一表单结构【知识储备】,通常被用来填写单个字或者简短的回答如姓名、地址等。招格式<inputtype="text"name="."size=".maxlengthvalue=pe="text定义单行文本输入框name属性定义文本框的名称,要保证数的准确采集,必须定义一个独—无二的名称sie属性定义文本框的竞度,单位是单个字符宽度;maxlength属性定义最多输入的字符数。aue属性定义文本框的初始值任务1仿蜜淘全球购网登录界面一一表单结构【知识储备】,它的不同之处是当输入内容时,均以表示,<inputtype="password"name="size=".maxlength=",">:普通按钮、提交按钮、重置按钮1)普通按钮当type的类型为button时,表示该输入项输入的是普通按鈕。语法格式<inputtype="button"valuevalue:表示显示在按钮上面的文字。普通按钮经常和脚本一起使用。任务1仿蜜淘全球购网登录界面一一表单结构【知识储备】2)提交按钮通过提交(inputtype=subm可以将表单om里的信息提交给表单里adon所指向的文件。例句:<inputtype=submit"yalue=!提交">3)重置按钮当type的类型为rese时,表示该输入项输入的是重置按钮,单击按钿后,浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。语法格式<inputtype="reset"valuename=..>任务1仿蜜淘全球购网登录界面一一表单结构【知识储备】)单选框格式<inputtype="radio"name=",value=checked>checked:表示此项默认选中aue表示选中后传送到服务器端的值。name表示单选框的名称,如果是组单选项,name属性的值相同有互斥效果2)复选框语法格式<inputtype=checkboxnamevalucheckedchecked:表示此项默认选中vaue表示选中后传送到服务器端的值。name表示复选框的名称,如果是组单选项,name属性的值相同亦不会有互斥效果任务1仿蜜淘全球购网登录界面一一表单结构【知识储备】6文件输入框当pe="fle"时,表示该输入项是个文件输入框,用户可以在文件输入框的内部写自己硬盘中的文件路径,然后通过表单上传。语法格式:<cinputtype="fle"name=">(select)既可以用做单选,也可以用做复选。单选例句如下<selectname="fruit"><optionvalue="apple">苹果<optionvalue="orange'>桔子<optionvalue="mango">芒果</select>如果要变成复选,加multiplel即可。用户用来实现多选。selectname="fruit"multiple>,用户还可以用sze属性来改变下拉框的大小