表单控件元素

星光不问赶路人
250 阅读5分钟

数据

基于数据驱动的表单交互vs基于元素行为的表单交互

基于数据驱动的表单交互更容易上手，也使得这种处理方式目前成为主流。但是，基于行为驱动的表单交互对用户更加友好，尤其是在机器识别和无障碍访问方面非常出色

我们需要去了解表单体系的各种行为，但并不意味着我们要舍弃数据驱动的开发，而是要想办法将表单行为和数据驱动结合，让当下的技术更加成熟与强大。

用户体验、语义

提交

按回车键触发表单提交的内置行为需要有一个前置条件: 表单元素内（多个input元素时）需要有提交按钮，注意，是提交按钮。

在现代浏览器下，未设置type属性的<button>元素会被认为是提交按钮

如果要从诸多元素中找一个和<a>元素的行为最相似的常见HTML元素，那一定是<form>元素了， 因为两者都能触发页面的跳转，也都支持使用target属性设置是否打开新窗口，甚至都支持使用rel属性设置与链接相关的安全策略。

提交事件

目前Web开发中的POST请求一定都是走fetch或者XMLHttpRequest这种无刷新的开发方式

只要是涉及输入类型的数据交互的，不要犹豫，一定使用<form>元素和submit事件。

在实际开发中，涉及表单的往往是POST请求，此时可以通过给<form>元素绑定submit事件并阻止默认的行为来模拟Ajax请求功能

new FormData(form, submitter), An HTML <form> element

multipart/form-data 可以同时处理文本数据和文件数据，使得在一个请求中可以上传多个文件以及其他表单数据。

Content-Type

  1. “multipart/form-data”： 适用于需要上传文件的场景，如文件上传、图片上传、文档上传等。 也可以同时传输文本数据和文件数据，方便用户在上传文件的同时提供相关的描述信息。
  2. “application/x-www-form-urlencoded”： 适用于简单的表单提交，如登录、注册、搜索等场景。 数据量较小，不需要上传文件的情况下使用较为方便。
  3. “application/json”： 适用于前后端分离的应用，以及需要传输复杂结构化数据的场景。 在现代的 RESTful API 中广泛使用，方便与不同的客户端（如移动应用、桌面应用等）进行数据交互。

URLSearchParams使用

new URLSearchParams(new FormData(form))

// Pass in a string literal
const params2 = new URLSearchParams("foo=1&bar=2");
const params2a = new URLSearchParams("?foo=1&bar=2");

// Pass in a sequence of pairs
const params3 = new URLSearchParams([
  ["foo", "1"],
  ["bar", "2"],
]);

// Pass in a record
const params4 = new URLSearchParams({ foo: "1", bar: "2" });

表单提交原生api： form.submit() vs form.requestSubmit() vs form.dispatchEvent(new Event('submit'))

submitter属性

formdata事件, 可实现在表单提交之前插入自定义数据

reset事件 reset重置虽然改变了输入框的值，但是并不能触发输入框的change事件。

让reset事件和change事件相关联。实现的原理: 在reset事件被触发的一瞬间，输入框的值还是旧值，因此，只需要在下一个渲染周期判断输入框的值是否发生了变化，来决定是否触发输入框元素的change事件。

<form>元素并没有disabled属性禁用整个表单，需要借助于<fieldset>元素

button按钮

要使用具有点击行为的元素，哪怕是只有小图标效果的按钮，也建议使用<button>元素，因为它支持无障碍访问，同时行为与样式都控制方便

  1. popovertarget属性
  2. form属性
  3. formaction属性
  4. formmethod属性
  5. formnovalidate属性
  6. formtarget属性

其他

showPicker()方法, 用于显示日期选择器、颜色选择器、select元素等

<textarea>元素无法根据内容的多少进行高度自适应, 一种css解决方案：

/* <p class="read-write-plaintext-only" data-placeholder="请输入"></p> */

.read-write-plaintext-only {
  width: 200px;
  min-height: 20px;
  font-size: 14px;
  border: 1px solid #999;
  padding: 5px; /* 不加看不到光标 */
  word-break: break-all; /* 设置断行行为 */
  -webkit-user-modify: read-write-plaintext-only;
}

/* 模拟placeholder */
.read-write-plaintext-only::before {
  display: none;
  content: attr(data-placeholder);
  color: #ccc;
}

.read-write-plaintext-only:empty::before {
  display: block;
}

技术的流行往往取决于一些不起眼的点，而表单控件元素中的单选按钮、复选框，就因为增强的样式自定义能力，已经成为所有控件元素中交互能力最强的存在。

[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  all: initial;
}

inset 为简写属性，对应于 top、right、bottom 和 left 属性

webkitdirectory file文件夹上传

showOpenFilePicker 文件选择器API

<datalist>元素是给<input>元素提供便捷输入选项的，从功能上而言，非常实用，可以大大地增强用户体验

<input list="aaa">
<datalist id="aaa"></datalist>

元素有一个巨大的缺陷导致其在业界并不怎么为人所知，那就是自动填充的列表样式是无法自定义的，只能跟着系统样式走， 而正式的对外产品，尤其是面向客户的产品，显然是无法容忍这样粗糙的样式效果的。

参考

  1. HTML并不简单
avatar
文章
阅读
粉丝