フォームをちょこっとだけ使いやすくする小技いろいろ
July 18, 2008 3:16 PM written by Gen Taguchi

自分へのメモも兼ねてエントリー。フォームのユーザビリティを向上させる小技いろいろです。こういう小技を積極的に実装して自分のものにしていきたいですな。

どういうことができるかだけ紹介していきますので実際のコードは元記事を参照してくださいね。

  • 入力する際のメモを表示
  • setmessage.png

    ↑ 入力フィールドにフォーカスがあたるとメッセージを表示。

  • 入力候補を表示
  • autosugg.png

    ↑ タイプしはじめると候補を表示。

  • リアルタイムに入力値をチェック
  • remchars.png

    ↑ タイプしはじめると文字数をチェックとか。

    red.png

    ↑ 入力できる文字が5文字以下になると赤字になるとか。

  • あるフィールドの値によって動作を変える
  • select2.png

    ↑ チェックボックスの値によってフィールドを表示。

元記事ではソースを丸ごとダウンロードできますよ。日本語に対応させるにはごにょごにょする必要がありそうですが、こういうのは積極的に使いたいですね。

» woork: Useful tips to enrich your HTML Forms

この記事のトラックバックURL (トラックバックは承認後に公開されます)

コメント一覧

コメント投稿 (コメントは承認後に公開されます)

名前
メールアドレス (表示されませんのでご安心を)
URL
情報保存?
コメント
あわせて読みたい

クリエイティブ・コモンズ・ライセンス

ユーザビリティ向上支援ビービット
Usability tested by BeBit

タブブラウザ Sleipnir 公式ページ(上級者向け)

Powered by
MovableType 3.34

人気ブログランキング - idea*idea
ワード
www.flickr.com
This is a Flickr badge showing photos in a set called 自炊生活. Make your own badge here.
Firefox meter