jQuery 簡単！チェックボックスやラジオボタンを装飾する方法（プラグイン不要） | Stronghold Archive
どうもこんばんは。Toshikuraです。今回のTipsは【簡単！チェックボックスやラジオボタンを装飾する方法】です。プラグインを使用しても良いのですが、ここでは設定の手間や容量が気になるので使用しません。実装方法はとても簡単ですのでぜひお試しください。 発展編 20. チェックボックスのデザイン 画像の準備 まずはチェックボックスに使用する画像を準備します。チェック時を上、非チェック時を下と垂直に並べます。基本は画像ボタンの作り方と同様です。 基本設定 – 背景画像へ設置 画像を準備したらチェックボックスを囲っているラベルに背景画像として設置します。その際基点を左上に設定し、リピートを無しにします。 HTML <label class="cbxbd"><input type="checkbox"/>Check 1</label> CSS .cbxbd{ background:url(im
フォームで郵便番号を入れたら、住所を自動入力させる方法[Javascript] | TechMemo
Tweet TweetWEBサイトにお問い合わせフォームなどのフォームを設置することは多いと思います。 例えば、住所を入力してもらいたいときに、郵便番号と住所のフォームを設置したとします。ユーザーとしては、郵便番号を入れて、住所を入れて、と結構面倒に感じると思います。郵便番号を入力したら、住所も自動入力されると素敵ですよね。 とある方から、自身のWEBサイトに設置している注文フォームにこのようなフォームを設置したいと相談されました。しかしながら私はJavascriptは苦手です・・・なので、ネットで色々と調べてみたところ、色んな方が自動入力のフォームを実装するためのソースを公開しているんですね。 ありがたや～と執筆者様の方向におじぎをしながら拝見していたところ、その中でも比較的実装が簡単な方法を見つけたので、シェアさせていただきたいと思います。 jQuery.zip2addrのダウンロード
jQueryで入力フォームの上にテキストを表示する「プレースホルダ（placeholder）」を作ってみる｜BLACKFLAG
入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ（placeholder）」。 入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。 HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますが HTML5に対応していないブラウザではJSなどを使って実装しなくてはいけません。 このプレースホルダを表示するjQueryプラグインも多々ありますが シンプルなスクリプト構成で実装できないか、試しにやってみたので紹介してみます。 まずは実装サンプルから。 下記の入力フォーム（INPUTテキスト、パスワード、テキストエリア）にフォーカスすると 表示されているテキストが消えます。 入力フォームからフォーカスが外れた際に、 フォーム内に何か任意のテキストが入力されていると プレー
カーソルを合わせると文字が消えるフォーム | Inhale n' Exhale
本ブログの検索窓（画面右上）のように、カーソルを合わせると文字が消えるフォームは最近よく見かける。jQueryを使ってこのフォームを作るにはどうしたらいいか。基本テクニックと応用テクニックを紹介しておこう。 サンプルとして紹介するHTMLの基本構造はこんな感じ。 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> <script type="text/javascript"> $(function() { // Implement later... }); </script> <style type="text/css"> input#sample { width:200px; padding:2px; } input.dummy_text { color
毎日ぴよぴよ CakePHP
まだまだ次のお仕事でも使いそうなので、使えそうな所をまとめてメモ。 ■テーブルのtd指定 テーブルのtd指定はよく使う割に、とてもめんどくさい。 雛形があればいつでも使えるので、作っておいた。 もっとラクな方法があると思われるがこれが私の限界でした。 ■tdにオプションを指定したい時の基本形 echo $html->tableCells(array( array(array('', array('width'=>'136'))) )); //テーブル・フォーム・画像送信ボタンの３点セット echo $html->tableCells(array( array(array('●●●', array('width'=>'●●●')), array($form->text('●●●',array('type'=>'●●●','name'=>'●●●'…) ), array('width'=>'●
フォームを設置するプラグイン Contact Form 7[WP] - ミblog : レビューや日常など
2008-05-03 WordPress プラグイン お問合せフォームなどを簡単に設置できるWordPressプラグイン。フォーム設置プラグインは他にもいくつかありますが、Contact Form 7は日本語に対応し、シンプルで使いやすのが特徴です。 Contact Form 7導入方法 ダウンロード → Contact Form 7 (日本語) « iDeasilo ※WordPress2.5.1で動作確認 ファイルをダウンロード 解凍してファイルごとwp-content/pluginsにアップロード プラグインを有効化 Contact Form 7の使い方 設定→Contact Form 7から各種設定を行います。 最初からContact form 1というフォームが作成されているので、そのままカスタマイズするか、新規追加から新しくフォームを作って編集します。フォームは複数作成すること
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/template/2009/0317/
http://cybergarden.jp/cssniteLP13/form_test/