HTML5网页前端设计第3版 第06章教案-HTML5表单API

《HTML5网页前端设计》教案第6章HTML5表单API一、教学目标：了解HTML5表单的作用；掌握HTML5表单API保留的常用标签用法；掌握HTML5新增输入类型的用法；掌握HTML5新增元素标签的用法；掌握HTML5新增元素属性的用法。二、教学重点和难点：重点：掌握HTML5表单API保留的常用标签用法；难点：掌握HTML5表单API新增元素标签和属性的用法。三、教学方法与手段：采取互动式教学方法，理论教学使用多媒体投影教室。四、课程简介：本章主要介绍HTML5表单API的功能与应用。HTML表单主要用于收集用户输入或选择的数据，并将其作为参数提交给远程服务器。本章主要内容包括HTML表单的基础知识与HTML5表单API的新特性。在HTML5表单API新特性中增加了HTML5特有的输入类型、元素标签与相关属性。五、教学基本内容：6.1HTML表单基础 6.1.1表单标签<form> 表单标签<form>和</form>用于定义一个完整的表单框架，其内部可包含各式各样的表单组件，例如文本输入框、密码框、按钮等内容。表单标签<form>的基本语法格式如下：<form><!--内部可添加各种表单组件--></form>在HTML4中该标签具有5种属性，如表6-1所示。表6-SEQ表5-\*ARABIC1表单元素<form>属性一览表属性名称属性值解释actionURL地址规定表单提交数据的服务器地址。methodget或post规定用于发送表单数据的HTTP方法，默认值为自定义表单名称规定表单的名称，具有唯一性。enctypeapplication/x-www-form-urlencodedmultipart/form-datatext/plain规定表单数据发送之前的编码要求。target_blank_self_parent_topiframename规定在何处打开action属性中的URL地址。表单的method属性用于规定了发送表单数据的两种HTTP方法：GET和POST方法。表单的enctype属性用于规定表单数据传递时的编码方式，具有3种属性值：application/x-www-form-urlencoded、multipart/form-data和text/plain。上述这些属性中比较常用的是action和method，用于规定表单数据提交的URL地址以及提交方式。其余属性无特殊情况一般可省略直接使用默认值。例如：<formaction="http://localhost/testform"method="post"><!--内部可添加各种表单组件--></form>单纯的<form>标签不包含任何可视化内容，需要与表单组件配合使用形成完整的表单效果。6.1.2输入标签<input>输入标签<input>是最常用的表单标签，根据其type属性值的不同可以显示多种表单元素样式，例如单行文本输入框、密码框、单选和复选按钮等。该表单标签有一系列属性用于对表单输入控件进行设置，如表6-2所示。表6-SEQ表5-\*ARABIC2<input>标签的常用属性属性名称属性值解释accpetMIME文件类型只能与<inputtype="file">的文件上传控件配合使用，用于规定文件上传控件可选择的文件类型。alt文本内容只能与<inputtype="image">的图像按钮控件配合使用，用于规定无法显示图像时的提示文本。checkedchecked只能与<inputtype="radio">的单选框或<inputtype="checkbox">的复选框配合使用，用于规定页面加载时默认为选中状态。disableddisabled用于规定加载时禁用此元素。maxlength数值用于规定输入框中字符的最大长度。name自定义名称用于定义<input>标签的名称，如果没有填写name属性值则表单组件的内容无法被正确提交。readonlyreadonly用于定义<input>标签中的文本为不可编辑的只读状态。size数值用于定义输入框中可见字符的个数。typetextpasswordradiocheckboxsubmitresetbuttonimagefilehidden用于规定<input>标签的类型，具体解释见表6-2。value文本值用于规定<input>标签的值。<input>标签的常见语法格式如下：<inputtype="输入类型"name="自定义名称"/>其中type属性值需要替换成表示输入类型的关键词，在HTML4中<input>标签的基本输入类型共有10种，如表6-3所示。表6-SEQ表5-\*ARABIC3<input>标签的基本输入类型类型名称解释text用于显示单行文本输入框。password用于显示密码输入框，其中字符会被*遮挡。radio用于显示单选按钮。checkbox用于显示复选按钮。submit用于显示提交按钮，该按钮可以将表单数据发送给服务器。reset用于显示重置按钮，该按钮可以清除表单中的所有数据。button用于显示无动作按钮，通常点击事件需要配合JavaScript使用。image用于显示图像形式的提交按钮。file用于显示文件上传控件，包含输入区域和浏览按钮。hidden用于隐藏输入字段。6.1.3标记标签<label> 标记标签<label>又称为标注标签，可放置在<input>元素前后为其定义标记，通常为文本形式作为<input>元素的补充说明。虽然显示效果与普通文本一致，但是<label>标签可以在被点击时为对应的表单控件生成焦点。可以在<label>元素的首标签中使用for属性引用对应表单控件的id名称。例如：<labelfor="name">姓名：</label><inputtype="text"name="name1"id="name1"/>其中表单控件的id名称为自定义，可以与name属性值相同。也可以直接将文本内容与表单控件都放入<label>和</label>标签之间，此时无需为<input>元素特别设置id名称。例如：<label>姓名：<inputtype="text"name="name1"/></label>这两种方法的运行效果完全相同。6.1.4多行文本标签<textarea> 使用<textarea>标签可以实现多行文本区域，它与<input>标签实现的文本框最大的区别在于<textarea>元素允许文本回车换行。其基本语法格式如下：<textarea></textarea>使用该标签实现的文本域可以容纳无限量的文本内容，其中文本的默认字体为Courier。目前该标签具有3种属性，如表6-5所示。表6-SEQ表5-\*ARABIC5<textarea>元素属性一览表属性名称属性值解释rows正整数的数值规定文本框可见的行数。cols正整数的数值规定文本框可见的宽度，默认值为20。wrapsoft或hard规定文本框的换行方式，默认值为soft。例如，声明一个20行、每行15个字符的多行文本域，写法如下：<textareacols="15"rows="20"></textarea>也可以使用CSS样式规定<textarea>元素的宽度（width）和高度（height）属性。默认情况下，<textarea>元素形成的多行文本框是可编辑状态，可以使用<textarea>元素的readonly属性将该文本框改为只读状态，或使用disabled属性禁用该文本区域。6.1.5列表标签<select> 在HTML表单中，<select>标签可以用于创建单选或多选菜单，菜单的样式根据属性值的不同可显示为下拉菜单或列表框。在HTML4中该标签具有4种属性，如表6-6所示。表6-SEQ表5-\*ARABIC6列表元素<select>属性一览表属性名称属性值解释disableddisabled禁用列表菜单。multiplemultiple规定允许同时选中多个选项。name自定义名称规定列表元素的名称。size数值规定列表菜单中可见选项的个数。其中multiple属性会使得<select>元素的显示样式从默认的下拉菜单变更为列表框，并允许同时选中多个选项栏目。最常见的用法是<select>元素配合若干个<option>标签使用，形成简易的下拉菜单。<option>标签具有4种属性，如表6-7所示。表6-SEQ表5-\*ARABIC7选项元素<option>属性一览表属性名称属性值解释disableddisabled首次加载时禁用当前选项。label文本内容规定选项的简写内容，该内容将取代原选项内容显示在列表中。selectedselected规定首次加载时当前选项为选中状态。value文本内容规定提交表单时发送给服务器的选项值。选项标签<option>配合列表标签<select>使用的基本语法格式如下：<select><optionvalue="值1">选项1</option><optionvalue="值2">选项2</option>……<optionvalue="值N">选项N</option></select>其中value属性值是提交表单时传递的数据值，不显示在网页上；<option>首尾标签之间的文本才是显示在网页上的选项内容。例如：<select><optionvalue="apple">苹果</option><optionvalue="cherry">樱桃</option><optionvalue="grape">葡萄</option></select>在页面首次加载时第一条选项为默认选中的状态。如果需要默认选中列表中的其他选项，可以为该选项标签<option>添加selected属性。例如，为第三个选项设置默认选中效果：<select><optionvalue="apple">苹果</option><optionvalue="banana">香蕉</option><optionvalue="grape"selected>葡萄</option></select>其中selected属性的完整声明应为selected="selected"，也可以简写为selected。需要注意是，如果是单选状态只能为其中一个选项添加selected属性。如果为多个选项同时添加了该属性，则默认也只显示最后一个带有selected属性的选项。如果列表项目较多需要进行分类，可以使用<optgroup>标签定义选项组。<optgroup>标签具有2种属性，如表6-8所示。表6-SEQ表5-\*ARABIC8选项组元素<optgroup>属性一览表属性名称属性值解释disableddisabled禁用选项组中的所有选项。label文本内容规定选项组的标题。例如：<select><optgrouplabel="水果类"><optionvalue="apple">苹果</option><optionvalue="banana">香蕉</option><optionvalue="grape">葡萄</option></optgroup><optgrouplabel="蔬菜类"><optionvalue="apple">南瓜</option><optionvalue="banana">四季豆</option><optionvalue="grape">土豆</option></optgroup></select>此时<optgroup>标签中label属性的文本内容也会显示在列表中作为分组选项的标题，点击时不会变为选中状态。6.1.6按钮标签<button> 按钮标签<button>可用于在网页上生成自定义样式的按钮。在<button>和</button>标签之间可以包含普通纯文本内容、图像、文本格式化标签等内容；而<input>的提交（submit）、重置（reset）或无动作按钮（button）类型都只允许包含无样式的普通文本，如果需要图片必须使用专门的图像提交按钮（image）类型。这意味着使用<button>可以创建带有图像、颜色、文字等更多样式效果的按钮，比<input>标签创建的按钮更加丰富。在HTML4中该标签具有4种属性，如表6-9所示。表6-SEQ表5-\*ARABIC9按钮元素<button>属性一览表属性名称属性值解释disableddisabled禁用当前按钮元素。name自定义名称规定按钮的名称。typebuttonresetsubmit规定按钮的类型。value文本内容规定按钮的初始值。<button>按钮也可以在表单之外独立使用，配合JavaScript脚本形成多样化的功能。6.1.7域标签<fieldset>和域标题标签<legend> 域标签<fieldset>可以用于将同一个表单中的多个表单元素分组显示。当把一组表单元素放在<fieldset>和</fieldset>标签之间，浏览器会形成边框效果凸显分组。配合以域标题标签<legend>使用，可以为每个分组的区域显示独立的标题。其基本语法格式如下：<form><fieldset><legend>域标题</legend><!--其他表单组件--></fieldset></form>例如，用于显示学生的个人基本信息：<form><fieldset><legend>学生基本信息</legend>姓名：<inputtype="text"/>学号：<inputtype="text"/></fieldset></form>在同一个表单内可以使用<fieldset>标签对表单元素进行多项分组。6.2HTML5表单新特性 6.2.1HTML5表单新增输入类型 HTML5新增多项表单输入类型，这些新类型具有更明确的含义，并且在禁用浏览器脚本的情况都可以为用户提供输入控制和验证。HTML5表单新增的输入类型共计13种，如表6-10所示。表6-SEQ表5-\*ARABIC10HTML5表单新增输入类型输入类型含义tel电话号码email电子邮箱地址urlURL网址number数值range包含数值范围的滚动条datetimeUTC日期（包含年、月、日）和时间（包含时、分）datetime-local本地日期和时间time选择时间（包含时、分）date选择日期（包含年、月、日）week选择星期（包含年、第几周）month选择月份（包含年、月）search搜索栏目的文本输入域color颜色选择器在HTML4中最常见的普通单行文本框输入类型格式为<inputtype="text"name="自定义名称"/>，HTML5新增的输入类型写法格式是相类似的，需要将双引号中的text替换为表中新的类型值。其中datetime、datetime-local、time、date、week和month类型是6种样式不同的时间日期选择器控件，统称为DatePickers（日期选择器）。6.2.2HTML5表单新增元素标签 本节将介绍HTML5中新增的两个表单元素标签：<datalist>和<output>元素。1.数据列表标签<datalist>使用数据列表标签<datalist>可以为普通单行文本输入框提供提示选项。提示选项初始为隐藏状态，当焦点位于对应的文本输入框时会在下方自动展开提示选项，用户可以通过点击提示选项自动生成文本内容。在HTML5中该标签具有4种属性，如表6-19所示。表6-SEQ表5-\*ARABIC19数据列表标签<datalist>属性一览表属性名称属性值解释disableddisabled禁用列表菜单。multiplemultiple规定允许同时选中多个选项。name自定义名称规定列表元素的名称。size数值规定列表菜单中可见选项的个数。<datalist>元素和列表标签<select>的用法类似，也需要在其首尾标签内部使用一个或多个选项标签<option>。其基本格式如下：<datalist><optionvalue="值1">选项一</option><optionvalue="值2">选项二</option><optionvalue="值3">选项三</option></datalist>其中<option>标签的value值为可选。如果设置了value值则该属性值会随着用户的选择自动显示在文本输入框中；如果没有设置value值，则会显示<option>首尾标签之间的文本内容。<datalist>无法单独使用，需要与文本输入框配合使用。在需要显示列表选项的文本框中添加list属性并令其属性值为<datalist>元素的id名称。例如：<inputtype="text"list="myList"/><datalistid="myList"><option>选项一</option><option>选项二</option><option>选项三</option></datalist>在<datalist>的首标签内必须为其声明一个自定义的id名称方可被文本输入框调用。2.输出标签<output>输出标签<output>用于显示各类输出结果，可以和表单oninput事件配合使用，动态变化输出结果。其基本格式如下：<outputname="自定义名称"for="相关元素id名称">文本内容</output>其中for属性中可填入关联的一个或多个元素的id名称，如果是填入多个名称中间用空格隔开即可。例如：<inputtype="range"name="range1"id="range1"min="0"max="100"step="1"value="0"/><inputtype="range"name="range1"id="range1"min="0"max="100"step="1"value="0"/><outputname="output1"for="range1">0</output>6.2.3HTML5表单新增属性 1.autofocus属性autofocus属性使得指定的输入框在页面加载时自动成为焦点，该属性适用于所有<input>标签的类型。使用方式是在需要获取焦点的<input>标签中添加autofocus="autofocus"或直接简写为autofocus。例如：<inputtype="password"name="pwd"autofocus/>2.form属性在HTML5之前，只有包含在表单标签<form>内的表单组件方能正确提交给服务器，而在HTML5中表单组件可以通过规定form属性放置于<form>标签之外。form属性可以指定<input>元素从属于哪个表单，同一个<input>元素可以属于一个甚至多个表单。该属性适用于所有<input>标签的类型。外部的<input>标签在使用时必须引用表单标签<form>的id名称。例如：<formid="form1"><!--内容略--></form><inputid="username"type="text"form="form1"/>上述代码中，外部的<input>标签通过引用表单标签<form>的id名称"form1"实现了与该表单的关联。当提交表单给服务器时，该标签的内容也会当作表单标签<form>内部的内容一并提交。外部的<input>标签还允许同时从属多个表单，在使用form属性引用多个表单的id名称时需要使用逗号进行分割。例如：<formid="form1"><!--内容略--></form><formid="form2"><!--内容略--></form><inputid="username"type="text"form="form1,form2"/>上述代码中，外部的<input>标签通过form属性声明实现了同时与不同表单元素关联的从属关系。其中任意一个表单向服务器提交数据时，都会将外部的<input>标签的内容当作表单元素内部的数据一并提交。3.formaction系列属性以formaction为首的一系列属性被称为表单重写属性（formoverrideattributes），它们可以用于更改表单的一些属性设置，并且仅适用于类型为submit或image的<input>标签。常用表单重写属性共有五种，如表6-25所示。表6-SEQ表5-\*ARABIC25常用表单重写属性一览表属性名称解释formaction用于重写表单的action属性。formenctype用于重写表单的enctype属性。formmethod用于重写表单的method属性。formnovalidate用于重写表单的novalidate属性。formtarget用于重写表单的target属性。如果表单标签<form>中设置的属性在提交按钮中进行了重写，则会优先使用提交按钮中设置的表单重写属性。例如：<formmethod="get"><!--内容略--><inputtype="submit"value="提交"formmethod="post"/></form>上述代码中虽然<form>标签设置了method属性值为"get"，但是当点击提交按钮时，该属性值会被更新为"post"。利用这些表单重写属性可以方便在同一个表单中设置多个不同的提交按钮，并可以为这些提交按钮分别设置各自的属性，它们互相不会产生干扰。例如：<formmethod="post"><!--内容略--><inputtype="submit"value="注册"formaction="register"/><inputtype="submit"value="登陆"formaction="login"/></form>上述代码表示当点击“注册”或“登陆”按钮时会分别将数据提交给不同的服务器地址进行处理。4.placeholder属性placeholder属性为input类型提供了提示功能，该提示会在空白输入框中出现，当输入框获得焦点时提示消失。该属性适用于<input>标签的6种常见类型：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）和password（密码框）。使用方式是将placeholder属性添加到<input>标签中，并给出提示内容。例如：<inputtype="text"name="username"placeholder="请输入用户名"/>5.required属性required属性要求在提交之前必须在输入框内填写内容，提交时输入框不能为空。该属性适用于<input>标签常用的11种类型：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、password（密码框）、datepickers（日期选择器）、number（数值）、checkbox（多选按钮）、radio（单选按钮）和file（上传文件控件）。例如：用户名：<inputtype="text"name="usrname"required/>6.max、min和step属性max和min属性用于为数字或日期的input类型规定所允许的数值范围：其中max规定最大值，min规定最小值，step属性规定数字间隔。max、min和step属性均适用于3种类型的<input>标签：datepickers（日期选择器）、number（数值）和range（数值范围）。这三个属性使用时不分先后顺序，例如：<inputtype="number"max="100"min="0"step="20"/>上述代码表示在数值输入框中允许输入的最小值为0，最大值为100。并且数字间隔为10，表示只能输入0、20、40、60、80和100。7.multiple属性multiple属性可以允许<input>标签同时输入多个值。该属性只适用于2种类型的<input>标签：email（电子邮箱）和file（上传文件控件）。例如：选择文件：<inputtype="file"name="file"multiple/>其中multiple属性为简写形式，完整的写法是multiple="multiple"。8.width和height属性width和height属性只能用于类型为image的<input>标签，为图像规定以像素为单位的宽度（width）和高度（height）。例如，规定图像提交按钮的宽和高分别为240像素和50像素：<inputtype="image"src="image/btn.jpg"alt="登录"width="240"height="50"/>9.pattern属性pattern属性用于约束输入域的内容，该属性以正则表达式的方式对输入内容进行规范。关于正则表达式的用法可参考第四章JavaScript基础中正则表达式（RegExp）类型的教程。该属性适用于6种<input>标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）以及password（密码框）。例如：<inputtype="text"name="country_code"pattern="[A-z]{3}"title="Threelettercountrycode"/>上述代码表示输入框只允许填入英文大小写字母，并且只可以有三个字符。10.list属性list属性可以为输入框提供一系列选项提示，需要与数据列表标签<datalist>配合使用。数据列表标签<datalist>是输入域的提示选项列表，当输入域获得焦点时，提示选项列表会自动展开。该属性适用于9种<input>标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、datepickers（日期选择器）、number（数值）、range（数值范围）、和color（颜色选择器）。11.autocomplete属性autocomplete属性表示在<form>或<input>域中为用户正在输入的内容显示曾经填写过的内容选项，其属性值有on（开启）或off（关闭）两种情况。该属性同时适用于<form>标签和9种<input>标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、password（密码框）、datepickers（日期选择器）、range（数值范围）和color（颜色）。12.novalidate属性novalidate属性表示在表单提交时不验证form或input域的内容，其属性值有true（真）或false（假）两种情况。该属性同时适用于<form>标签和9种<input>标签：text（单行文本框）、search（搜索框）、url（URL地址）、tel（电话）、email（电子邮箱）、password（密码框）、datepickers（日期选择器）、range（数值范围）和color（颜色）。6.3实验案例——用户注册页面的设计与实现功能介绍：使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。验证要求：每个输入栏目的文本框均需要显示提示信息。用户在点击按钮提交注册信息时可以