Everything You Need to Know About HTML Form

简单明确的了解 HTML 表单使用方式

@ HTML

前言

在网页中时常会需要接收用户端所提供的信息，举例来说像是登录时需要输入「信箱与密码」、预约旅馆时需要输入「时段与房间种类」或是报名比赛需要输入「作品档案」……等不同形态的数据，这些输入选项的功能与界面都可以轻易的透过原生 HTML 标签来完成，只要想要在网页中提交资料，都是使用 HTML 表单的好时机。

从 <form> 开始

在早期 AJAX🔗 尚未盛行时，网页会通过表单来向服务器提交数据，默认会使用 HTTP GET 的方法，也可以自定义通过注明 method 属性来达成：

<form method="POST">
  <!-- ... -->
</form>

举例来说如果该表单在 https://webdong.dev/contact 那么当提交事件触发时就会对该 URL 发送一个 POST 请求，当然后端也会需要对应的设置来聆听这些请求去接收表单所提交的数据。

<form action="/new-contact" method="POST">
  <!-- ... -->
</form>

也可以额外指定目标的 URL 使用 action 属性，这样就会对 /new-contact 这个相对地址发送 POST 请求，也就是 https://webdong.dev/new-contact。

实际上现在已经很少会使用表单向服务器沟通了，只是描述一些历史用法，也是铺陈说明为什么很多教学都说要阻挡所谓「默认事件」的「默认事件」，在 JavaScript 还很初始浑沌的时代，表单原先设计就是这样使用的。

当今通常会使用 preventDefault🔗 方法来避免浏览器默认事件发生（向服务器发送请求，并重整页面），并通过 JavaScript 来取得表单的内容：

// 选取目前 DOM 中的表单
const form = document.querySelector('form');
// 如果表单被提交，就执行函数
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 避免浏览器默认事件发生
  const formData = new FormData(form); // 取得表单内容
});

虽然语法上不使用 <form> 并没有任何问题，但还是建议在撰写表单控制组件 (Form Control)之前使用它，原因是因为：

  1. 组织资料 - <form> 可以将一组相关的表单控制组织在一起，以便用户能够提交资料。例如，当要求用户填写姓名、电子邮件地址和信息时，这些表单元素通常会放在同一个 <form> 标签中，以便把资料一齐提交。
  2. 语意清晰 - 明确标明哪些内容是用于表单，而不是普通的文字或其他元素。这有助于维持代码的结构性与可读性，让开发者和维护者更容易理解和处理。
  3. 表单控制 - 可以使用表单预设提供的方法，例如提交🔗、重置🔗或验证🔗，实践常见的表单功能。

举例来说以下代码就是一个简单输入姓名的表单，可以通过提交按钮触发提交事件或是重置事件：

<form>
  <label for="name">姓名</label>
  <input id="name" type="text" placeholder="请输入姓名" />
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

表单控制组件

具体来说常用的有以下几种表单控制组件，看起来很多但实际上它们使用方式是差不多的，本文挑选一些最常见的解释：

  • input - 单行文字
  • textarea - 多行文字
  • select boxes - 从下拉式选单中选取单一选项
  • radio buttons - 从多个选项中选取单一选项
  • checkboxes - 从多个选项中选取无、一或多个选项
  • file uploads - 上传文件
  • 更多……

<label>

<label> 用于描述表单控制组件，可以透过 for 属性与 id 属性同名的控制组件明确建立关系也可以透过包裹的方式隐晦的建立关系，都是正确的方法：

<label for="name">姓名</label> <input id="name" type="text" placeholder="请输入姓名" />
<label>
  姓名
  <input type="text" placeholder="请输入姓名" />
</label>

要留意 <label> 的存在是为了辅助说明表单控制组件，应尽量为每个表单控制组件都添加；时常会出现为了美观因素而省略容易造成用户无法理解该栏位的用途的错误，可以透过：隐藏标签🔗、使用 aria-label🔗、使用 aria-labelledby🔗或使用 title 属性🔗视情况来为没有 <label> 的表单控制选项添加描述。

<input>

<input type="text" />

<input> 在表单中最基本也是最常使用的元素，可以用于接收各种不同形态的数据，例如文字、数字、日期、时间、电子邮件、密码、文件……等，<input> 具备多种属性🔗，最常用的有 required🔗、type🔗、placeholder🔗、value🔗与name🔗、disabled🔗……等属性。

A. 举例来说可以为输入框添加文字提示，使用 placeholder 属性：

<input type="text" placeholder="input 标签示例……" />

B. 或是让输入框预先填入默认值，使用 value 属性：

<input type="text" value="我是默认文字" />

C. 或是限定必须要填写才能提交，使用 required 属性：

<input type="text" required />

D. 或是使用 disabled 来禁用其功能：

<input type="text" disabled />

也可以使用 type 的属性来限制输入的数据类型，例如 type="email" 就会限制输入的数据必须符合电子邮件格式，type="number" 就会限制输入的数据必须是数字，type="password" 就会将输入的数据隐藏并且无法复制与剪下，type="file" 就会让用户可以选择文件上传，依照想要获得的数据种类都可以注明 type 属性来达成。

请选择一种颜色：

<textarea>

<textarea> 用于接收多行文字，可以透过 rows 与 cols 属性来设置默认的行数与列数，也可以透过 placeholder 与 value 属性来设置默认文字与默认值。

参考资料