datalist的使用

模块五表单页面问题提出：网页不仅可以向用户展示丰富多彩的文字、图片、音视频等内容，还能通过表单与用户进行交互。通过表单可以采集用户的信息，如姓名、性别、年龄、职业、爱好、联系方式等，还可以制作问卷调查、在线订购、留言本等，配合各类服务端程序从而获取数据以满足各种需求。表单在页面中有着非常重要的作用，那如何设计表单呢？本模块基于表单及其属性、表单元素及其属性以及表单验证等知识点来完成“登录”表单和“联系页”表单两个项目，全面学习表单的设计。核心概念：表单，

标签，标签，

标签，<datalist>标签，<output>标签。
表单： 表单是网页上的一个特定区域，由一对<form>标签定义，用来搜集用户的相关信息，有效实现用户和网站的互动。
<fieldset>标签： 可将表单内容的一部分打包，生成一组相关表单的字段。
<input>标签： 用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

<select>标签： 允许访问者从选项列表中选择一项或几项，作用相当于单选框(单选时)或复选框(多选时)。

<label>标签： 用于为表单input元素定义标签，用户单击这个标签后，可以实现将光标聚焦到对应的input元素上。
<textarea>标签： 用来创建多行文本区域。
<datalist>标签： 用于定义选项列表。与input元素配合使用，可以制作出输入值的下拉列表。
<output>标签： 用于定义不同类型的输出，该标签必须从属于某个表单。
学习目标： 
 了解表单的功能与安全性问题。
 熟悉表单的属性。
 掌握表单<input>输入标签的多种形式以及各自的属性。
 熟悉<select>标签、<label>标签、<textarea>标签、<datalist>标签、<output>标签的属性及使用方法。
 理解HTML5的验证方法。
 了解正则表达式。
 能设计简洁、美观、实用的表单页面。
 分析、归纳关于如何优化表单设计的方法，培养学生具有批判性的思维能力、缜密的逻辑推理能力以及团结协作的能力，进一步提升自身的职业素养。

项目5.1“走进Web前端开发”网站
“登录”表单设计
5.1.1项目描述

“走进Web前端开发”网站“登录”表单主要包括“用户输入用户名和密码”区域、“下次自动登录”区域以及“登录”按钮、“忘记密码？”和“注册”区域，效果如图51所示。

图51“走进Web前端开发”网站“登录”表单效果

5.1.2项目分析
1. “登录”表单结构

“登录”表单在页面侧边栏的最上方，其基本结构如图52所示。

图52“走进Web前端开发”网站“登录”表单结构

2. 具体实现细节
表单由<header>和<div>组成，其中，<div>中包含三个<fieldset>区块。

(1) <header>中包含一个<h2>标题文字。
(2) 所有<fieldset>无边框。
(3) 第一个<fieldset>区块中包含单行文本输入框和密码框，两者边框都为1px的灰色实线。
(4) 第二个<fieldset>区块中包含一个垂直居中的复选框。

(5) 第三个<fieldset>区块中包含一个“登录”按钮及两个超链接，“登录”按钮背景是渐变色，鼠标指针悬停其上时背景发生变化。
5.1.3项目知识点分解

通过项目分析得知，完成此表单需首先掌握创建表单、创建单行文本框、密码框、复选框、“登录”按钮等表单元素以及创建<fieldset>等知识点。
项目51知识点分解导图如图53所示。

图53项目51知识点分解

5.1.4知识点解析
1. 表单及其属性

1)  <form>标签
表单是网页上的一个特定区域，由一对<form>标签定义。<form>标签一方面可以限定表单的范围，即定义一个区域，表单各元素都要在这个区域内，单击
“提交”按钮时，提交的也是这个区域内的数据； 另一方面，还携带表单的相关信息，如处理表单的程序、提交表单的方法等。其基本语法如下。

各种表单控件

</form>

2) <form>标签常用信息属性
<form>标签的常用属性除了name、action和method，还包括enctype、novalidate、autocomplete、target等信息属性，如表51所示。

表51<form>标签常用信息属性及其描述

属性描述

name定义表单名称，用于脚本引用
method定义表单数据从客户端传送到服务器的方法。

get： 默认方法，是将表单内容附加到URL地址后面，所以对提交信息的长度进行了限制，如信息太长，会被截去； 同时不具有保密性，不能传送非ASCII码的字符。执行搜索操作时建议使用get方法。

post： 将用户在表单中填写的数据包含在表单的主体中，一起传送给服务器上的处理程序，无字符个数和字符类型的限制； 传送的数据不会显示在浏览器的地址栏中。

