任务9.1 表单属性

模块9网页表单设计任务9.1表单属性网页设计项目教程（HTML5+CSS3+JavaScript）学习目标知识目标了解表单控件的种类和属性；理解表单的基本概念和用途；掌握表单的基本结构和属性。能力目标能够根据需求创建包含各种表单控件的HTML表单并设置合适属性；能够使用HTML和CSS对表单进行布局和美化；能够使用HTML5新增的表单控件类型，提升功能与体验。素养目标培养信息结构化展示能力，确保数据清晰易用；追求功能与美观结合，注重细节，提升用户体验；确保表单数据准确、设计整洁，避免疏忽出错。任务描述在网页中采集用户输入、实现浏览器与服务器交互，是表单设计的核心目标。本任务介绍如何创建HTML表单，以及form标记的核心属性（action、method、name、target、enctype等），并通过登录表单实例说明表单的基本用法。相关知识和技能任务9.1涵盖以下2个表单知识点：▪9.1.1表单的用途——表单实现客户端浏览器与远程服务器之间的数据采集与交互▪9.1.2表单的属性设置——<form>基本语法及action/method/name/target/enctype等核心属性9.1.1表单的用途表单在网页中主要实现数据采集功能，把用户输入的信息传递到Web服务器。▪表单是实现客户端浏览器与远程服务器之间交互的重要元素，广泛用于信息收集与反馈。▪常见表单：登录、注册、搜索商品、添加购物车、提交订单、车票/机票查询等。▪图9-2QQ注册表单包含常用控件：文本框、密码框、选择框、单选框、下拉列表框、提交按钮等。▪基本工作原理：用户输入信息→单击“提交”按钮→数据按一定方式经网络传至服务器→服务器端程序处理并返回结果页面。要点不管表单类型如何，基本工作原理相同。“提交”按钮名称可为“登录”“注册”“计算”等。图9-1为百度登录表单，图9-2为QQ注册表单。实例代码9-1登录页面使用<form>与input控件创建最简单的用户登录表单。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>登录页面</title></head><body><form><h3>用户登录</h3>用户名称<inputtype="text"name="user"><br>用户密码<inputtype="password"name="password"><br><inputtype="submit"value="登录"></form></body></html>说明form内放置h3标题与提示文字。两个input：type="text"用户名、type="password"密码。type="submit"提交按钮，value为按钮文字。运行效果见图9-3。9.1.2表单的属性设置<form>标签为用户输入创建HTML表单，可包含input、按钮等表单元素。▪<form>用于创建HTML表单，表单可包含文本字段、复选框、单选框、提交按钮等input元素。▪基本语法：<form属性="值">…设置各种表单元素…</form>。▪form的核心属性见下页“表9-1表单属性”；其中action、method、name、target、enctype为重点。要点一个页面可含多个<form>。属性写在开始标签<form…>内。运行效果见图9-3（用户登录表单）。表9-1表单属性form标记的核心属性及其含义（节选自书稿表9-1）。属性描述action规定向何处提交表单的地址（URL），即提交页面。method规定提交表单所用的HTTP方法（默认：GET）。name规定识别表单的名称（DOM中使用）。accept-charset规定被提交表单中使用的字符集（默认：页面字符集）。autocomplete规定浏览器是否自动完成表单（默认：开启）。enctype规定被提交数据的编码（默认：url-encoded）。novalidate规定浏览器不验证表单。target规定action地址的目标（默认：_self）。9.1.2重点表单属性（一）action与methodaction决定数据去向，method决定数据的提交方式。▪action属性：规定提交表单时向何处发送数据；未设置则提交给当前页面（如action="/action_page.php"指向处理脚本）。▪method属性：指定提交表单数据的HTTP方法（get/post），默认GET。▪get：数据附加在URL之后并显示在地址栏；传送数据通常不超过255字符；保密性差、不安全。▪post：以数据流形式传送，不显示在地址栏；安全性高；速度相对较慢。要点含敏感信息（密码等）建议用post。表单默认提交方式为GET。下页继续介绍name、target、enctype。9.1.2重点表单属性（二）name与targetname用作提交参数的名称；target控制提交结果的显示位置。▪name属性：HTML表单元素的关键属性（<input>、<textarea>、<select>等）；提交时其值作为请求参数名，供服务器端识别与访问。▪target属性：控制表单提交后结果的显示位置，规定链接的打开方式；取值见表9-2。取值描述_blank响应显示在新窗口或选项卡中。_self响应显示在当前窗口中（默认）。_parent响应显示在父框架中。_top响应显示在窗口的整个主体中。framename响应显示在命名的iframe中。9.1.2重点表单属性（三）enctypeenctype设置提交数据的MIME编码类型。▪enctype属性：设置提交服务器的表单数据所使用的MIME编码类型。▪默认：application/x-www-form-urlencoded，大多数情况使用此类型。▪上传文件或图片时，应选择multipart/form-data。▪表单内添加文件域后，MIME类型会自动设为multipart/form-data。要点普通文本表单用默认编码即可。含<inputtype="file">时必须用multipart/form-data。下页用实例演示action与服务器端处理。实例添加action与check.jsp处理为9_1.html的<form>添加action，提交后由check.jsp回显用户名与密码。<!--9_1.html中修改<form>部分，添加action属性--><formaction="check.jsp"><!--check.jsp文件--><body><%Stringusername=request.getParameter("user");Stringpassword=request.getParameter("password");%><p>用户名为：<%=username%></p><p>用户密码为：<%=password%></p></body>说明action="check.jsp"：表单提交给check.jsp处理。check.jsp用request.getParameter取出用户名、密码。部署后运行效果见图9-4（表单提交效果）。任务实施仿照QQ或微信登录界面，设计并编写代码实现简单的登录表单。▪实施要求：▪使用<form>与文本/密码输入框，实现用户名、密码登录界面。▪用CSS对表单进行布局与美化（居中、卡片、圆角、阴影等）。▪用JavaScript对空用户名/密码做简单校验（提交时拦截并提示）。▪可补充“忘记密码”“注册账号”等附加链接。参