Перейти до вмісту

Форми

Елементи й атрибути, що відносяться до форм.

We're highlighting up-and-coming features or libraries we think you should know about.

Feature Highlight: Customizable Select

Customizable Select may not currently be widely supported, yet it's a feature worth knowing about. While only used by 7.1% of respondents, 89% of developers who have used it report a positive experience.

And given that the <select/> element has always been a challenge to style, being able to finally customize it to your needs without resorting to JavaScript-based hacks is a welcome improvement!

База сумісності: Обмежено доступно

Дізнатися більше

Досвід використання і ставлення до форм

Surprisingly, <input type="color"/> was the most used form-related feature this year, with 41.8% of respondents reporting having used it.

But when looking at positive sentiment, basic UI building blocks like autocomplete (<datalist>) and dropdowns (Customizable Select) top the rankings, showing that developers value features that are customizable and can be tailored to their needs.

Групувати за:

Сортувати за:

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

Досвід

  • Використовував(-ла): Респонденти, які це використовували.
  • Чув(-ла) про це: Респонденти, які чули про це, але не використовували.
  • Вперше чую: Респонденти, які не чули про це.

Ставлення

  • Позитивно: Респонденти, які зацікавлені у вивченні технології або хочуть використовувати її ще.
  • Нейтрально: Респонденти, які не висловили жодного ставлення до технології.
  • Негативно: Респонденти, які не зацікавлені у вивченні технології або використовували її і мали негативний досвід.

Проблеми форм

Styling & customization of default form control UI elements remains a big stumbling block, with nearly half of pain points being about it.

Form validation is also a problem, especially when it comes to more advanced use cases like validating one field's value based on another.

Які проблеми HTML-форм найбільше вас розчаровують?
Множинний вибір
Top pain point topics overall.

View:

Items that are not one of “limitations
0%
20%
40%
60%
80%
100%
1
Styling & customization
2
2
Form Validation
3
3
<select>
3
4
Browser support
3
5
Pickers
3
6
Accessibility
1
7
<input>
1
8
Form Submission
1
9
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%
% від тих, хто відповів на питання

Рекомендовані джерела

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.
Спонсорований вміст від наших партнерів. Детальніше.