Gå til innhold

Forms

Form-related elements and attributes

We're highlighting interesting features or libraries we think you should know about.

Feature Highlight: Customizable Select

Tilpassbar Select er kanskje ikke bred støttet ennå, men det er en funksjon som er verdt å vite om. Selv om bare 7,1% av respondentene har brukt det, rapporterer 89% av utviklere som har brukt det en positiv erfaring.

Og gitt at elementet <select/> alltid har vært en utfordring å style, og nå å kunne tilpasse det til dine behov uten å ty til JavaScript-hack er en velkommen forbedring!

Baseline: Limited Availability

Learn more

Skjemaer Erfaring & Følelser

Overraskende nok var <input type="color"/> den mest brukte skjemarelaterte funksjonen i år, med 41,8% av respondentene som rapporterer å ha brukt det.

Men når man ser på positiv meninger, topper grunnleggende UI-byggeblokker som autofullføring (<datalist>) og rullegardinmeny (Tilpassbar Select) rangeringen, noe som viser at utviklere verdsetter funksjoner som er tilpassbare og kan skreddersy til deres behov.

Gruppér etter:

Sorter etter:

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

Erfaring

  • Brukt det: Respondents who have used an item.
  • Hørt om det: Respondents who have heard about an item, but haven't used it.
  • Aldri hørt om det: Respondents who have never heard about an item.

Oppfatning

  • Positiv: Respondenter som er interessert i å lære mer om en teknologi; eller er villige til å bruke den igjen.
  • Nøytral: Respondenter som hadde en nøytral oppfatning av en teknologi.
  • Negativ: Respondenter som ikke er interessert i å lære mer om en teknologi; eller har brukt den og hatt en negativ opplevelse.

Forms Pain Points

Styling og tilpasning av standard skjemakontroller fortsatt et stort stolpeskudd, med nær halvparten av smertepunktene handler om det.

Skjemavalidering er også et problem, spesielt når det kommer til mer avansert bruk som å validere en felts verdi basert på et annet.

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%
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
Andre svar
0%
20%
40%
60%
80%
100%
% besvarelser på spørsmål

Anbefalte ressurser

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.
Takk til våre partnere for deres bidrag! Lær mer.