フォームをちょこっとだけ使いやすくする小技いろいろ

SPONSORED LINK

Pocket

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

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

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

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

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

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

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

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

    red.png

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

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

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

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

» woork: Useful tips to enrich your HTML Forms

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. February 5th, 2009
    Trackback from : Feel Like A Fallinstar