Form

フォームのデザインのまとめ。

2017.12.19 / Labs

フォーム内のテキストフィールドなどのパーツデザインのカスタマイズのまとめです。
サンプルはこちら

 

デザインは基本的にCSSのみで行なっています。セレクトボックスの下向き矢印のみSVG画像を使用しています。
フォームのHTMLはこちら。

CSSはこちら。ラジオボタン、チェックボックスでは本来のパーツを非表示にして、<span>タグで独自のパーツを作成しています。

フォーム項目の内容が変更された時のjQueryのイベントまとめ。

2012.07.05 / Labs

テキストフィールドや、ラジオボタンなど、フォーム項目の内容が変更された時に処理を行うための、jQueryによるイベントのまとめです。
サンプルはこちら

 

フォームは次のように、テキストフィールド、テキストエリア、ラジオボタン、チェックボックス、セレクトボックスを作成します。

上記のフォーム項目ごとに、内容が変更された時にイベントを取得して、別のDIVタグ内に変更内容を表示するようにしています。

テキストエリア、テキストボックスは、キーボードが押された時に、ラジオボタン、セレクボトックスは選択が変更された時に、チェックボックスはいずれかのチェックボックスが押された時にそれぞれイベントを取得しています。

 

変更内容の確認のための各DIVは、次のように記述しています。