跳到内容

State of HTML 2025

表单

表单相关元素和属性

我们重点介绍我们认为您应该了解的有趣特性或库。

特性亮点: Customizable Select

可定制的 Select 目前可能还没有得到广泛支持，但这是一个值得了解的功能。虽然只有 7.1% 的受访者使用过，但 89% 的使用过它的开发者报告了积极的体验。

鉴于 <select/> 元素一直很难设置样式，最终能够根据你的需要定制它而无需求助于基于 JavaScript 的黑客手段，这是一个可喜的改进！

基准: 有限可用

了解更多

有用资源

    表单体验与情绪

    令人惊讶的是，<input type="color"/> 是今年使用最多的表单相关功能，41.8% 的受访者报告使用过它。

    但当查看积极情绪时，基本 UI 构建块如自动完成（<datalist>）和下拉菜单（Customizable Select）位居榜首，这表明开发人员重视可定制和可根据需求调整的功能。

    通过...分组：

    根据此项排序:

    1
    表单
    41.8%
    40.4%
    16.8%
    6,048
    2
    表单
    29.1%
    37.8%
    29.7%
    6,129
    3
    表单
    9.7%
    25.3%
    63.6%
    6,080
    4
    表单
    8.6%
    24%
    67%
    5,992
    5
    表单
    7.1%
    42.3%
    49.8%
    6,037
    6
    表单
    <input type="color" alpha>
    3.1%
    17.8%
    78.7%
    5,994
    7
    表单
    <input type="color" colorspace="display-p3">
    19.9%
    77.3%
    6,012

    经验

    • <span aria-hidden="true">🤓</span> 用过: 使用过此项目的受访者。
    • <span aria-hidden="true">👀</span> 有听说过: 听说过此项目，但没有使用过此项目的受访者。
    • <span aria-hidden="true">🤷</span> 没听说过: 从未听说过此项目的受访者。

    情绪（态度）

    • 积极: 有兴趣了解此技术，或者愿意再次使用它的受访者
    • 中立: 未对此技术发表看法的受访者
    • 消极: 对此技术不感兴趣，或者使用此技术有糟糕体验的受访者
    “已使用”平均值:15%
    “积极”平均值:34%
    “消极”平均值:5%

    表单痛点

    默认表单控件 UI 元素的样式和定制仍然是一个巨大的绊脚石，近一半的痛点是关于它的。

    表单验证也是一个问题，尤其是在涉及更高级的用例时，例如基于另一个字段的值验证一个字段。

    您在使用 HTML 表单时遇到了哪些痛点？
    多选
    总体上最主要的痛点主题。

    视图:

    不为“limitations”之一的项目
    0%
    20%
    40%
    60%
    80%
    100%
    01
    Styling & customization
    2
    02
    Form Validation
    3
    03
    <select>
    3
    04
    Browser support
    3
    05
    Pickers
    3
    06
    Accessibility
    1
    07
    <input>
    1
    08
    Form Submission
    1
    09
    10
    Missing elements
    11
    Reliance on JavaScript
    +3
    12
    13
    Cognitive overload
    3
    14
    <textarea>
    1
    15
    Autocomplete
    -11
    16
    Editing APIs
    1
    17
    Forms & JS
    1
    18
    End-user experience
    19
    Combobox element
    20
    <input type="number">
    21
    Poor design
    22
    <button>
    -15
    23
    3
    24
    Internationalization
    25
    <input type="file">
    26
    其他答案
    0%
    20%
    40%
    60%
    80%
    100%
    受访者百分比
    2,041
    33%
    25
    5

    资源推荐

    CSS-only Form Validation Hints
    Kevin Powell

    CSS-only Form Validation Hints

    A look at how we can use CSS to add contextual hints to users as they fill out a form, including creating an SVG by hand and animating it based on whether a field is valid or invalid.
    感谢合作伙伴对我们的支持! 了解更多。