いろいろなシーンに 対応 必要な時、スピーディに フォームとページ を作成できます。 あらゆる課題を解決する活用法やサンプルを紹介！ イベント・セミナー キャンペーン ネット販売 アンケート お問い合わせ 予約 登録 採用 ホームページ 社内の報告書
フォームメーラー｜SSL・携帯対応の無料メールフォーム作成ASP
いろいろなシーンに 対応 必要な時、スピーディに フォームとページ を作成できます。 あらゆる課題を解決する活用法やサンプルを紹介！ イベント・セミナー キャンペーン ネット販売 アンケート お問い合わせ 予約 登録 採用 ホームページ 社内の報告書
HTML::Shakanでフォーム生成・バリデーションからモデル作成まで - JPerl advent calendar 2010 casual Track
こんにちは！先日のYAPC2010ではhirataraさんと共にgihyo.jpでレポータをさせていただいたusuihiroです。 フォーム処理とかバリデーションっていつも面倒だなぁと思っていたのですが、今日はtokuhiromさんが作成されているHTML::Shakanが便利そうだったので試してみました。 HTML::Shakanはフォームタグの生成とバリデーションを行ってくれるモジュールです。 コンセプトは作者のtokuhiromさんが書かれているこちらを参照。 フォーム生成とバリデーション よくあるログインフォームだと、こんな感じでフォームの生成の入力値のバリデーションが行えます。 my $req = shift; # CGIとかPlack::Requestとか # フォームオブジェクトを作る my $form = HTML::Shakan->new( fields => [ Ema
「Google Spreadsheets」アンケート機能を試す - ネタフル
Google Spreadsheets、アンケート機能登場!で紹介されていた「Google Spreadsheets」アンケート機能が面白そうだったのでを試してみました。 新規スプレッドシートを開いて、右上にある「共有」（↑）をクリックします。 「ドキュメントの共有」から「フォームへの記入」を選択します。アンケートフォームが記入されると、スプレッドシートで自動集計される、という機能説明。 スプレッドシートのタイトル、説明に加えて、 ・質問 ・質問の捕捉文 ・質問の形式 などを入力・選択してアンケートフォームを作成します。 「MacBook Airを購入しましたか？」ということで「はい/いいえ」で作ってみました。 アンケート作成後の画面です（↑）。知り合いに知らせるためのメールフォームの他、アンケートのURLも表示されています。 メールでお知らせすることもできるし、そのURLをブログなどに貼
Googleスプレッドシートをアンケートや応募で便利に使う方法 - ネタフル
Googleスプレッドシートのフォーム機能をご存知でしょうか？ アンケートやプレゼント応募用のフォームを作成すると、入力内容を自動的に集計できるのです。これがとっても便利！ ぼくは主に、 ・ネタフルのプレゼント応募 ・ネタフルのアンケート ・イベントの申し込み などに利用しています。 手軽に作成できて集計も自動で、シートを共有したりもできるので、かなり便利に利用しております。 簡単に使い方を説明しましょう。 Googleドキュメントから「新規作成」で新しい「スプレッドシート」を作ります。 メニュー「フォーム」から「フォームの作成」を選択します。 続いて、質問項目を追加します。 「無題フォーム」はフォームのタイトルです。必要に応じて説明文を入力します。 それぞれの項目は鉛筆アイコンをクリックして編集します。 鉛筆アイコンは項目の右上にあります。 質問の形式は、 ・テキスト ・段落テキスト ・
第17回 「その場編集」を実装する | gihyo.jp
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)
今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示（インライン・バリデーション）方法の最適化についてです。 まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。 【動画】�：フォーム入力におけるリアルタイムエラー判定デモ 上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。 すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「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"
FormValidator::LazyWay で検証ルールをまとめよう - JPerl Advent Calendar 2009
FormValidator::LazyWay で検証ルールをまとめよう - JPerl Advent Calendar 2009 Perl に関するちょっとした Tips をのっけてみるよ。ちゃんと続くかな？ どうも、亀仙人になって鼻血ブーしたい vkgtaro です。ご機嫌いかがですか。亀仙人が最初なのかどうか知らないけど、鼻血を吹くというマンガ表現はすごく好きです。おっと、hacker track でした。 ということで僕もハッカーではないけれど、自分がメンテナンスしてるモジュールの中から一つ紹介させてもらいますね。 今日は FormValidator::LazyWay で検証ルールをまとめちゃいます。 フォームの検証 web アプリケーションを作っていると、どのページでも出てくる入力項目ってあると思います。 会員登録時のパスワード項目とログイン時のパスワード項目とユーザ情報変更時のパ
FormValidator::LazyWay - フォーム検証用モジュール - metacpan.org
Tools Download (56.03KB) MetaCPAN Explorer Permissions Subscribe to distribution Install Instructions Dependencies Class::Accessor::Fast Data::Validate::URI DateTime::Format::Strptime Email::Valid Email::Valid::Loose Perl6::Junction UNIVERSAL::require URI and possibly others Reverse dependencies CPAN Testers List Dependency graph Permalinks This version Latest version NAME FormValidator::LazyWay -
リアルタイム入力チェックのJavaScriptライブラリ·yav MOONGIFT
時々、Webサイトで入力している内容をその場で判定するものがある。入力必須の項目やメールアドレス、パスワードの一致などでエラーがあればすぐに表示してくれるので、送信してから修正すると言った二度手間がなくて便利だ。 Webブラウザ上で入力チェックを実行する サーバ側でも入力チェックは行うが、ユーザビリティを考えるとオンラインでも検証したい。そんな検証システムを簡単に作れるのがyavだ。 今回紹介するオープンソース・ソフトウェアはyav、JavaScriptの入力チェックライブラリだ。 yavは入力必須はもちろん、数字のみや文字のみといったチェックもできる。メールや日付、文字の長さなどといったフォーマットによるチェックや、「and」と「or」による他の項目の値によって入力チェック内容を変更する機能もある。多言語にも対応している。 設定はこのようになる 入力フォーマットを規定することも可能で、予
MOONGIFT: » jQueryでその場で入力チェックを行う「jQuery Inline Form Validation Engine」:オープンソースを毎日紹介
入力された値の検証は最終的にサーバ側で行わなければ意味がない。が、ユーザビリティを考えるとブラウザ上でチェックし、通知できれば便利に違いない。問題はそうしたチェック機能を実装するのが手間だと言うことだ。 jQueryを使ってWebブラウザ上で入力チェック 動的なフォーム生成でも柔軟に対応できるくらいシンプルな入力チェックライブラリがjQuery Inline Form Validation Engineだ。 今回紹介するオープンソース・ソフトウェアはjQuery Inline Form Validation Engine、jQueryプラグインで提供される入力チェックライブラリだ。 jQuery Inline Form Validation Engineの良い点は、入力チェックがブラウザ上で行われ、かつそのエラー内容が入力項目の横にフローティングで表示される所だ。吹き出し風になっており、非
入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」:phpspot開発日誌
ToggleVal :: jQuery Plugins by Aaron Kuzemchak 入力ボックスでクリックすると消えるデフォルト値を簡単実装「ToggleVal」。 入力ボックスにデフォルトでヒント値を入れておいてクリックすると消えるあの分かりやすいインタフェース。 実際に実装するとなると、ちょっと面倒ですが、ToggleValを使えば、メソッドを1回呼び出すだけで簡単に実装できます ↓↓↓↓クリックで消える↓↓↓↓ jQueryプラグインなので、以下のように使いやすくなっています。 $("input[name='name']").toggleVal( { option } ); 実装したくなった時、ちょっと面倒でまた今度、とならないようにこれを覚えておけばよさそう。
フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」
twitter facebook hatena google pocket フォームなどでよく、デフォルトでテキストが表示されている場合があります。 何を入力すれば良いのかを示しことができるので、ユーザービリティ上有意義な方法です。 jQuery Watermark PluginはjQueryベースでこれが可能です。 sponsors 使用方法 jQuery Watermark Pluginからjquery.updnWatermark.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.updnWatermark.js"></script> <script type=
フォームデザインを完成させるjQuery plugin「jqtransform」
今まで様々なjQueryを使ったプラグインを紹介してきましたが、今日紹介する「jqtransform」は今まで紹介した物と少し違っていて、フォームのデザイン補助してくれると言うものです。 CSSなどでデザインせず、普通にフォームを制作した場合上記のように利用OSに準拠したプルダウンメニューやボタンなどが表示されます。このプラグインを使えば上機能なありきたりなフォームデザインを施す事が可能です。変更後のデザインは以下の通り 詳しくは以下 デザインだけでなくプルダウンもアニメーションがついていたりと細かな部分も配慮されています。実装方法は簡単、jQueryとプラグインを読み込んで、フォームにクラス指定をしてあげるだけになっています。デザインはCSSで制御しているみたいなので、個別のカスタマイズできるようになっていますので、使い勝手が良いかと思います。これならDemoで表示されているデザインが気
第30回 フォーム・ページにデザインを適用する
今回のポイント フォームのひな型 入力欄をインデントする 縦長でも横長でも使える「マルチ対応版」のフォーム 段組の考え方 「Z型」と「N型」 今回は会員制サイトの入会フォームという仮定で，フォーム・ページを作ってみます。とりあえずひな型になるサンプルを作って，少しずつあれこれ考えながらデザインを適用していくことにします。 入力項目は次の10項目です。 入力項目の一部は，姓名やふりがなを「姓」と「名」のように分割します。HTMLのデザインだけを志す方にはわかりにくいかもしれませんが，こうした項目分割はサーバーサイドで行うバックエンドでの処理と後々のサポートを考慮しています。 姓名を例に考えてみましょう。まず，ふりがなが必要な理由は，コンピュータは漢字の読み方を感知できないからです。漢字だけでソートをかけると，一般的にプログラムは漢字コードの順でソートをしてしまい，およそ五十音順を無視した並び
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Apps Scriptを利用してForm申し込みに自動返信する (Google Sitesに関する情報)
ASTRODEO 株式会社アストロデオ
Going My Way: Google Docs の Spreadsheet で手軽にフォームを作成する方法
IDEA * IDEA