当所传送的数据用于执行插入或更新数据库操作时，建议使用post方法
action指定处理表单的服务端程序
enctype规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为
“application/xwwwformurlencoded”。也就是说，在发送到服务器之前，所有字符都会进行编码(空格转换为
“+”，特殊符号转换为ASCII HEX值)
target规定在何处打开action URL。可取的值和超链接<a>的target属性完全一样，包括_blank、_parent、_top和framename
novalidate指定在提交表单时取消对表单进行有效的检查。为表单设置该属性时，可以关闭整个表单的验证，这样可以使form内的所有表单控件不被验证
autocomplete指定表单是否有自动完成功能。“自动完成”是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表里，以实现自动完成输入。

on： 表单有自动完成功能，默认值。

off： 表单无自动完成功能

3) <form>标签常用事件属性
<form>标签常用事件属性如表52所示。

表52<form>标签常用事件属性及其描述

属性描述

onchange在元素值被改变时运行的脚本
oncontextmenu当上下文菜单被触发时运行的脚本
onfocus当元素获得焦点时运行的脚本
onformchange在表单改变时运行的脚本
onforminput当表单获得用户输入时运行的脚本
oninput当元素获得用户输入时运行的脚本
oninvalid当元素无效时运行的脚本
onselect在元素中文本被选中后触发
onsubmit在提交表单时触发

4) <fieldset> 标签
fieldset元素可将表单内的相关元素分组。即利用<fieldset> 标签可将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset>标签没有必须的或唯一的属性。<legend>标签可以为fieldset元素定义标题。
具体使用方法参考下面的案例。
filedset.html：

<!doctype html>

<html>

<head>

<title>fieldset 标签实例</title>

</head>

<body>

<form>

姓名： <input type="text">

<br>

密码： <input type="password">

<br>

</fieldset>

</form>

</body>

</html>

filedset.html页面效果如图54所示。

图54fieldset 标签实例效果

5) 表单控件
只有一个表单是无法实现其功能的，需要通过表单的各种控件，用户才可以输入信息、从选项中选择和提交信息等。HTML5常用的表单控件有input、select、textarea、label、datalist等。
所有的表单控件对象都具有一个name属性，JavaScript脚本通过name属性的值来引用特定的表单控件元素，同时这也是表单提交到服务器时，每个表单控件元素的值value所对应的key值； 绝大部分对象都具有value属性，该属性返回当前表单控件的值； 所有的表单控件对象都具有一个form属性，该属性返回包含当前控件的Form对象。对于一个通用的表单数据检查程序来说，用这个属性来标明哪些控件属于哪个表单； 所有的表单元素对象都具有focus()和blur()方法，同时所有的表单元素对象还具有onfocus和onblur事件处理器。

2.  <input>输入控件
1)  <input>标签语法规则
大部分的表单控件元素都是由<input>标签创建的，基本语法如下。

其中，type的属性值指定输入类型，即表单控件的类型。
2) <input>标签type类型

常见的<input>标签type属性值如表53所示。

表53<input>标签type属性值及描述

type属性值描述type属性值描述

text单行文本框
password密码输入框
file文件域
hidden隐藏域
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
reset重置按钮
image图像按钮
emailEmail地址的输入域

urlURL地址的输入域
number数值的输入域
range一定范围内数字值的输入域
date pickers(date、month、
week、time、datetime、datetimelocal)日期和时间的输入类型
search搜索域
color颜色输入类型
tel电话号码输入类型

3) <input>标签其他常用属性
<input>标签除type属性外，还可以定义很多其他属性，如表54所示。

表54<input>标签常用属性及描述

属性描述

name控件的名称
valueinput元素设定值
sizeinput控件在页面中的显示宽度
placeholder为input类型的输入框提供一种提示
required规定输入框填写的内容不能为空
checked定义选择控件默认被选中的项
maxlength控件允许输入的最多字符数
autocomplete设定是否自动完成表单字段的内容
autofocus设定页面加载后是否自动获取焦点
readonly该控件为只读
disabled第一次加载页面时禁用控件
multiple指定输入框是否可以选择多个值
min、max、step指定输入框允许的最大值、最小值及间隔
pattern验证输入内容是否与定义的正则表达式匹配
form设定字段隶属于哪一个或多个表单
list指定字段的候选数据值列表

下面通过一个案例来演示<input>标签的具体使用，代码如下。

<!DOCTYPE html>

<html>

<title>常用input控件</title>

</head>

<body>

<h2>“前端课堂”新用户注册</h2>

用户名： <input type="text" value="请输入用户名" maxlength="20">

<br/>

登录密码:<input type="password" size="20">

<br/>

确认密码:<input type="password" size="20">

<br/>

性别： <input type="radio" name="sex" checked="checked"/>男

<br/>

出生年月日： <input type="datetime-local">

<br/>

