輕鬆打造漂亮表單：從Element到Style的實用技巧
tags: FrontEnd notes
目錄
最近我參加了2023年的WebConf，一個匯聚了無數Web開發者的技術研討會，其中一個議程讓我印象深刻，因為講者使用了一些基本的元素(Element)和樣式(Style)，讓我能打造一個優質使用者體驗的「好」表單，內容很實用，操作起來也很簡單，所以我將這個議程精華整理成文章，希望對大家有所幫助。
Agenda
- Pick suitable elements
- Style your form
- Amazing supports
- Wonderful partners
Pick suitable elements
- The input element
- 原生Form Element優點
- Use case 1.
- Use case 2.
The input element
- datetime-local:
- date+time可點擊icon選取
- color:
- 有滴管按鈕可以攝取顏色
- number:
- 可操作鍵盤上下鍵增減
- range:
- 可操作鍵盤左右鍵增減
- search:
- 輸入搜尋內容後出現btn點擊可清空
- email:
- email格式驗證，存history
- url:
- URL格式驗證
原生Form Element優點
- 很多都有基本的驗證，避免拿到錯誤的資料
- 自帶 widgets，不需額外開發
- 原生支援
- 延續使用者體驗
Use case 1.
Take <input /> UI / UX and methods to indicate various adjustments.
Use case 2.
With <input[type=range]> supported, Developers could save 「drag、drop」 event usage and don't need to detect current device.
Style your form
- CSS > accent-color
- Customize input element
- Customize select element
- Customize checkbox element
- Customize radio buttons element
- Avoid misunderstanding
CSS > accent-color
The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
Customize input element
With modern CSS supports, web developers could style <input /> easily ever.
Customize select element
With modern CSS supports, web developers could style<select /> easily ever.
Customize checkbox element
With modern CSS supports, web developers could style input[type=checkbox] easily ever.
Customize radio buttons element
With modern CSS supports, web developers could style input[type=radio] easily ever.
Avoid misunderstanding
Sometimes you might face some embarrassed situations. Such as 「radiobox」 or 「checkbutton」.
Amazing Supports
- Input & Web API
- Validation
- Usability
Input & Web API
Some <input /> exposed some interesting web api for developers for vivid usage.
Validation
Form Element 有許多有趣的屬性，開發人員可以將它們應用在驗證上，使驗證更加簡單快速。
Usability
驗證之後，開發人員應該思考如何增強可用性，現在越來越多的Web API有支援這點。例如自動大寫、自動修正、自動完成、輸入模式和Enter鍵提示。
Wonderful partners
- CSS > Logical Properties
- CSS > :has()
- input ?! select ?!
- details
- dialog
- form & inert
CSS > Logical Properties
With modern CSS supports, web developers could style <input /> easily ever.
CSS > :has()
:has() is so powerful for condition syntax, it could replace some JavaScript supports.
input ?! select ?!
<input /> could associate <datalist /> through attribute list to let input has dropdown menu just like could associate <select />.
details
< details /> provide toggle feature to disaply or hide information. It's suitable for tip or extra information.
dialog
The <dialog /> HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
form & inert
It's time to apply 「inert」to freeze or unfreeze
<form />.
Recap
- Pick suitable elements
- Style your form
- Use element & Web API wisely
- Amazing Web Components