任务9.2 基本元素的应用

模块9网页表单设计任务9.2基本元素的应用网页设计项目教程（HTML5+CSS3+JavaScript）学习目标知识目标了解表单控件的种类和属性；理解表单的基本概念和用途；掌握表单的基本结构和属性。能力目标能够根据需求创建包含各种表单控件的HTML表单并设置合适属性；能够使用HTML和CSS对表单进行布局和美化；能够使用HTML5新增的表单控件类型，提升功能与体验。素养目标培养信息结构化展示能力，确保数据清晰易用；追求功能与美观结合，注重细节，提升用户体验；确保表单数据准确、设计整洁，避免疏忽出错。任务描述掌握HTML表单中常用基本元素（input、textarea、label、select等）的使用方法。本任务通过实际操作，掌握表单常用基本元素（<input>、<textarea>、<label>、<select>等）的用法，并能综合运用它们设计“个人信息”页面。相关知识和技能任务9.2涵盖以下4类基本表单元素：▪9.2.1input表单控件——文本/密码/单选/复选/按钮/提交/重置/隐藏/图像等▪9.2.2textarea多行文本框——提交大段文本（评论、反馈等）▪9.2.3label标签——描述控件用途、提升可访问性▪9.2.4下拉列表框select——从菜单中单项/多项选择9.2.1input表单控件input是最常见、最基础的表单控件，通过type属性可生成多种输入组件。▪input属于输入类控件，是构建各类表单的基础元素。▪语法：<inputname="字段名"type="类型">。▪type决定组件形态：文本、密码、单选、复选、文件、按钮、提交、重置、隐藏、图像。▪type属性取值及含义见表9-2（下页）。要点type缺省为text（单行文本）。同一组单选框name必须相同。运行效果见图9-5～图9-11。表9-2input的type属性取值及其描述type属性的主要取值（节选自书稿表9-2）。type取值描述text默认。定义一个单行文本字段（默认宽度20个字符）。password定义密码字段（字符被遮蔽显示）。radio单选框（一组中只能选一个）。checkbox复选框（一组中可多选）。file文件上传框。button普通按钮。reset重置按钮（恢复表单初始状态）。submit提交按钮（将信息提交到服务器）。hidden隐藏域（用户不可见，随表单提交）。image图像域（图像提交按钮）。9.2.1文本框（text）文本框提供最常用的单行文本输入功能。▪语法：<inputtype="text"name="字段名"value="默认值"size="宽度"maxlength="最大字符数"/>。▪HTML5新特性：autocomplete自动完成；type="email"等输入验证；placeholder提示；required必填。文本框属性描述name文本框的名字（提交时参数的名称，必需）。value文本框的默认值（提交时参数的值）。size文本框的宽度。maxlength文本框的最大输入字符数。实例代码9-2文本框示例用<inputtype="text">创建带label、占位提示与必填校验的用户名输入框。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>文本框示例</title></head><body><formaction="/submit"method="POST"><labelfor="username">用户名：</label><inputtype="text"id="username"name="username"placeholder="请输入用户名"required/></form></body></html>说明id与name分别提供唯一标识与提交键名。placeholder提供输入提示。required确保用户必须填写。运行效果见图9-5。9.2.1密码域（password）密码框外观与文本框类似，输入内容以圆点或星号遮蔽显示。▪语法：<inputtype="password"name="字段名"value="默认值"size="宽度"maxlength="最大字符数"/>。▪密码框属性与文本框相同（name/value/size/maxlength）。▪用于保护用户信息、提升登录等场景的用户体验。要点type="password"控制遮蔽显示。id便于CSS/JS操作；name为提交键名。运行效果见图9-6。实例代码9-3密码输入示例用<inputtype="password">创建密码输入框。<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>密码输入示例</title></head><body><form><labelfor="password">请输入密码:</label><inputtype="password"id="password"name="password"/></form></body></html>说明type="password"：密码输入框。输入内容以圆点/星号显示。运行效果见图9-6。9.2.1单选框（radio）单选框让浏览者在一组选项中只能选择一个，每项以一个圆框表示。▪语法：<inputtype="radio"name="字段名"value="值"checked/>。▪同一组单选框name必须相同，否则达不到多选一效果。单选框属性描述name单选框名字（同组必须相同）。value预设值（提交时参数的值）。checked初始状态被选中（缺省为未选中）。实例代码9-4单选框实例一组同name的radio实现“多选一”的图书类型选择。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>单选框实例</title></head><body><form>请选择您感兴趣的图书类型：<br><inputtype="radio"name="book"value="Book1"/>网站编程<br><inputtype="radio"name="book"value="Book2"checked/>办公软件<br><inputtype="radio"name="book"value="Book3"/>人工智能<br><inputtype="radio"name="book"value="Book4"/>网络管理<br><inputtype="radio"name="book"value="Book5"/>信息安全<br></form></body></html>说明五项的name均为book，构成一组。Book2默认checked选中。运行效果见图9-7。9.2.1复选框（checkbox）复选框让浏览者在一组选项中同时选择多个，每个框独立。▪语法：<inputtype="checkbox"name="字段名"value="值"checked/>。▪同一组复选框必须使用同一个name。▪属性（name/value/checked）含义与单选框类似。要点同组checkbox用相同name。checked表示默认选中。运行效果见图9-8。实例代码9-5复选框实例一组同name的checkbox实现“可多选”的图书类型选择。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>复选框实例</title></head><body><form>请选择您感兴趣的图书类型：<br><inputtype="checkbox"name="book"value="Book1"/>网站编程<br><inputtype="checkbox"name="book"value="Book2"checked/>办公软件<br><inputtype="checkbox"name="book"value="Book3"checked="checked"/>设计软件<br><inputtype="checkbox"name="book"value="Book4"/>网络管理<br><inputtype="checkbox"name="book"value="Book5"/>黑客攻防<br></form></body></html>说明五项name均为book，可多选。Book2、Book3默认选中。运行效果见图9-8。9.2.1按钮类控件普通按钮、提交按钮、重置按钮均由input的不同type实现。▪普通按钮：<inputtype="button"name="button_name"value="文字"onClick="js脚本"/>，value为按钮文字，常配合JS事件。▪提交按钮：<inputtype="submit"name="button_name"value="文字"/>，将表单信息提交到服务器。▪重置按钮：<inputtype="reset"name="button_name"value="文字"/>，将表单恢复到初始状态。要点onClick为事件处理属性（普通按钮）。提交/重置按钮无需name也可工作。运行效果见图9-9～图9-11。实例代码9-6普通按钮实例点击普通按钮，用JS将文本框1的值复制到文本框2。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>普通按钮实例</title></head><body><form>点击下面的按钮，把文本框1的内容拷贝到文本框2中：<br/>文本框1:<inputtype="text"id="field1"value="点击将会复制我！"/><br/>文本框2:<inputtype="text"id="field2"/><br/><inputtype="button"name="..."value="单击我"onClick="document.getElementById('field2').value=document.getElementById('field1').value"/></form></body></html>说明name="..."为占位名称。onClick触发JS复制文本框值。运行效果见图9-9。实例代码9-7提交按钮示例用<inputtype="submit">将表单提交到指定地址。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>提交按钮示例</title></head><body><h1>用户信息表单</h1><formaction="/submit"method="post"><labelfor="name">姓名:</label><inputtype="text"id="name"name="name"required><br><br><inputtype="submit"name="submit_button"value="提交信息"></form></body></html>说明type="submit"：提交按钮。value为按钮显示文字。运行效果见图9-10。实例代码9-8重置按钮示例提交按钮旁放置重置按钮，恢复表单初始状态。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>重置按钮示例</title></head><body><h1>用户信息表单</h1><form><labelfor="name">姓名:</label><inputtype="text"id="name"name="name"placeholder="请输入您的姓名"><br><br><inputtype="submit"name="submit_button"value="提交信息"><inputtype="reset"name="reset_button"value="重置表单"></form></body></html>说明type="reset"：重置按钮。value="重置表单"为按钮文字。运行效果见图9-11。9.2.1其他基本元素图像提交按钮与隐藏域，丰富表单的交互与数据传递。▪图像提交按钮：<inputtype="image"name="imagename"src="URL"align=""/>，以图片充当提交按钮，与页面整体风格统一。▪隐藏域：<inputtype="hidden"name="hiddenname"value="值"/>，用户不可见但随表单提交（如后台变量）。▪例如<inputtype="hidden"name="method"value="delete">，提交后地址栏可见method=delete。要点image兼具按钮功能与图片外观。hidden用于传递不便展示的数据。9.2.2textarea多行文本框textarea创建多行文本输入区域，适用于评论、反馈等大段文本。▪语法：<textareaname="名称"cols="列数"rows="行数"placeholder=""maxlength="500"readonly>文本</textarea>。▪与input不同，textarea允许输入更长的文本。textarea属性描述name表单提交时文本域的名称。cols列数（宽度，单位为字符宽）。rows行数（高度，单位为字符高）。placeholder文本域为空时显示的提示文字。maxlength允许输入的最大字符数。required提交时确保该文本域非空。readonly设为只读，不能修改编辑。实例代码9-9多行文本框和标签用<textarea>创建带label与必填校验的多行反馈框。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>多行文本框和标签</title></head><body><formaction="/contact"method="post"><labelfor="message">学习记录</label><textareaid="message"name="message"rows="5"cols="40"placeholder="输入您的消息..."required></textarea><inputtype="submit"value="发送"></form></body></html>说明rows/cols设定多行框大小。label的for关联textarea的id。运行效果见图9-12。9.2.3label标签label描述表单控件的用途，提升可用性与可访问性。▪语法：<labelfor="控件id">文本标签</label>。▪for的值与关联控件的id相同；关联后单击文本标签即可让控件获得焦点。▪屏幕阅读器会把文本标签与对应字段一起念出，对可访问性很有帮助。要点label标记输入框前的提示文字。for与控件id必须一致。多行文本框示例中已使用label。9.2.4下拉列表框（select）select以下拉菜单形式提供选项，最节省空间，可单选或多选。▪语法：<selectsize="数目"name="名称"multiple><optionvalue="值"selecteddisabled>文本</option>…</select>。▪正常仅显示一个选项，单击展开可见全部；multiple可多项选择。select属性描述nameselect的名字（提交时参数名，必需）。multiple可多项选择，显示风格为列表。size显示选项数目，默认1；>1显示为列表。valueoption对应的值。disabled该option不可用。selected该option被选取（默认第一项）。实例代码9-10下拉列表框示例用<select>与<option>创建水果单选下拉菜单。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>下拉列表框示例</title></head><body><h1>选择您喜欢的水果</h1><form>