Web前端开发 课件 7.1认识表单

静态网页设计第七章交互接口——表单认识表单UnderstandingForms表单的概念与作用1表单元素基本语法规则2完整表单页基本组成3一、表单的概念与作用01剪辑：间隔板用户输入给予反馈用户输入想法浏览器将想法带给服务器服务器处理想法信息服务器将处理结果反馈给浏览器一、表单的概念与作用一、表单的概念与作用表单用户输入想法浏览器将想法带给服务器服务器处理想法信息服务器将处理结果反馈给浏览器运送网页采集

数据信息的工具二、表单元素基本语法规则02剪辑：间隔板二、表单元素基本语法规则<formaction=”URL”method=”post/get”>其它HTML元素及网页交互控件元素</form>表单标签承载双标记二、表单元素基本语法规则<form=”URL”=”post/get”>其它HTML元素及网页交互控件元素</form>actionmethod目标地址可处理信息的动态网页数据发送的方式PPT美化：后期剪辑：get小数据显性传输速度快post大数据隐性传输速度慢说明：图片为网搜图，请与老师核对准确性二、表单元素基本语法规则在浏览器内传输，传输过程用户看不到数据。传输数据量比较多，速度比get慢。在地址栏传输，传输过程用户看得到数据。传输的数据量不大，但速度比post要快。三、完整表单页基本组成03剪辑：间隔板PPT美化：后期剪辑：三、完整表单页基本组成表单团队分工与协作团队的力量,可以创造1+1>2的奇迹通过协作来完成信息的收集和传输交互式接口PPT美化：版式说明：不使用大括号，表示总分关系即可后期剪辑：表单标签表单域标签表单按钮标签表单页三、完整表单页基本组成表单项或表单元素标签PPT美化：不美化后期剪辑：二维动画此处二维动画动画脚本镜号解说词画面内容备注1表单标签，即上文提到的form。右侧语法中凸显出form，文字提示表单标签2我们把表单表签比喻成拉货的车，车有多种大卡车、小货车、火车等多种拉货的车出现注意这里出现四到五种车，其中必须有敞口小卡车和密闭形式的火车，方便下一画面3根据所需要运送的货物多少、时间和涉密性要求，可选择敞口卡车，也可选择密闭形式的火车。上一画面里的车缩小，画面上方提示货物(纸箱）、时间（钟表）和涉密（秘密文件），再放大选择的车辆给密闭形式的火车、敞口小卡车单独出一张透明底的图片，下页PPT使用PPT美化：给截图预留位置后期剪辑：【密闭形式的火车】二维输出透明底图片【敞口小货卡】二维输出透明底图片（一）表单标签post：大数据量隐性慢速传输get：小数据量显性快速传输PPT美化：后期剪辑：用户输入“信息数据”表单域标签商人装货物装货物用的存储工具（二）表单域标签承载用户输入“信息数据”的工具如：文本框、密码框、单选框、多选框、文件框、菜单选择框……PPT美化：图片去白底后期剪辑：装卸开车灵活调配（三）表单按钮标签分工协作动作发出者如：重置按钮、提交按钮、无功能按钮……PPT美化：给“注意”设计一个特殊标题版式后期剪辑：form表单域提交按钮注意空白表单收集信息信息传送PPT美化：p28-p30做成类似的使用图标的组织架构图，最顶层不用人物，可用用建筑如图，或者使用博士帽这种象征意义明显的图标，其他用人物后期剪辑：学校任课老师辅导员行政管理人员PPT美化：同p28后期剪辑：公司技术人员前台接待文秘销售PPT美化：同p28后期剪辑：班级班长学习委员纪律委员生活委员团支书PPT美化：思政版式，使用思政元素（类似PPT中的图标，图标不要直接使用，因为配色风格可能不搭配），但是注意整体风格和模板搭配，比如插画风则思政元素风格也偏插画后期剪辑：分工协助各司