フォームのUI

カレンダー

jQuery UIにはフォームの入力のUIをサポートする機能もあります。まずは日付入力の機能です。

テキストボックスにフォーカスした時にカレンダーが表示され，カレンダーで選択した日付がフォームに入力されます。サンプルコードではオプションを設定することで日付のフォーマットを変更しています。

スライダー

以下のようなスライダーのUIもうまく使うとユーザーが直感的に操作することができるケースがあるでしょう。

また，以下の様な範囲を指定したり，値を取得することも可能です。

ダイアログ

jQuery UIではさまざまな機能のダイアログを実装できます。

標準のalert()やconfirm()だと，表示できるメッセージがテキストだけだったりと機能が乏しいので，こういったリッチなダイアログを使うことでユーザーの操作を助けることができるケースもあると思います。

自動補完

自動補完の機能は，あらかじめ候補のリストを設定しておくことで入力を補助することができます。

このサンプルでは，送信を押す度に名前を保存しておいて，次回入力時にその入力を自動補完の候補とします。何回も使うようなフォームであればこういう機能もユーザーの助けとなる可能性があります。

今回のお題

以下のようなフォームをjQuery UIの機能を使って，使いやすいUIにするというのが今回のお題です。

チェックボックスがないとフォームで送信できないなどの事情は今回は考える必要はないので，UIのみを考えて実装してみてください。

たとえば，項目をドラッグアンドドロップで好きと嫌いに分類できるようなUIを想定したサンプルが以下になります。

ここではまだJavaScriptを実装していないので，これをforkして続きを作るのでも構いませんし，独自のUIを実装してももちろん大丈夫です。

単にドラッグアンドドロップで移動できるようにするだけでもいいですが，操作中に要素の色を変えて操作をわかりやすくするような仕組みを入れてみるのもいいかもしれません。