任务9.3 表单高级元素的使用

模块9网页表单设计任务9.3表单高级元素的使用网页设计项目教程（HTML5+CSS3+JavaScript）学习目标知识目标了解表单控件的种类和属性；理解表单的基本概念和用途；掌握表单的基本结构和属性。能力目标能够根据需求创建包含各种表单控件的HTML表单并设置合适属性；能够使用HTML和CSS对表单进行布局和美化；能够使用HTML5新增的表单控件类型，提升功能与体验。素养目标培养信息结构化展示能力，确保数据清晰易用；追求功能与美观结合，注重细节，提升用户体验；确保表单数据准确、设计整洁，避免疏忽出错。任务描述掌握HTML5新增的表单高级元素与控件类型的使用方法。除基本元素外，HTML5还新增了url、email、number、range、color、日期和时间等高级元素，以及input的新增属性。本任务通过实际操作，掌握这些高级元素的使用方法。相关知识和技能任务9.3涵盖以下HTML5新增表单高级元素与属性：▪9.3.1url类型元素——输入并自动校验网址▪9.3.2email类型元素——输入并自动校验邮箱▪9.3.3number类型元素——数字输入（min/max/step）▪9.3.4range类型元素——滑条控件▪9.3.5search类型元素——搜索域▪9.3.6color类型元素——颜色选择对话框▪9.3.7日期和时间元素——date/month/week/time等▪9.3.8datalist标签——文本框自动输入下拉列表▪9.3.9input新增属性——formaction/formmethod/autocomplete等9.3.1url类型元素url元素用于输入网站地址，提交时自动校验URL格式。▪语法：<inputtype="url"name="field_name"/>。▪显示为文本字段，输入URL地址。▪提交表单时浏览器会自动验证url的值是否合法。▪若输入非正确网址，单击提交后将弹出提示。注意输入时必须符合网址格式。运行效果见图9-15。实例代码9-11url类型元素用<inputtype="url">创建带占位提示与必填校验的网址输入框。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>URL输入框示例</title></head><body><h1>请输入一个有效的网址</h1><form><labelfor="website">网站地址:</label><inputtype="url"id="website"name="website"placeholder=""required><br><br><inputtype="submit"value="提交网址"></form></body></html>说明type="url"：网址输入框。placeholder给出网址格式提示。required确保必须填写。运行效果见图9-15。9.3.2email类型元素email元素用于输入E-mail地址，提交时自动校验邮箱格式。▪语法：<inputtype="email"name="field_name"/>。▪与url类似，用于让浏览者输入E-mail地址。▪提交表单时，浏览器会自动验证email域的值。要点输入非邮箱格式将弹窗提示。运行效果见图9-16。实例代码9-12email类型元素用<inputtype="email">创建邮箱输入框。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>电子邮件输入框示例</title></head><body><h1>请输入您的电子邮件地址</h1><form><labelfor="email">电子邮件:</label><inputtype="email"id="email"name="email"placeholder="example@"required><br><br><inputtype="submit"value="提交邮箱"></form></body></html>说明type="email"：邮箱输入框。提交时自动校验邮箱格式。运行效果见图9-16。9.3.3number类型元素number元素提供数字输入框，可直接输入或用按钮调整数值。▪语法：<inputtype="number"name="field_name"min=""max=""step=""value=""/>。▪可用min/max限定范围，step设置步长，value设预设值。▪属性含义见表9-7（下页）。属性描述min数字控件能取的最小值。max数字控件能取的最大值。step步长（相邻可选值的间隔）。value预设值（默认显示的数字）。实例代码9-13number类型元素用<inputtype="number">创建年龄输入框，限定1~100、步长1。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>数字输入框示例</title></head><body><h1>请输入一个数字</h1><form><labelfor="age">年龄:</label><inputtype="number"id="age"name="age"min="1"max="100"step="1"value="18"required><br><br><inputtype="submit"value="提交数字"></form></body></html>说明min/max限定可输入范围。step控制每次增减的量。运行效果见图9-17。9.3.4range类型元素range元素显示为滑条控件，用max/min/step控制范围。▪语法：<inputtype="range"name="field_name"min=""max=""step=""value=""/>。▪显示为一个滑条，可拖动选取数值。▪属性含义与number元素一致（max/min/step/value）。要点滑条外观，不带数字显示。运行效果见图9-18。实例代码9-14range类型元素用<inputtype="range">制作宿舍音响音量调节滑条。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>宿舍音响音量调节</title></head><body><h1>宿舍音响音量调节</h1><p>请调整音量：</p><inputtype="range"id="volume"name="volume"min="0"max="100"value="50"><p>当前音量：50</p></body></html>说明type="range"：滑条控件。min/max设定音量范围，value为默认值。运行效果见图9-18。9.3.5search类型元素search元素即搜索域，输入框右侧会出现关闭（清除）按钮。▪语法：<inputtype="search"name="field_name"/>。▪显示样式与text很像。▪输入内容后会出现取消按钮，单击或按Esc可清除文本。要点外观随浏览器略有差异。运行效果见图9-19。实例代码9-15search类型元素用<inputtype="search">创建搜索框。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>search实例</title></head><body><form>SearchBaidu:<inputtype="search"name="baidusearch"><inputtype="submit"></form></body></html>说明type="search"：搜索域。输入后出现清除按钮。运行效果见图9-19。9.3.6color类型元素color元素可打开颜色对话框，供浏览者选择颜色。▪语法：<inputtype="color"name="field_name"value="colorvalue"/>。▪单击颜色框会打开“颜色”对话框。▪value设定默认颜色（如#FFFF00）。要点value为十六进制颜色值。运行效果见图9-20。9.3.7日期和时间元素HTML5新增了多种日期与时间输入类型。▪语法：<inputtype="date"name="field_name"/>（其他类型语法类似）。▪新增类型包括date、datetime-local、month、week、time等。▪各类型含义见表9-8（下页）。类型描述date选取年、月、日。datetime-local选取年、月、日、时间（本地时间）。month选取年、月。week选取年、周。time选取时间。注意书稿所列datetime类型在HTML5中已废弃，现行标准用datetime-local（已并入上表）。运行效果见图9-21。实例代码9-17日期和时间元素用<inputtype="date">创建生日日期选择器。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>date实例</title></head><body><form>输入你的生日:<inputtype="date"name="bday"><inputtype="submit"></form></body></html>说明type="date"：日期选择框。其他日期类型代码格式类似。运行效果见图9-21。实例代码9-16color类型元素用<inputtype="color">创建颜色选择器。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>color实例</title></head><body><form>选择你喜欢的颜色：<inputtype="color"name="favcolor"value="#FFFF00"/><inputtype="submit"/></form></body></html>说明type="color"：颜色选择器。value="#FFFF00"为默认黄色。运行效果见图9-20。9.3.8datalist标签datalist为文本框提供自动输入（下拉建议）功能。▪语法：<inputlist="datalist_id"name="field_name"><datalistid="datalist_id"><optionvalue="...">…</datalist>。▪<datalist>很像<select>，内含多个<option>，但呈现在文本框旁。▪它只是数据容器，须由<input>的list属性引用。▪与select区别：datalist文本框可自由输入任意值。要点输入i时仅呈现匹配项（如InternetExplorer）。运行效果见图9-22。实例代码9-18datalist标签用<inputlist>+<datalist>实现浏览器版本自动输入。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>datalist实例</title></head><body><form><p>浏览器版本：<inputlist="words"name="browser"></p><datalistid="words"><optionvalue="InternetExplorer"><optionvalue="Firefox"><optionvalue="Chrome"><optionvalue="Opera"><optionvalue="Safari"><optionvalue="Sogou"><optionvalue="Maxthon"></datalist><buttontype="submit">提交</button></form></body></html>说明input的list关联datalist的id。可输入也可从下拉选择。运行效果见图9-22。9.3.9input表单控件新增属性HTML5为表单与input新增了多个实用属性。▪formaction/formmethod——不同提交按钮提交到不同地址、方式。▪autocomplete——自动完成，提示曾输入的值。▪novalidate——提交时不验证表单/输入域。▪placeholder——输入域为空时显示的提示文字。▪autofocus——页面加载时域自动获得焦点。▪required——提交前必须填写（不能为空）。▪pattern——用正则表达式验证输入值。要点下两页给出典型示例。部分属性为布尔属性（如required、autofocus）。9.3.9新增属性示例（一）formaction/formmethod、autocomplete、novalidate的典型用法。<!--formaction/formmethod：不同按钮提交到不同地址与方式--><formaction="default.html"><inputtype="submit"value="登录"formaction="login.html"formmethod="get"><inputtype="submit"value="注册"formaction="register.html"formmethod="post"></form><!--autocomplete：自动完成--><formaction=""method="get"autocomplete="on"><labelfor="name">Name:</label><inputtype="text"name="name"id="name"placeholder="请输入用户名"autofocusrequired><br><labelfor="email">E-mail:</label><inputtype="email"name="email"id="email"autocomplete="off"></form><!--novalidate：提交时不验证--><formaction=""method="get"novalidate="true">E-mail:<inputtype="email"name="user_email"><inputtype="submit"></form>说明formmethod对应不同提交方式。autocomplete适用于form与多种input。novalidate关闭提交验证。9.3.9新增属性示例（二）placeholder、autofocus、required、pattern的典型用法。<!--placeholder：输入提示--><inputtype="text"name="fname"placeholder="Firstname"><!--autofocus：页面加载时自动聚焦-->用户名:<inp