网页开发入门｜18 表单

在上节课，我们了解了使用<input>输入框，让用户可以在网页进行输入，并在代码中获取用户输入的内容。

不过可以输入任意字符的输入框也带来了很多问题，比如上节课中在计算平均值时，产生的数据类型问题，导致无法得到正确的计算结果。

相信你一定在某些网页上见过只能输入数字的输入框，或其它特定类型的输入框，比如日期、时间等等。

形式也不只是敲入文字，也可能是下拉菜单、复选框等等。

这些形式丰富的输入方式，通常会成组出现，要求用户一次性的填写多个输入，并提供一个完成或提交按钮，表示用户完成了所有的输入。

因此这样的一组输入就称为表单Form，这些相关的输入元素也称为表单组件。

输入类型

想要实现其它类型的输入框，在不久以前是非常麻烦的事情，需要工程师自己编写大量代码去实现，不过HTML5的出现，把多种常用的输入框类型纳入了标准，让事情变得非常简单。

HTML5在<input>标签中拓展了type属性，直接支持了丰富的组件类型。

比如我们需要一个日期组件，设置type属性为date即可：

<label>Select Date:</label>
<input type="date">

类似的，时间组件：

<label>Select time:</label>
<input type="time">

颜色组件：

<label>Select color:</label>
<input type="color">

文件选择组件，通常用于让用户上传文件：

<label>Select file:</label>
<input type="file">

数值输入，只允许输入数字：

<label>Input number:</label>
<input type="number">

密码输入，输入的内容将以密文样式显示，通常是·或者*：

<label>Input password:</label>
<input type="password">

选项输入

如果希望用户可以从我们给到的选项中选择其中一个或多个，这样就需要在页面中提供预设的选项。

下拉菜单（自动补全）

最直接的方法是使用下拉菜单（自动补全）。

使用<input>标签的list属性，配合<datalist>及其子标签<option>使用。注意，list属性的值要与<datalist>的id一致，以说明该输入框对应的列表是哪个。

<label>Select an option:</label>
<input list="options">
<datalist id="options">
    <option>Alice</option>
    <option>Bob</option>
    <option>Cindy</option>
    <option>David</option>
</datalist>

单选框

单选框也可以实现选项的效果，而且这样用户就不能自由输入内容了，以确保内容与选项严格相同。

由于单选框是HTML早期标准中定义的，代码看起来会和上面提到的其它输入框略所不同。

每一个选项都需要使用一个<input>来定义，并且将type设定为radio。一组选项之间要共享同一个name，以确保浏览器知道那几个选项是相关的，同时只能选中其中的一个。选中后的值，来自于value属性，而不是页面中<label>元素显示内容。

<input type="radio" name="radio" value="Alice"> 
<label>Alice</label>
<input type="radio" name="radio" value="Bob"> 
<label>Bob</label>
<input type="radio" name="radio" value="Cindy"> 
<label>Cindy</label>
<input type="radio" name="radio" value="David"> 
<label>David</label>

多选框

多选框允许用户一次选中多个选项，语法与单选框基本相同，只不过type需要换成checkbox。

<input type="checkbox" name="checkbox" value="Alice"> 
<label>Alice</label>
<input type="checkbox" name="checkbox" value="Bob"> 
<label>Bob</label>
<input type="checkbox" name="checkbox" value="Cindy"> 
<label>Cindy</label>
<input type="checkbox" name="checkbox" value="David"> 
<label>David</label>

提交表单

和上节课所提到的方法一样，任何一个表单组件都可以通过对应的DOM对象，在js代码中获取用户的输入。

但相比一个组件一个组件处理，更加方便的是将表单作为一个整体，一次性提交。

首先，需要使用<form>将所有需要一次性提交组件包裹在一起：

<form>
    <label>Select Date:</label>
    <input type="date">
    <!-- 这里省略若干代码 -->
</form>

其次，要给每一个<input>命名，即添加name属性，有时也称作表单的字段，以保证收到表单的“人”可以知道每个输入来自于哪个输入框。

<form>
    <label for="date">Select Date:</label>
    <input type="date" name="date">
    <!-- 这里省略若干代码 -->
</form>

值得一提的是，也可以使用id属性实现相同的效果，不过name的语义在此处更加明确。

然后，需要在表单中增加一个提交按钮，是一个type为submit的特殊输入框，这个输入框的value将显示在按钮上。

<form>
    <label for="date">Select Date:</label>
    <input type="date" name="date">
    <!-- 这里省略若干代码 -->
    <input type="submit" value="submit">
</form>

最后，为了获取用户的输入，还需在<form>标签中添加action属性，以通知浏览器将表单数据提交到哪个地址。

<form action="form-accepter.html">
    <label for="date">Select Date:</label>
    <input type="date" name="date">
    <!-- 这里省略若干代码 -->
    <input type="submit" value="submit">
</form>

默认情况下，表单中的数据将以URL参数的形式进行传递。服务器在收到这个URL请求时，会对数据进行一些处理，比如进行存储，然后再将处理结果以新的页面显示给用户。

具体如何在服务器端处理表单数据，涉及较多的后端知识，此处不再展开。

表单的应用

有了这些类型丰富的表单组件，你组建几乎任何类型的表单了，而表单可以说是网页中最重要的功能。

小到只有一个输入的搜索框：

用户注册时要提交的各种基本信息：

甚至我们在电商、外卖平台下的每一个订单其实都是在提交表单：

我将本课程所有的代码托管在gitee上了，你可以点击这个链接，或到gitee.com上搜索弦五 网页开发入门，查看和获取本课程的全部代码。