入力するのが楽しくなる、アニメーション機能を伴ったフォームを作成するチュートリアル | コリス
jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="
jQuery Form Framework - jFormer
If one of your requirements is to support multiple languages, you must familiarize yourself with supporting Unicode data. An in-depth discussion of Unicode support is outside the scope of this article. Besides, Joel Spolsky has already said it best. What you should know is how Unicode affects your database design (data types used), how it affects the encoding used for your Web application pages, a
HTML5で進化したフォーム機能 ここが違う！サンプルで見るHTML5（5）
はじめに この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。 過去の連載も読む 第1回：HTML5が注目を浴びる理由とは？ 第2回：HTML4から変化したHTML5のマークアップ 第3回：HTML5で再定義された要素と属性 第4回：HTML5で実現できるマルチメディア系機能 新たに導入されたフォームコントロール これまでウェブにおける入力フォームコントロールは、非常に限られたものしかありませんでした。皆さんがよくご存じのテキスト（パスワード）入力フィールド、ラジオボタン、チェックボックス、セレクトメニュー、テキストエリア、ファイル選択です。お問い合わせフォームであれば、ほとんどのシーンで十分といえるでしょうが、ウェブアプリケーションにおいては、不足してい
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」:phpspot開発日誌
セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」 2010年05月12日- JQuery Narrative Select Plugin セレクトボックスをアンカーっぽくしてスッキリさせられるjQueryプラグイン「Narrative Select」が公開されています。 例えば、文章の途中にselect ボックスで選択肢を入れるようなUIがあったとすると、次のようになります。 普通にやれば、上のようになりますが、今回紹介するプラグインを使えば、次のようにアンカーっぽくなります。 クリックすると、select のように選択肢が次のようにカッコよく表示され、変更すると、当然、内容も変更されます。 Correct → Incorrect になりました。 select ボックスによるデザインも分かりやすくていいという意見もあると思いま
[XHTML]コピペ用セレクトメニュー（テキスト編）
入力フォームで良く使うセレクトメニューのサンプルソース。 都道府県、質問内容、違反報告内容など。 お届け時間指定 業者によって時間は変わるけど大体こんな感じ。 <select name="time"> <option>希望なし</option> <option>午前中</option> <option>12時-14時</option> <option>14時-16時</option> <option>16時-18時</option> <option>18時-20時</option> <option>20時-21時</option> </select> 都道府県セレクトメニュー 東京都を選択済みにしてある事が多いです。 <select name="area"> <option value="北海道">北海道</option> <option value="青森県">青森県</option>
![[XHTML]コピペ用セレクトメニュー（テキスト編）](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」:phpspot開発日誌
Web-kreation - LightForm ::: Free Ajax/PHP Contact Form PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」。 クールなフォームのＵＩに加えて、入力値がおかしい場合のリアルタイムエラー表示を行ってくれるPHPとAjaxのプログラムが入手できます。 UIがクールなフォームになってます 入力チェックの機能。 たとえば、名前を１文字入力して次にいくと、最低で３文字必要だというエラーが次のように表示されます。 メールアドレスが間違っている場合もちゃんとチェックしてくれます メンテナンスされていない点には注意ですが、なかなか使えるプログラムなので改変してサイト構築に活用すれば手間を大幅に削減できそうです。 関連エントリ JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform
ファンシーなデザインがいい感じのAjax＆PHPなコンタクトフォーム作成サンプル:phpspot開発日誌
A Fancy AJAX Contact Form ? Tutorialzine ファンシーなデザインがいい感じのAjax＆PHPなコンタクトフォーム作成のチュートリアルと、ソースコードが公開されてます。 次のようなデザインで、入力値にエラーがある場合のバリデーション機能とヒントのポップアップ機能が付いてます。 ヒントのポップアップが影付きなど、デザインがなかなか優れているのがいいですね。 CSSベースなので、デザインの変更も容易です。 関連エントリ シンプルなActionScript3で出来たコンタクトフォーム PHPとAjaxを使ったリアルタイム値チェック機能付きコンタクトフォーム「LightForm」 Ajax＆PHPでアニメーションするコンタクトフォームを作成するサンプル
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」:phpspot開発日誌
select ボックスを超便利にしてくれユーザビリティ向上に使える「jQselectable」がGoogle Codeに公開されています。 jQというだけあって当然ながらjQueryプラグインの形式です。 適用前の普通のSelect ボックスが便利に変化します 都道府県の縦に長かったものが横方向に超分かりやすく表示 日付も次のように超分かりやすいセレクトに。縦に長いのとはもうオサラバできそうです。 更に、コールバック関数によってクリックした後の動作も定義できるっぽいです。 はじめから日本対象という点でも使いやすいですね。 実装も、jQueryプラグインなので超使いやすいです。 次のように初期化するだけのようです。 $(".simpleBox").jQselectable({ set: "fadeIn", setDuration: "fast", opacity: .9 }); 以下のエント
デザイナー・コーダー必見！使えるform関連jQueryプラグインの数々 | バシャログ。
こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに！かつ操作性を向上！できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック（バリデーション）が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日本語用は別途作成し、使用することが可能です。 jQuery
登録フォームにプログレスバーを表示するJavaScriptチュートリアル:phpspot開発日誌
Create a Progress Bar With Javascript - Nettuts 登録フォームにプログレスバーを表示するJavaScriptチュートリアルが公開されています。 1ページに表示する入力項目は出来るだけ少なくして、最初の抵抗感をなくすという手法がありますが、ページ移動した後に、あとどれだけなのかが分かるとより登録率を高められそう。 次のように、フォームの上部にJavaScriptを使って進捗状況を表示するチュートリアルとソースコードのDLが可能です。 デモページ 画面遷移もJavaScriptで軽快に動作します。 登録フォームの参考にするとよいかもしれませんね。 関連エントリ jQueryとPHPでダイナミックな投票スクリプトを作成 jQueryを使ったブラウザ上で動作するLeopardデスクトップの構築
より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集:phpspot開発日誌
16 Free Ajax Contact Forms - For A Better User Experience Contact forms are the most common bridges between readers & site owners whether it is a blog or an e-commerce site. より良いフォーム作りの参考になるフォームのサンプル＆ライブラリ集。 JavaScript, Ajax等を使い、バリデーションやフォーム入力のしやすさなどについて考えられたフォーム集がまとまってました。 LightForm - Demo - ファンシーなフォームデザインにクールな入力チェック Proto Form - 入力チェック機能や現在位置強調機能 jQuery - Ajax Contact Form (Tutorial & Files) - D
Qdmail - PHP::Mail Library , Quick and Detailed for Multibyte
hal456トップページ 注意！ 本業が忙しいため、私は開発・更新には関わっていませんし、ご質問にも対応しておりません。 下記のURLの方々が、引き継いでいただいているので、どうぞそちらをご利用ください。 ライセンスに従えば改変は自由ですが、本ホームページでのダウンロードは停止いたします。使い方などについては、参考にされる方もいるかも知れませんので、当面の間、残しておきます。 長らくのご愛顧、誠にありがとうございました。 自分が作成したプログラムが、多くの方に便利に使われたことは、とてもうれしかったです。 2018/1/28 深謝 QdmailをPHP7.0に対応させる Qdmailシリーズのgithub版です。PHP5.4対応 qdmailを新しめのPHPでも動くようにした Qdmailとは Qdmailとは、PHPのマルチバイト環境（特に日本語）にて、「文字化けしない」「簡単に"デコメ
sarusaruMailForm - HTMLに関数を埋め込むだけで簡単に作れるメールフォーム - sarusaruworld lab - Web Lab
※【追記】新しいVerをこちらで公開しています Webサイト制作を行うと、ほぼ必ず必要となるメールフォーム。 たまに自分でやっつけようと思うと、毎回毎回地味に手間がかかる。 なんだか無意識レベルでストレスだな、と感じて1年前ぐらいにライブラリ（？）にした。 しばらく忘れていたのだが、ちょっと引っ張り出す機会があったので公開。 一般的なメールフォームはこんなイメージだろうか。 【地味に手間がかかる理由】 ・フォーム項目が変わると、都度「入力」「確認」「送信」の繋ぎを調整する必要がある ※仕様の途中変更があった場合も、ちょっと嫌 ・必須項目のチェックとかが必要 ・PerlやPHP内でのHTMLソースの管理が面倒 ※Dreamweaverのライブラリとかも適用しにくい 上げ連ねただけで、なんとも煩わしい。あー嫌だ嫌だ。 結局、項目の管理を「ページ単位」でやる事が問題なんだと思い至り 各項目をFl
メールフォームPHP / ウェブデザインライブラリー
投稿日：<2006年8月29日> レベル：初心者 ソフトウェア：PHP Editors 今回作成するようなコードは様々なサイトで利用されているものです。 PHPはmail()関数によりメール送信の実行を簡便に実現できる環境を提供しています。 まず、ユーザーに供給してもらうのに適当な内容を準備します。 例えば氏名, e-mail アドレス、 件名や本文などが考えられます。 ここからコーディングを始めましょう。 <HTML> <head> <title>My Mail Form</title> </head> <body> <? ?> </body> </html> <form method=POST name=form1> <label>Name :</label><input name=name type=text><br> <label>E-Mail :</label><inp
素晴らしいAjax + CSSフォーム47選『47+ Excellent Ajax CSS Forms』 – creamu
Ajax + CSSでさくっとフォームを実装したい。 そんなあなたにおすすめなのが、『47+ Excellent Ajax CSS Forms』。素晴らしいAjax + CSSフォーム47選だ。 以下にいくつかご紹介。 » Uni Form セマンティックでカスタマイズも可能なフォーム » AJAX Contact Form アクセシブルなAjaxフォームの好例。↑のキャプチャはこのサイト » FancyUpload using Mootools Mootoolsを使った美しいファイルアップロード » Really Easy Field validation with Prototype とても簡単に使えるフォームバリデートスクリプト » Live Validation リアルタイムでバリデートしてくれるオープンソースのjavascript 素晴らしいAjax + CSSフォーム、チェック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お問合せフォームPHP / ウェブデザインライブラリー