アクセシブルで、美しいフォームを実装するためのチュートリアル集
アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。
Beautiful Forms - Design, Style, & make it work with PHP & Ajax
1. Designing & Planning out your Form
使いやすいフォームを制作するためのデザインや設計。
Fancy Form Design Using CSS
アクセシブルなフォームを実装するスタイルシートのチュートリアル。
Web Application Form Design
良いフォームにするためのガイドライン。
Web Form Design Patterns: Sign-Up Forms
サインアップフォームのデザインパターン、上図はタイトルの文言の分析。
Sensible Forms: A Form Usability Checklist
フォームのユーザビリティのチェックリスト。
2. Styling Beautiful Forms
フォームを美しくスタイリング。
How to create perfect form markup and style it with CSS
Justify elements using jQuery and CSS
FORM elements design using CSS and list (ul and dl)
XHTML/CSS web forms: 5 simple techniques
3. Spicing up your Form
フォームにスパイスを。
Changing Form Input Styles on Focus with jQuery
フォーカス時にスタイルを変更。
Form field hints with CSS and JavaScript
ヒントを表示。
Building a better web forms: Context highlighting using jQuery
フォーカス時にハイライト。
Improve form usability with auto messages
メッセージを表示。
Styling File Inputs with CSS and the DOM
fileタイプをスタイリング。
Show/hide a nice Login Panel using Mootools 1.2
スライド表示のログインパネル。
FancyForm
チェックボックス・ラジオボタンをかわいく。
元エントリーでは他にも、入力内容のチェックやAJAXを使用したフォームが紹介されています。
Post on:2009年3月11日
