フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
ヤクセルは皆様からのお声を大切にし、よりよい製品開発やサービス提供に努めております。ご意見、ご感想、ご要望など、お気軽にお寄せください。 お問い合わせの内容により、返信させていただくまでにお時間を頂戴する場合や返信いたしかねる場合、お電話・お手紙を差し上げる場合などもございます。あらかじめご了承ください。 の表示がある項目につきましては必ず入力くださいますよう、お願いいたします。 お問い合わせはお電話でも承ります。 0575-22-3411(代表) 受付時間：9:00〜17:00（土日祝・夏期休暇・年末年始を除く） メッセージ
郵便番号が2エリア、住所が2エリアの場合（プルダウンメニュー） ※ 都道府県のプルダウンは都道府県名または都道府県番号（都道府県コード）対応しています。 <form action="./" method="post"> 〒 <input type="text" name="zip1"> - <input type="text" name="zip2" onKeyUp="AjaxZip3.zip2addr('zip1','zip2','address1','address2');"> 都道府県 <select name="address1"> <option value="">-- 選択してください --</option> <option value="北海道">北海道</option> <option value="青森県">青森県</option> <option value="岩手県"
YubinBangoは、Webフォームにて郵便番号を入力すると自動的に住所が自動入力されるライブラリ（ajaxzip3の開発者による正式な後継）です。 郵便事業株式会社（旧郵政省）提供のデータを利用しています。 郵便番号データの更新はCIで自動化しております。 詳しくはGithub内のYubinBangoのレポジトリに記載のガイドをご覧ください。 ＃お気に召しましたら任意で結構ですのでNPO法人Family1st宛にご寄付をお願いいたします。（お振込先はこちらです） 〒 <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> <form class="h-adr"> <span class="p-country-name" style="display:non
Top デモ 仕様 利用方法 拡張方法 拡張(有償) 更新履歴 お問い合わせ **【特記事項】*************************** 2024.3.9 * * (1)動作テストに関して（郵便番号は4380078を使用） * ガイダンス画面から七軒町が選択できること。 * ※ガイダンス画面を非表示にするサイトを見かけます。 * * (2)@ZipAddr_xx部分を非表示にしたい場合 * https://zipaddr.com/payment/ の拡張拡張(有償)の(3)を参照下さい。 * * (3)WPプラグイン zipaddr-jp は常に最新の状態にして下さい。 * 自動更新の設定を、「自動更新を有効化」にすると便利です。 * ************************************************** ◎利用数：51,123 サイト ◎本
これを適用すると、以下のような外観になります。元のスタイルがなくなり、右端の矢印も消えてなくなります。今のところ、ChromeやFirefoxでもappearanceはベンダープレフィックス（-webkit-や-moz-など）が必要です。 （キャプチャは Mac版Chrome） なお、自動的に最新バージョンを使うことになるのであまり気にすることはないと思いますが、Firefox30〜34では「-moz-appearance: none;」が機能しないというバグがあったようです。 詳しくは、GitHub「How to hide <select> dropdown’s arrow in Firefox when using “-moz-appearance: none;”.」で書かれています。この不具合はバージョン35で修正されたということで、35、36で確認したところ問題ありませんでした。
味気ないラジオボタンをスイッチデザインに変換してくれるjQueryプラグインです。 それ以上でもそれ以下でも無いのですが・・・。 jQueryプラグインを読み込むだけですぐに変換 jQueryプラグインを読みこめば、ラジオボタンが以下のようになります。 サンプルデモは以下に http://ahmad-sa3d.github.io/rcswitcher/ ダウンロードは以下からできます。index.html ファイルのソースを見れば、特に設定などの仕様を読まなくても直ぐにわかるかと思います。 ahmad-sa3d/rcswitcher · GitHub もう少しデザインにこだわりたい人 ボタンを手軽に変換出来るjQueryプラグインは他にも結構ありますが、こちらもオススメです。 fronteed/icheck · GitHub 是非お試しあれ。 それでは、また。
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
コピペでOK！Googleフォームで送信された内容をメールで自動通知してくれるスクリプトと設定方法を公開します 2013年11月29日投稿 2016年5月29日更新 カテゴリ：便利ツール 著者: jMatsuzaki photo credit: ….Tim via photopin cc 私の愛しいアップルパイへ Google Docsで提供されている「フォーム」機能は実に便利です。Googleをなでなでしてあげたいくらい便利です。 一点残念なのは、フォームに入力された内容をメールで自動的に送る機能が標準では無い点です。フォームを入力した人や管理者宛てにこういったメールを送れたらなんて便利でしょうか。 そんなあなたの願いを叶えるべく私は今日ここに立っています。ですからGoogleフォームで送信されたフォームの内容を自動通知するスクリプトと設定方法をお教えします コピペでOK！Googleフ
Google Apps Script（以下、GAS）を使えば、Googleのアプリケーションにちょっとした機能を加えて実用的なサービスに仕立てられます。今回は、問い合わせフォームを簡単に作成できる「Googleフォーム」を使って、問い合わせメールへ自動で返信するシステムを作ります。 【フォーム作成】問い合わせフォームを作る Googleフォームは、問い合わせやアンケートなどのフォームを簡単な操作で作成できるWebアプリケーションです。まずは企業サイトを想定した、シンプルな問い合わせフォームを作成してみましょう。 1. https://drive.google.comにアクセスしてGoogleドライブを開きます。「作成」ボタンをクリックし、「フォーム」を選んでください。
こんにちは。mackyです。いやー、夏ですね。夏が終わったらもう年末ですね。私は毎年この時期から猛スピードで一年が終わります。早く走らないと。。詳しくはコチラをご覧ください。 さて、今日は、HTML5で新しく追加された入力属性にちょっと「なんか楽しいかも...」と感じたので、この気持ちが冷めないうちにまとめることにしました。 autofocus オートフォーカス。 ページを開いたときにフォーカスされるようになる。ちなみに、emailはHTML5で追加されたtype属性の値で、メールアドレス専用のキーボードを表示させることが出来る。 <form> <label>お名前: <input type="text" name="name" class="text" autofocus/></label> </form> お名前: autocomplete オートコンプリート。 入力候補はdatali
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
注意 内容については一切保証しません。 ここでは、主に W3C ML での議論や各種仕様などに基づいて書いています。 ここに書かれていることが正しいかどうかは、自身で判断して下さい。 事実としておかしいところなどは、コメントでどんどん指摘して下さい。遠慮はいりません。 ただし、このエントリでは「form が PUT/DELETE をサポートするべきかどうか？」の議論はしません。 「REST の是非」や「PUT/DELETE の意義」についても議論する気はありません。 ここでやっているのは、あくまでもどういった議論の末現状があるのかの調査です。 そうした意見がある場合は、 W3C などに投稿するのが最も有益だと思います。 History 2014/03/29: 公開 2014/03/29: XForm と XHTML の関係を明確化(thanx koichik) 2014/03/29: HT
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 2011年11月14日- jQuery Autosize for textarea elements テキストの量に応じてtextareaが自動でリサイズするようにできるjQueryプラグイン「Autosize for textarea」 次のようにテキストを入力するとちょうどテキストにフィットするようにtextareaのサイズが変わります。最初からあまり大きくしたくないけどスクロールさせたり利便性を損なうのは嫌、という場合に使えます。 この手のプラグインは過去にも紹介しましたが、jqueryプラグインなので、必要プラグインを読み込んだら、$('textarea').autosize(); のように初期化しちゃえば使えちゃうというのもいいですね jQue
「Contact Form 7」はお問い合わせフォームを簡単に設置でき、様々なカスタマイズも可能なので、多くのサイトで紹介・使用されているプラグインのひとつだと思います。 公式サイトでも多くの情報がありますし、人気のあるプラグインなので検索でもいろいろと出てはくるのですが、これだけ見れば良いっていう自分好みの感じのものを作りたかったので、使う頻度が高い使用方法やカスタマイズなどを備忘録としてまとめてみました。 紹介している内容は、WordPress Ver 3.5.1 と Contact Form 7 Ver 3.4.1 で確認等行ったものです。 Contact Form 7について フォームを作成する際、ほとんどの場合PHPなどのプログラミング知識が必要になってきます。 よほどの知識・技術がある人であれば容易に作ってしまうのかもしれませんが、ゼロからのフォーム作成は結構面倒ですし、知識が
※ご注意： ウイルスバスターがインストールされている環境だと、この記事は読めないようです (→参考画像) (x-autocompletetypeとは？) Webサイトのフォームにワンクリックで個人情報を自動入力してくれる便利機能。ブラウザに、あらかじめ名前やメールアドレスや住所やクレジットカード番号などの情報を設定しておく。 アンケートサイトとかに超便利 入力が苦手なオカンも便利 とにかくべんり Google Chrome のみ対応してる (2012年4月4日時点)。 便利すぎて今後、他のブラウザも追随必至。 (ユーザーが自動入力を使うには) Google Chrome 設定 → 個人設定 → 自動入力設定の管理 → 住所氏名メールアドレス等を入れておく (Webページ側での自動入力の設定) inputにx-autocompletetype属性をつけて、値を email とか sname
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[jQuery]フォームのバリデーションと入力ヒントの表示も可能なプラグインJQuery Form Validation And Hints | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/ad835612cfc272d8f3a17547f348ac4d0ae79936/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fwebantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2F6523979.jpg)