喜欢的颜色： <input type="color" value="#ff0000"/>

<br/>

喜爱的课程：

<input type="checkbox"/>数据库原理

<input type="checkbox"/>前端开发

<input type="checkbox"/>操作系统

<br/>

照片： <input type="file"/>

<br/>

座右铭： <input type="search"/>

<br/>

你觉得本课程的难易程度:<input type="range" min="1" max="10"/>

<br/>

</form>

</body>

</html>

在上面的注册表单中，可输入用户名、登录密码、确认密码、座右铭，还可以选择性别、出生年月日、喜欢的颜色、喜爱的课程、自己的照片、课程的难易程度等，页面效果如图55所示。

图55注册表单页面效果

课堂小实践
运用已学习的创建表单和创建<input>控件的方法，设计一个在线商城的用户注册表单。
5.1.5知识点检测

5.1.6项目实现
通过项目分析和知识点学习，相信读者己能逐步完成“走进Web前端课堂”网站“登录”表单代码的编写。参考代码如下。

HTML部分：

</header>

</fieldset>

下次自动登录

</fieldset>

</fieldset>

</div>

</form>

</article>

对应的style.CSS代码：

.loginForm {

width: 96%;

border-bottom: 1px solid #cccccc;

margin-bottom: 20px;

}

.loginForm h2 {

text-align: center;

color: #666;

line-height: 3em;

margin: 16px 0 10px 0;

letter-spacing: 4px;

font: normal 24px/1 Microsoft YaHei, sans-serif;

}

.loginForm_content {

margin-bottom: 20px;

}

fieldset {

border: none;

padding: 10px 10px 0;

font-size: 12px;

}

/*文本输入框和密码输入框的样式设计*/

fieldset input［type=text］, fieldset input［type=password］ {

line-height: 2em;

font-size: 12px;

height: 24px;

padding: 3px 8px;

width: 90%;

border-radius: 3px;

border: 1px solid #CCC;

margin: 10px 10px 0;

}

/*提交按钮的样式设计*/

