Μετάβαση στο περιεχόμενο

Forms

Form-related elements and attributes

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!

Baseline: Περιορισμένη διαθεσιμότητα

Μάθετε περισσότερα

Forms Experience & Sentiment

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.

Group by:

Sort by:

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

Εμπειρία

  • Το έχω χρησιμοποιήσει: Respondents who have used an item.
  • Το έχω ακουστά: Respondents who have heard about an item, but haven't used it.
  • Δεν το έχω ακουστά: Respondents who have never heard about an item.

Γνώμη

  • Θετική: Συμμετέχοντες οι οποίοι ενδιαφέρονται να μάθουν περισσότερα για μία τεχνολογία, ή θα ήθελαν να την ξαναχρησιμοποιήσουν.
  • Ουδέτερη: Συμμετέχοντες οι οποίοι δεν έδειξαν κάποιο συναίσθημα για μία τεχνολογία.
  • Αρνητική: Συμμετέχοντες οι οποίοι δεν ενδιαφέρονται να μάθουν περισσότερα για μία τεχνολογία, ή την έχουν χρησιμοποιήσει και είχαν αρνητική εμπειρία.

Forms Pain Points

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.

What are your pain points around HTML forms?
Multiple
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
Other Answers
0%
20%
40%
60%
80%
100%
% of question respondents

Recommended Resources

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.
Thanks to our partners for supporting us! Learn more.