[B! form][jQuery] spade9970のブックマーク

CSS3とjQueryでフォームを美しく装飾する方法

2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！フォームの仕様今回チャレンジするフォームの主な仕様です！グラデーション・ボックスシャドウを使って立体感を表現角丸で丸みをつける（モダンブラウザ）対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。テキストボック

spade9970 2010/10/29

リンク

フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌

PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"

spade9970 2010/01/12

お手軽だが、これだけのためにjQueryを読み込ませるのは微妙なところで悩ましい・・・。

リンク

デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。

こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、実現できなかったりすることもよくあります。そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。デザイナーの方は、フォームのデザインの参考に。コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。エラーメッセージはlocalizationディレクトリ内に18言語用意されています。日本語用は別途作成し、使用することが可能です。 jQuery

spade9970 2009/05/28

リンク

jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌

Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。何ができるか？というのは次の図を見て頂くのがはやいでしょう。ビフォア ↓↓↓↓ アフターこれを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });