没事造轮子没事造轮子

没事造轮子

HTML 表单

  • W_Z_C
  • 阅读约 3 分钟
HTML 表单

HTML 表单常用于收集不同类型的用户输入信息，包括姓名、电子邮件、电话号码等详细信息，我博客上的评论框就是典型的表单应用。

常用的表单包括很多熟悉的控件，例如输入框、复选框、单选按钮、提交按钮等等，这些元素通常以交互为目的，可以搜集用户提交的信息到服务器，服务器可以根据这些信息做出相应的反馈。

HTML 中使用 <form> 标签来创建表单：

<form>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
    <input type="submit" value="Submit">
</form>

不同类型的控件全部放在 form 元素的内部，下面简单的介绍一下常用的控件。

文本输入控件

常用的文本输入控件主要是方便用户提交一些文本信息，对于不同的内容，有几种样式可选。一种是不同文本，可以使用 input 元素：

<form>
    <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>

label 元素是表单中比较常见的节点，主要用作交互提示。下面是最终的效果：

文本输入控件

上面这种输入框可以输入普通的单行文本，如果想输入保护的信息，例如密码之类的文本可以更改 type 属性：

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>

控件的显示效果和上面一致，但是输入的信息会被原点所代替：

文本输入控件

除此之外，你还可以能需要输入一些多行的文本数据，这种需要使用 textarea 元素：

<form>
    <label for="address">Address:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
文本输入控件

单选按钮

单选按钮可以让用户在一组预设的信息中选择一个选项，类似考试中的单选题，使用方法和文本输入框类似，只不过 type 属性有所改变：

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>
HTML 单选按钮

复选框

既然有单选，那肯定存在多选，同样的只需要将 type 修改为 checkbox：

<form>
    <input type="checkbox" name="sports" id="soccer">
    <label for="soccer">Soccer</label>
    <input type="checkbox" name="sports" id="cricket">
    <label for="cricket">Cricket</label>
    <input type="checkbox" name="sports" id="baseball">
    <label for="baseball">Baseball</label>
</form>
HTML 复选框

下拉列表

下拉列表在网页中非常常用，特别是地址区域选择之类的地方。下拉列表使用的是 select 和 option 元素，select 用来声明下拉列表的范围，option 用来声明下拉列表的选项：

<form>
    <label for="city">City:</label>
    <select name="city" id="city">
        <option value="sydney">Sydney</option>
        <option value="melbourne">Melbourne</option>
        <option value="cromwell">Cromwell</option>
    </select>
</form>
HTML 下拉列表

文件选择框

文件选择框允许用户上传本地文件，使用的时候只需要将 input 元素的 type 属性改为 file 即可：

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>
HTML 文件选择框

提交和重置

默认情况下要想将表单的内容提交到服务器，需要使用提交按钮，点击提交按钮后会触发 HTTP 请求，该请求使用 form 元素的 action 属性提供地址，method 属性提供请求方法，form 元素内部的所有表单字段会自动将自身的值汇总到一起，发送到服务端，一般情况下表单字段的 name 是提交的键，而 name 对应的值则是由表单自动获取的：

<form action="action.php" method="post">
    <label for="first-name">First Name:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

上面代码的显示效果如下：

HTML 表单提交和重置

代码中的 submit 和 reset 两种类型是表单的特殊按钮，点击 submit 会触发提交动作，而 reset 会触发表单的重置动作。如果点击 Submit 按钮，表单就会向 action.php 地址发送一个 POST 请求，请求内部会包含 first-name 字段：

HTML 表单提交和重置

上图是在浏览器的调试界面中截取的图片，因为是本地测试环境，所以请求地址 Request URL 显得很怪异，FormData 就是请求发送的数据。

表单的类型其实远不止这些，例如 HTML5 新引入的 color 类型就可以让你选择想要的颜色：

HTML 颜色选择框

类似的还有 date、month、range、tel、time 等等，很有可能以后会更多，这里其实没有必要介绍下去了，毕竟本教程也仅仅是抛砖引玉而已，线上项目真的需要手写 HTML 的时候再去查也来得及，你说对吧？我相信大多数的时候，你都没有机会，毕竟现成的 UI 框架数都数不过来……