本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

本文主要内容：通过开发一个ONE PIECE相关问答的表单来掌握HTML form的相关知识

项目需求分析

因为这个项目是自主开发，所以没有我们想要开发的项目的预览，所以此处仅罗列需求

你应该有一个 id 为 title 的 h1 元素

你应该有一个 id 为 description 的 p 元素

你应该有一个 id 为 survey-form 的 form 元素

在表单元素内，你需要在 input 字段中输入你的名字，该字段的 id 为 name，type 为 text

在表单元素内，你需要在 input 字段中输入你的邮箱，该字段的 id 为 email

如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息

在表单中，你可以在 input 字段中输入一个数字，该字段的 id 为 age

如果你在数字输入框内输入非数字内容，你会看到 HTML5 验证错误信息

如果你输入的数字超出了范围（使用 min 和 max 属性定义），你将会看见 HTML5 验证错误信息

在表单中的名字、邮箱和数字输入框中，你能看到各自的描述文字作为占位符

在表单元素内，你应该有一个 select 下拉元素， id 为 q2，它至少有两个选项

在表单元素内，你可以从至少两个单选按钮的组中选择一个选项，该选项使用 name 属性

在表单元素内，你可以从一系列复选框中选择几个字段，每个复选框都必须具有 value 属性

在表单元素内，你会有一个 textarea 以获取额外的评论

在表单元素内，你将收到一个按钮，其 id 为 submit，提交所有输入

可以看到需求基本罗列覆盖了所有form表单的类型用法

那么对其展开分析，我计划将整个表单分为三部分，第一部分用于收集个人信息，第二部分用于判断是否是真海米，第三部分用于获取用户的回答与建议，所以可得到如下大体框架：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>ONEPIECE Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>ONEPIECE Form</h1>
    <form action='https://google.com'>
        <fieldset>
        </fieldset>
        <fieldset>
        </fieldset>
        <fieldset>
        </fieldset>
    </form>
  </body>
</html>

fieldset 元素用于在 Web 表单中将相关的输入和标签组合在一起

预览情况如下至于具体如何安排，可看下文

收集个人信息

可以看到需求中，主要需要的输入框为名字、邮箱、数字输入框

所以首先在第一个fieldset中添加三个label和input，如下

<label for="name">Enter Your Name: <input id="name" name="name" type="text" /></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" /></label>
<label for="age">Enter Your Age: <input id="age" name="age" type="number" /></label>

在上面的代码中看到，for和id对应,可以将input元素的文本与元素本身相关联

然而实际上嵌套的结构已经是隐式的联系，for则进一步添加了显式的联系

其中还值得讨论的是input的type属性，此处有三种类型，其他类型在下文中会有提到：

text: 默认值。单行的文本区域，输入中的换行会被自动去除。
email: 编辑邮箱地址的区域。类似 text 输入，但是如果你输入了格式不正确的邮箱，你将会看见 HTML5 验证错误信息。
number: 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。

所以再在css中为input设置样式width: 100%，可以得到如下预览：

而除了基础的设置外，还有两个常用的输入框中需要的设置: placeholder和required，所以可以进行如下的补充

<label for="name">Enter Your Name: <input id="name" name="name" type="text" placeholder="Enter Your Name:" required/></label>
<label for="email">Enter Your Email: <input id="email" name="email" type="email" placeholder="Enter Your Email:" required/></label>
<label for="age">Enter Your Age: <input id="age" name="age" type="number" placeholder="Enter Your Age:"/></label>

调整form的width和margin样式，得到如下预览

其中name和email添加required属性，说明这两个输入框是必填的，而age则无需

验证海米身份

虽然海米有着大量包括阿金、桃之助必须死等验证身份的梗，但是本篇的目的主要是为了学习HTML中的form相关知识，所以将会设置几个不是很有智力的题

第一个是单选题：

<p>Do you like ONEPIECE?</p>
<label for="yes"><input id="yes" type="radio" name="q1"/>YES!</label>
<label for="oyes"><input id="oyes" type="radio" name="q1"/>OBVIOUSLY YES!</label>

设置type为radio，同时将两个name设置为一样的，保证选中一个则另一个不被选中

第二个是下拉菜单单选

<label for="q2">How did you think of ONEPIECE?
    <select id="q2" name="q2">
      <option value="">(select one)</option>
      <option value="1">GREAT!</option>
      <option value="2">WONDERFUL!</option>
      <option value="3">BRILLIANT!</option>
    </select>
</label>

不再使用input，使用select，其中设置若干个option用于表示选项

第三个是确认选项（同样也可使用这个设置多选）

<label for="confirm"><input id="confirm" type="checkbox" name="q3"/>I like ONEPIECE!</label>

设置type为confirm

于是在重新设置覆盖两个input的width后，可以获得如下效果

获取用户建议

需要使用的是textarea这一标签，所以可以得到如下代码：

<label for="advice">Give some advices:
    <textarea id="advice" name="advice"></textarea>
</label>

在textarea中可以设置rows和cols来调整初始的行数、列数，也可以直接在CSS文件中设置

最后还需要一个submit的按钮，可以按照如下设置

<input type="submit" value="Submit" />

所以最后再进行一些美化，可以获得最终效果：

小结

输入框包含的type有：text(默认) email number radio checkbox submit password等，根据具体情况进行选用
label的for能够和input的id产生显式的联系
required设置必填(必选)
form的action属性设置了表单数据发往的地方
fieldset元素用于在 Web 表单中将相关的输入和标签组合在一起
下拉式单选select
文本输入区域textarea可以设置rows和cols调整大小

原项目链接：chinese.freecodecamp.org/learn/2022/…

我的github链接：github.com/newfish-cmy…

【HTML】ONE PIECE调查表单开发|HTML form全总结

前言

项目需求分析

收集个人信息

验证海米身份

获取用户建议

小结