どこにでもありそうな、よくある入力フォーム。 テキストボックスとボタンを横一列に並べたい場合、3キャリア1ソースで実現するにはtableが必要になってきます。 tableのセルの中に入力フォームとボタンを入れないと、auで改行してしまいます。 tableを使っていないサンプルページ →サンプルページを見る tableを使っているサンプルページ →サンプルページを見る 入力フォームとボタンを隣同志のセルにいれればOKです。 <table> <tr> <td><input type="text" size="20" style="width:160px;" /></td> <td><input type="submit" value="検索" /></td> </tr> </table> docomoとsoftbankはtableに入れなくても横一列になるんですけど、auではなぜかなりません。

ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」 2009年10月30日- ドラッグ＆ドロップで数値の設定が出来る便利ＵＩを実装できる「jquery-drag-spinbox」。 普通、数値入力というと、ボックスに直接入力したり、ボタンを連打したりして上下させますが、このSpinBoxを使えば、画像上でクリック→上 or 下にドラッグすることで簡単に数値の調整が出来ます。 デモページ 名前の通り、jQueryベースで作成されていますので比較的簡単に使うことが可能です。 以下のエントリを参照してください。 HowToSetupJapanese - jquery-drag-spinbox - Project Hosting on Google Code

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Image Overlay テキストなどのパネルを画像の上にオーバーレイ表示します。 dumbcrossfade 打ち出し画像をフェ

Web Developer Plusで、jQueryを使ってCSSを補強するテクニックが紹介されています。 ざっといくつかご紹介。 jQueryでカラムの高さを統一する equalHeights pluginを使って、一行でカラムの高さを同じにする 入力中のフォームをハイライトする highlighting the label along with the selected input fieldを使って、フォームのユーザビリティーを上げるテクニック 角丸 jQuery Curvy Cornersで角丸を実装する メニューの背景をアニメーションさせる メニューにマウスオーバーしたときに、一瞬でhover画像に切り替えるのではなく、ふわ〜っとアニメーションして切り替えるテクニック。例：Create an Attractive jQuery Menu with Fade In and Fade

Shiny Blogで、ユーザーエクスペリエンスを向上させるjQueryプラグインが紹介されています。 いくつかご紹介しますね。 iconDock MacのDock風拡大エフェクト Simple Controls Gallery 自動でスライドするイメージギャラリー Flip! 画像をくるっと回転させるプラグイン Select-to-slider スライダーで日付を選択できるプラグイン Flip!とかスライダーでの日付選択が面白いですね。 その他のリストは以下からどうぞ。 7 jQuery Plugins to Really Enhance Users Experience Flashをいろいろと。楽しいですね。次はWPをやらないと。

cats who codeで、サイトを魅力的にするjQueryがいろいろ紹介されています。 いくつかご紹介。 Easy Display Switch with CSS and jQuery ボタンクリックでリスト表示とカラム表示を切り替えられる Turn any webform into a powerful wizard with jQuery 長くて退屈なフォームを、ウィザード形式でStep1〜3のように分けられる Beautiful tag clouds with jQuery and flir タグクラウドをかっこよく見せてくれる Twitter-like login panel using jQuery Twitterライクなログインパネル。↑のキャプチャはこちら Disappearing “Scroll to top” link with jQuery and CSS ページが

ドットインストール代表のライフハックブログ

Making A Cool Login System With PHP, MySQL & jQuery ? Tutorialzine jQueryを使って簡単実装！かなりカッコいいログインフォーム作成のチュートリアル。 ページのヘッダーにあるログインボタンを押すと、ニュイーンとログインフォームが降りてくるというカッコいいログインフォームの実装演習になってます。 ログインボタンを押す ヘッダーからそのままログインフォームが降りてきてそこからログイン可能です。 ソースコードのダウンロードも可能です。 関連エントリ ログインフォームのデザイン集１００種 Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル 超クールなログインフォームを作成するチュートリアル

ユーザーが混乱しない、使いやすいフォームを実装するために気をつけたい10のポイントをNoupeから紹介します。ブログのコメント欄を対象にしたものですが、フォーム全般にも言えることが多く含まれています。 Comment Form Styling: Examples and Best Practices下記に10のポイントとその概要を紹介します。 サイトではキャプチャなども豊富に掲載されています。入力フィールドはシンプルにたいていのフォームには複数の入力フィールドがあります。 フォームの目的はユーザーからの適切なフィードバックを得るのが目的なので、必要無いものや関係無い入力フィールドは削除します。ラベルは分かりやすく入力するユーザーの立場にたって、ラベル付けします。 例えば、「コメント」と単に記すだけでなく、「コメントを残してください」「あなたの意見をどうぞ」などです。また、「URL」などは用

アンケートで仕事を動かす。社会を変える。 意見集約・合意形成も思いのまま。 アンケートメーカー®は、高機能なアンケートフォームの作成・公開・集計機能をレンタル提供するサービスです。プロ仕様の本格的なアンケートフォームを、簡単、スピーディに作成することができます。30日単位のスポットレンタルなので、必要な時に、すぐに無駄なくご利用いただけます。費用は、税抜3,800円から。

遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて

A Fancy AJAX Contact Form ? Tutorialzine ファンシーなデザインがいい感じのAjax＆PHPなコンタクトフォーム作成のチュートリアルと、ソースコードが公開されてます。 次のようなデザインで、入力値にエラーがある場合のバリデーション機能とヒントのポップアップ機能が付いてます。 ヒントのポップアップが影付きなど、デザインがなかなか優れているのがいいですね。 CSSベースなので、デザインの変更も容易です。 関連エントリ シンプルなActionScript3で出来たコンタクトフォーム PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」 Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル

長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図１：長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図２：ウィザード形式（Step1〜Step3） チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

フォームの入力フィールドにアイコンを表示するなど、9種類のスタイルのデザインを簡単に適用できるスクリプトをCoders.meから紹介します。

これは注目！様々なタイプのCAPTCHAが作れるPHPライブラリ「Securimage PHP CAPTCHA」 2009年09月30日- Securimage PHP CAPTCHA - Free PHP Captcha Script 次のように、実に様々なタイプのCAPTCHAが作れるPHPライブラリ「Securimage PHP CAPTCHA」というのがあるみたい。 一種類のタイプだと解析していくと比較的簡単に破られてしまうのかもしれませんが、これならよりセキュアにCAPTCHAを実装できそうです。 ドキュメントなんかもしっかりしているようで導入も簡単そうです。 Ajax と session を使って実装しているようです。クイックスタートガイドはこちら 関連エントリ PHPで独自CAPTCHAを作るチュートリアル これは新しい妹CAPTCHA「妹認証」 PHPで使えるCAPTCHA

1st webdesignerで、CSSとJavaScriptで作るフォームエレメントのチュートリアルがたくさん紹介されています。 いくつかご紹介。 ↑は、Changing Form Input Styles on Focus with jQuery。フォームの中にラベルを表示して、フォーカス時にラベルを消してくれる Turn postcard photo into a stunning comment form using CSS 古いポストカードを使ってコメントフォームをつくったようなデザインのチュートリアル CSS Tableless Form テーブルを使用しないフォームデザイン。floatとネガティブマージンを使用 テクニカルで気の利いたものが多いですね。 その他は以下からどうぞ。 » 51 Form Element Resources and Tutorials Using C

フォームのエラー箇所にブルッとしたアニメーションのエフェクトを加えるスクリプトをJanko At Warp Speedから紹介します。 Animate validation feedback using jQuery demo デモではフィールドが空の場合にエラーとして、ブルッとしたアニメーションのエフェクトを加えます。 スクリプトのベースにはjQueryが使用されており、下記のスクリプトを記述します。 <textarea name="code" class="js" cols="60" rows="5"> $("#signup").click(function() { var emptyfields = $("input[value=]"); if (emptyfields.size() > 0) { emptyfields.each(function() { $(this).stop(