文章标签

表单

预填充日期输入

HTML 有一种特殊的日期输入类型，如下所示：<input type="date"/>。在支持的浏览器中（非常好），用户将获得用于选择日期的 UI。非常有用的功能，尤其是在它回退到可用的text…

Chris Coyier 于 2017 年 8 月 29 日

我一直在思考网站上的声音。

当我们谈论在网站上使用声音时，我们大多数人都会皱眉，并想起过去的日子，当时网站加载时会播放刺耳的背景音乐。

如今，这…

Ruth John 于 2017 年 8 月 25 日

CSS 中的caret-color 属性会更改输入、文本区域或任何可编辑元素（如）中的光标（插入符号）的颜色。

input,
textarea,
[contenteditable] {
  caret-color: red;
}

光标的颜色通常与…的color 相匹配。

Chris Coyier 于 2021 年 1 月 27 日

CSS 中的:focus-within 伪选择器有点不寻常，尽管名称很好，而且相当直观。如果某个元素包含任何具有:focus 的子元素，则会选择该元素。

form:focus-within {
  background: lightyellow;
}

其工作原理如下…

<!-- this form

…

Chris Coyier 于 2021 年 9 月 15 日

我们刚刚完成了 Chris Ferdinandi 关于现代表单验证的一系列精彩文章。它从这里开始。如今，浏览器内置了许多用于处理表单验证的工具，包括可以执行相当…操作的 HTML 属性。

Chris Coyier 于 2017 年 7 月 3 日

在本系列的前几篇文章中，我们学习了如何使用一些输入类型和验证属性来本地验证表单。

我们学习了如何使用约束验证 API 来增强本机浏览器验证…

Chris Ferdinandi 于 2021 年 7 月 23 日

在本系列的上一篇文章中，我们使用 Validity State API 构建了一个轻量级脚本（6kb，2.7kb 压缩后），以增强本机表单验证体验。它适用于所有现代浏览器，并为…提供了 IE 支持。

Chris Ferdinandi 于 2020 年 3 月 31 日

在我上一篇文章中，我向您展示了如何通过结合语义输入类型（例如，<input type="email"/>）和验证属性（如required 和pattern）来使用本机浏览器表单验证。

虽然非常简单且超级…

Chris Ferdinandi 于 2017 年 6 月 29 日

大多数 JavaScript 表单验证库都很大，并且通常需要其他库（如 jQuery）。例如，MailChimp 的嵌入式表单包含一个 140kb 的验证文件（压缩后）。它包括整个 jQuery 库、一个第三方表单验证插件和一些自定义 MailChimp…

Chris Ferdinandi 于 2017 年 6 月 29 日