İçeriğe atla

Formlar

Form ile ilgili elementler ve özellikler.

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

Feature Highlight: Customizable Select

Customizable Select şu anda yaygın olarak desteklenmiyor olabilir, ancak yine de bilinmesi gereken bir özelliktir. Ankete katılanların yalnızca %7,1'i tarafından kullanılmasına rağmen, bu özelliği kullanmış olan geliştiricilerin %89'u olumlu bir deneyim yaşadığını bildirmiştir.

<select/> öğesinin stilini belirlemek her zaman zor olmuştur, bu nedenle JavaScript tabanlı hilelere başvurmadan ihtiyaçlarınıza göre özelleştirebilmek çok hoş bir gelişme!

Baseline: Limited Availability

Learn more

Forms Experience & Sentiment

Şaşırtıcı bir şekilde, <input type="color"/> bu yıl en çok kullanılan form ile ilgili özellik oldu ve ankete katılanların %41,8'i bunu kullandığını bildirdi.

Ancak olumlu duygulara bakıldığında, otomatik tamamlama (<datalist>) ve açılır menüler (Özelleştirilebilir Seçim) gibi temel UI yapı taşları sıralamanın en üstünde yer alıyor ve bu da geliştiricilerin özelleştirilebilir ve ihtiyaçlarına göre uyarlanabilen özelliklere değer verdiklerini gösteriyor.

Group by:

Sort by:

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

Deneyim

  • Daha önce kullandım: Respondents who have used an item.
  • Hakkında bilgim var: Respondents who have heard about an item, but haven't used it.
  • Daha önce hiç duymadım: Respondents who have never heard about an item.

Duygu

  • Pozitif: Bir teknoloji hakkında daha fazla bilgi edinmek isteyen veya bu teknolojiyi tekrar kullanmak isteyen katılımcılar.
  • Nötr: Bir teknoloji hakkında herhangi bir duygu belirtmeyen yanıtlayıcılar.
  • Negatif: Bir teknoloji hakkında daha fazla bilgi edinmekle ilgilenmeyen veya bu teknolojiyi kullanmış ve olumsuz bir deneyim yaşamış katılımcılar.

Form Sıkıntı Yaratan Noktalar

Varsayılan form kontrolü UI öğelerinin styling ve özelleştirilmesi, sorunların neredeyse yarısının bu konuyla ilgili olması nedeniyle büyük bir engel olmaya devam ediyor.

Form doğrulama da, özellikle bir alanın değerini başka bir alana göre doğrulamak gibi daha gelişmiş kullanım durumlarında sorun teşkil ediyor.

HTML formlarla ilgili sıkıntı yaratan noktalar nelerdir?
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
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.
Sponsored content from our partners. Learn more.