フォームデザイン

フォームデザイン(フォーム部品選択フィルタ「:selected」)

フォームデザインのフィルタはこれが最後かな?selectタグで選択されている「フォーム部品」を取得する。 この「フォーム部品」てのは、selectタグについてはoptionになるのかなぁ。 そこらへんの定義がよくわからん。 ま、jQueryに関しては「使えるようにな…

フォームデザイン(フォーム部品選択フィルタ「:checked」)

今日も早く帰ってこれたぞと。 昨日の続きで、「:checked」フィルタ。 当然思いつくべきことを忘れていた。。さんざん、入力タグ系のフィルタって使うケースあんのか?と言っていましたが、 子セレクターとして使えればそれなりの需要はありそうだ。 という…

フォームデザイン(フォーム部品選択フィルタ「:radio」「:checkbox」)

疲れが溜まっております。。 んが、今日は少し早く帰ってきたのでエントリ追加。 radioとかcheckboxってinputタグ中にinnerHTMLとかinnerTextとかで文字列を入力しても意味無いのね。 中に文字を設定したらその文字をクリックしても切り替えが発生すればいい…

フォームデザイン(フォーム部品選択フィルタ「:input」「:text」「:password」「:submit」「:image」「:reset」「:button」「:file」)

とりあえず全部の入力タグを扱うサンプル。 サンプル中ではコメントアウトしているけども、:input、:text、:password、:submit、:image、:reset、:button、:file を試せるようにしております。 尚、以下のサンプルを試す場合、input[type='image']については…

フォームデザイン(フォーム部品選択フィルタ)

フォーム部品を選択するフィルタ(セレクタの一種)がたくさんあるとのこと。 これらを使うとフォーム部品の選択が楽になるらしい。 表を作ってみた。(と思ったら参考にしているサイトの最後にほとんど同じ表が。。) フィルタ 対象タグ :input inputselect…

フォームデザイン(submitイベント)

お次はsubmitイベント。 ただし、これはformタグに絡むのであって、submitしたボタンで発生するわけではないので注意。サンプルではzipcodeというIDのformタグと、その中で「type="submit"」指定されたinputタグ(ボタン)を定義し、 そいつがクリックされた…

フォームデザイン(changeイベントの例)

これもなんでイベントのセクションででてこなかったんだろう。。 コントロールの入力内容が変化した場合に発生するイベント。↓のサンプルではブタの選択を変更すると本文の入力フォームの内容が変わる感じ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(functio…</head></html>

フォームデザイン(focus/blurイベントの例)

以前やった「イベントの操作」のとこでなんで出てこなかったのか理解できないが、 入力タグがフォーカスを受け取ったとき、フォーカスを失った時に発生するイベント。前のエントリーに、Emailの入力タグがフォーカスを受け取ったら説明を右側に出し、フォー…

フォームデザイン(valメソッドによる値の取得/設定)

さて、久々のjQueryです。ちょっと体調悪かったり背中痛かったりで今日はすぐ諦めてしまいそうな気がしますが、一歩一歩参りましょう。まずはinput系のタグの操作。 セレクターに対して「val()」で値を取得、「val(○○○)」で値をセットすると。 呼び出し方に…