<datalist> 显示在一个下拉列表中，如图 5 所示。该图是在 Opera 中的屏幕截图。在 Chrome 中，这个列表被显示为一个简单的文本框。用户将不会看到列表。
图 5. Favorites 字段
清单 5 提供用于创建 Favorite Composer 部分的字段集。
清单 5. Favorite Composer 字段
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<fieldset>
<legend> Favorite Composer </legend>
<p>
<label>
<input type="text" name="favorites" list="composers">
<datalist id="composers">
<option value="Bach">
<option value="Beethoven">
<option value="Brahms">
<option value="Chopin">
<option value="Mendelssohn">
</datalist>
</label>
</p>
</fieldset>
|
第三个 <fieldset> 标记
第三个
<fieldset> 标记显示一个作曲家列表，随后是一个数字字段，指定每位列出的作曲家有多少个作品。图 6 显示了该部分。
图 6. Composers 字段
例如，Bach 有五个作品，而 Beethoven 有 10 个作品。清单 6 显示了每位作曲家的最大值。当您提交表单时，数字字段不接受超过最大值的数字。当您提交时，该字段会对不正确、超出范围的值进行响应，提示您纠正输入，使它符合该字段可接受的数值限制。
number 类型为输入创建一个微调框字段。
min、
max 和
step 均可与
number 类型一起使用。默认的 step 值是
1。
min、
max 和
step 属性的使用具有数字、范围或日期选择器输入约束。
max 属性决定输入字段所允许的最大值。
min 属性决定输入字段所允许的最小值。
step 属性决定有效的数值递增量。
清单 6. composer 字段
双击代码全选
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<fieldset>
<legend>Composers</legend>
<p>
<label>
Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
</label>
</p>
<p>
<label>
Beethoven: <input name="form_number" id="form_number" type="number"
min="1" max="10" >
</label>
</p>
<p>
<label>
Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
</label>
</p>
<p>
<label>
Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
</label>
</p>
<p>
<label>
Mendelssohn: <input name="form_number" id="form_number" type="number"
min="1" max="4">
</label>
</p>
</fieldset>
|
第四个 <fieldset> 标记
第四个
<fieldset> 标记包含
<input> 类型
file 和属性
multiple，如图 7 所示。
multiple 属性指定，一个输入字段可以从一个数据列表或文件列表中选择多个值。在本例中，用户可以选择多个文件进行上传。
图 7. Upload 字段
file 类型代码和
multiple 属性如清单 7 所示。
清单 7. Upload 字段
双击代码全选
|
1
2
3
4
5
6
7
8
|
<fieldset>
<legend> Upload file(s) </legend>
<p>Upload one of your orchestra's file(s) for inclusion in our library</p>
<p><label>
<input type="file" multiple="multiple" />
</label>
</p>
</fieldset>
|
Submit 按钮使用
height 和
width 属性，如清单 8 所示。使用这些属性设置
image 输入类型的高度和宽度。在设置这些属性时，页面中供图像使用的空间面积是固定的，受到预设的宽度和高度尺寸限制，这通过提高页面渲染效果，有助于页面加载。
清单 8. Submit 按钮
双击代码全选
|
1
2
|
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>
|
JavaScript 和 CSS3
没有 CSS3 就无法完成 HTML5 的重现。虽然 HTML5 已取消某些 JavaScript 编码的需要，但 JavaScript 仍然是一个有价值的工具。以下是用于创建示例表单的 JavaScript 代码和 CSS3 文件。
JavaScript 代码是一个简单的警告框，它返回三个必填字段，如清单 9 所示。虽然这里使用的 JavaScript 代码只有一行，但它被放置在一个单独的 JavaScript 文件中，遵循供其使用的最佳实践。
清单 9. 示例表单 JavaScript 代码
双击代码全选
|
1
2
3
4
5
|
function alertValues()
{
alert("Customer information: " + "n " + fullname.value + "n "
+ tel.value + "n " + email.value);
}
|
清单 10 显示了格式化示例表单的 CSS3 代码。此处不包括
<header> 和
<footer> 信息。
(责任编辑：12图资源库)