fieldset input［type=submit］ {

text-align: center;

padding: 2px 20px;

line-height: 2em;

border: 1px solid #cccccc;

border-radius: 3px;

background: -webkit-gradient(linear, left top, left 28, from(#EF5356), color-stop(0%, #FF0000), to(#EF5356));

background: -moz-linear-gradient(top, #EF5356, #FF0000 0, #EF5356 28px);

background: -o-linear-gradient(top, #EF5356, #FF0000 0, #EF5356 28px);

background: linear-gradient(top, #EF5356, #FF0000 0, #EF5356 28px);

height: 35px;

cursor: pointer;

letter-spacing: 6px;

margin-left: 10px;

color: #FFF;

font-weight: bold;

font-size:14px;

}

fieldset input［type=submit］:hover {

background: -webkit-gradient(linear, left top, left 28, from(#FF0000), color-stop(0%, #EF5356), to(#FF0000));

background: -moz-linear-gradient(top, #FF0000, #FF6900 0, #FF0000 28px);

background: -o-linear-gradient(top, #FF0000, #FF6900 0, #FF0000 28px);

background: linear-gradient(top, #FF0000, #FF6900 0, #FF0000 28px);

}

/*复选框的样式设计*/

fieldset input［type=checkbox］ {

margin-left: 10px;

vertical-align: middle;

}

fieldset a {

font-size: 12px;

margin: 6px 0 0 28px;

text-decoration: none;

}

5.1.7项目总结

项目实施过程中，主要是练习<form>表单、<fieldset> 标签与<input>标签的使用方法； 要特别注意表单的提交方式及复选框的语法规则； 搜集、分析、归纳登录表单的设计方法，培养批判性的思维能力、缜密的逻辑推理能力，进一步提升自身的职业素养。
项目5.2“走进Web前端开发”网站

“联系我们”表单设计
5.2.1项目描述

“走进Web前端开发”网站“联系页”页面(linkus.html)“联系我们”表单主要是学习者填写姓名、
所学专业、电子邮件、手机号码、学习历程简介、感兴趣的
前端技术，单击“立即联系”按钮后可以将信息提交到服务器； 若信息未填写或填写错误不能提交，出现错误提示。表单效果如图56所示。

图56“联系我们”表单结构效果

5.2.2项目分析
1. 表单结构

“走进Web前端开发”网站“联系页”页面“联系我们”表单结构如图57所示。

图57“联系我们”表单结构

2. 具体实现细节
表单简洁、美观、实用，具体细节如下。

(1) <form>表单嵌套<ul>，<ul>中又嵌套了<span>，以便于表单控件能整齐排列。
(2) “感兴趣的前端技术”复选框运用了<label>标签定义标注，单击文字时选择按钮便被选中。
(3) 表单中所有输入框设置为统一的样式，同时设置了输入框获取焦点、填写内容有效时和填写内容无效时样式的变化。
(4) 表单中的“提交”按钮也进行了美化。
5.2.3项目知识点分解
由上述具体实现细节，该项目涉及的新知识点导图如图58所示。

图58项目52知识点分解

5.2.4知识点解析
1. 表单其他控件

除了<input>标签外，HTML其他常用的表单控件还有<select>、<label>、<textarea>、<datalist>和<output>等。

1) <select>标签
选择列表标签允许访问者从选项列表中选择一项或几项，作用相当于单选框(单选时)或复选框(多选时)。在选项较多的情况下，相对于单选框和多选框来说，选择列表可节约很大的空间。
创建选择列表标签需要使用<select>和<option>标签。<select>标签用于声明选择列表，需由它确定选择列表是否可以多选，以及一次可以显示的选项数； <option>标签用于设置各选项的值以及是否为默认选项。常用属性如表55所示。

表55<select>标签常用属性及其描述

标签属性描述

select

name指定列表的名称
size定义能同时显示的列表项个数(默认为1)，取值大于或等于1
multiple定义列表中的选项可多选，没有该属性时只能选择一个选项

option

value设置选项值
selected设置默认选项，可对一到多个列表选项进行属性的设置

按照列表一次可被选择和显示的个数，可分为多项选择列表和下拉列表两种形式。
(1) 多项选择列表
多项选择列表是指一次可以选择多列选项，且一次可以显示一个以上选项的选择列表，下面通过一个案例来演示多项列表的使用方法。
select1.html：

<!doctype html>

<html>

<head>

<title>多项选择列表</title>

</head>

<body>

<h3>喜欢的城市</h3>

</select>

</body>

</html>

页面效果如图59所示。
(2) 下拉列表
下拉列表是指一次只能选择一个列表选项，且一次只能显示一个选项的选择列表。下面通过一个案例来演示下拉列表的使用方法。
select2.html：

<!doctype html>

<html>

<head>

</head>

<body>

<h3>周一第一节课</h3>

</select>

</body>

</html>

页面效果如图510所示。

图59select1.html页面效果

图510select2.html页面效果

2) <label>标签
<label>标签用于为表单input元素定义标签，用户单击这个标签后，可以实现将光标聚焦到对应的input元素上。label元素不会向用户呈现任何特殊的样式，但若用户单击label元素内的文本，会切换到控件本身，改善了可用性。下面通过一个案例来演示<label>标签的使用方法。
label.html：

<!DOCTYPE HTML>

<html>

<head>

<title><label>标签的使用</title>

</head>

<body>

<form>

<br/>

女生

</form>

</body>

</html>

上述HTML代码中，创建了“男生”和“女生”两个单选按钮，其中，“男生”单选按钮中添加了id属性，同时添加了<label>标签，给其添加for属性，并设置其属性值等于控件的id值，这样通过id值就建立了<label>和控件的联系。单击进行选择，要选中“男生”选项，除了单击单选框
外还可以通过单击文本“男生”来选中； 但是未给“女生”设置
<label>标签和控件的联系，仅能通过单击单选框选中“女生”选项。
3) <textarea>标签
<textarea>标签用来创建多行文本区域，其常用属性如表56所示。

表56<textarea>标签常用属性

属性值描述

autofocusautofocus规定在页面加载后文本区域自动获得焦点
disableddisabled规定禁用该文本区域
formform_id规定文本区域所属的一个或多个表单
maxlengthnumber规定文本区域的最大字符数
namename_of_textarea规定文本区域的名称
placeholdertext规定描述文本区域预期值的简短提示
readonlyreadonly规定文本区域为只读
requiredrequired规定文本区域是必填的
rowsnumber规定文本区域内的可见宽度
colsnumber规定文本区域内的可见行数

wrap

soft默认值为soft，表单提交时，textarea中的文本不换行
hard取值为hard时，表单提交时，textarea中文本换行，同时必须规定cols属性值

下面通过一个案例来演示<textarea>标签的使用方法。
textarea.html：

<!DOCTYPE html>

<html>

<head>

<title>多行文本框</title>

</head>

<body>

我是一个多行文本框。

上述代码中，rows属性用于设置可见行数，当文本内容超出这个值时将显示垂直滚动条； cols属性用于设置一行可输入多少个字符。当然，rows和cols属性都可以不设置，而通过CSS的width和height属性设置。 4) 标签标签用于定义选项列表。与input元素配合使用，可以制作出输入值的下拉列表。当在input内输入时就会有自动完成(autocomplete)的功能，用户将会看见一个下拉列表供其选择。列表通过标签嵌套

浏览器版本：