Googleフォームの設定ミスによる情報漏えいが多発～あなたのフォームは大丈夫？ 原因となる設定について解説～ - ラック・セキュリティごった煮ブログ
デジタルペンテスト部の山崎です。 4月から「セキュリティ診断」の部署が「ペネトレーションテスト（ペンテスト）」の部署に吸収合併されまして、ペンテストのペの字も知らない私も晴れてペンテスターと名乗れる日がやってまいりました！（そんな日は来ていない😇） そんなわけで、新しい部署が開設しているブログのネタを探す日々を送っていたのですが、最近、Googleフォームの設定ミスによる情報漏えい事故が増えてきているようです。 どのような設定が問題となっているのでしょうか？ 同じような事故を起こさないよう、設定項目について見ていきたいと思います。 情報漏えいの原因となりうるGoogleフォームの設定について Googleフォームから情報漏えいとなっている事例を見てみると、大きく分けて以下の２パターンのいずれかが原因となっているようです。 １．表示設定で「結果の概要を表示する」が有効に設定されている ある
選択式フォームをより使いやすくするポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
ラジオボタン、チェックボックス、ドロップダウンリスト、コンボボックスなどは、ユーザーの入力負荷を軽減させるために使用される選択型のUI要素です。これらは見た目や機能が似通っていることもあり、なんとなく使い分けている場合も多いのではないでしょうか。 しかしながら、状況と目的にあったUIを採用しなければ、入力負荷の軽減どころか逆にユーザビリティが低下し、入力エラーの原因になってしまうことさえあります。 選択式フォームを正しく設定すれば、ユーザーの入力の手間を省き、タイプミスから生じるエラーの防止が可能になります。選択肢がリストに格納されるタイプのUIは画面スペースの節約になり、よりシンプルで情報負荷の少ないレイアウトを可能にします。 業務システムのUIをより良くするためには、選択式フォームそれぞれの特性を理解し、状況に応じて適切にデザインしていきましょう。 選択式フォームの種類 ラジオボタン
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
入力フォームにおけるエラーデザイン | ベイジのUIラボ
ウェブアプリケーションの使い勝手を向上させる上で、入力フォームの操作がスムーズかどうかは、非常に重要なポイントです。 スムーズに入力できないフォームは、ユーザーにたくさんのストレスを与える可能性があります。その中でも、特にストレスとなりやすいのが入力エラーです。 「入力を終えて登録ボタンを押した直後、エラーメッセージが表示されてイライラした」こんな経験は、誰しもあるでしょう。見方を変えれば、入力エラーを制すれば入力フォームの使い勝手を制することができる、といっても過言ではありません。 そもそも、エラーはユーザーに起こさせない仕組みであるのが理想です。つまり、エラーが発生しないUIに工夫したり、エラーを自動的に修正する機能を実装したり、といったことです。 しかし、UIの工夫だけでエラーを完全に回避することは難しいですし、自動化するにも現在のウェブの技術ではまだまだ限界があります。エラーが発生
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 flexboxでalign-item: baseline;を使用すると、チェックボックス・ラジオボタンとテキストを揃えるのは簡単に実装できます。複数行のテキストにも対応します。 <div class="flex-demo --start checkbox-input"> <label for="demo"><b>flex-start</b> 複数行の長いテキストでも大丈夫</label> <input type="checkbox" id="demo"> </div> <div class="flex-demo --center checkbox-input"> <label for="demo2"><b>center</b> 複数行の長いテキストでも大丈
お問い合わせフォーム最適化。改善しておきたい16の項目 | BUILD Journal
お問い合わせフォームの入力を完遂し、送信してもらうために改善しておきたい16のポイントを紹介します。サイトリニューアルの要望でよくある「お問い合わせ数を増やしたい」に応えるために最低限おさえておきたい情報をまとめました。ぜひ参考にしてみてください。 問い合わせ時に必要な項目のみに限定する 「この項目は本当に必要か？」いつも疑うようにしています。お問い合わせ時に必要な情報なのか？その後の打ち合わせで電話番号や住所など聞くことはできないのか？不要な項目を削除し、本当に必要な情報のみに限定することでユーザーも入力しやすくなります。 郵送で資料を送る資料請求フォームは住所は必要です。しかし、質問などメールだけでのやりとりのためのお問い合わせフォームであれば住所の情報は不要なので削除します。クライアントと相談しながら常に減らす意識は持つようにし、ユーザーの手間を省くようにします。 入力欄の数は最低限
Webサイトのフォームで悪用被害急増中！加害者にならないためのフォーム設置講座 | さくらのホームページ教室
Webサイトのフォームで悪用被害急増中！加害者にならないためのフォーム設置講座 商用のWebサイトでは欠かすことのできない「お問い合わせフォーム」。顧客との重要な接点ですので設置しているWebサイトは多いはず。今、そんなお問い合わせフォームが狙われています。「え、WordPressプラグイン最新にしてればいいんじゃないの？」と思われるかもしれませんが、今回は違いますよ！ 急増しているお問い合わせフォーム攻撃の手口 昨今、Webサイトのお問い合わせフォームを狙った大量メール送信攻撃が急増しています。手口は非常に古典的で、フォームから問い合わせをした際に送信される「お問い合わせありがとうございました」メールを悪用します。 お問い合わせした人のメールアドレス欄に、スパムメールを送りたいメールアドレスを入力お問い合わせ内容にフィッシングサイトや広告のリンクを入力送信ボタンをクリックお問い合わせあり
お問い合わせフォームのウェブアクセシビリティー対応の方法 - ICS MEDIA
フォームはウェブサイトの中でもインタラクションの多い箇所です。ユーザー側にきちんと情報を伝え、そして正しく入力してもらう必要があるのでアクセシビリティーには気をつけたいです。アクセシビリティー対応といえばWAI-ARIAによる支援がありますが、この記事ではWAI-ARIAに限らずどう対応するべきなのか、デモを用いて紹介します。 バリデーションに関してシンプルに実現できるものと、ちょっと凝ったリアルタイムバリデーションのものと2例用意しています。後者は動的に変化するコンテンツへのアクセシビリティー対応について解説しています。 サンプルを別ウィンドウで開く（シンプル版） サンプルを別ウィンドウで開く（リアルタイム版） コードを確認する ▼シンプルなバリデーション ▼ちょっと凝ったバリデーション まずはセマンティックなマークアップを WAI-ARIAを使ったコーディングというと、とにかくrole
ユーザーが見落とすことがない入力フィールドを作るには
UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか？ 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ
広野 萌 on Twitter: "パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） https://t.co/2S3PlFeQzC"
パスワードフォームのUIとインタラクションについて考える度、わりと毎回同じ結論・同じ仕様にたどり着くので、デザインするとき自分が正解としていること9点まとめてみた。みんなで車輪の再発明やめよ〜！（以下ひとつずつ解説） https://t.co/2S3PlFeQzC
jQuery で select タグに option タグを追加する - Qiita
例えば <select class="my-select" multiple> という select タグに jQuery を使って option タグを追加してみます。 var characters = { yuno: 'ゆの', miyako: '宮子', sae: '沙英', hiro: 'ヒロ', nori: '乃莉', nazuna: 'なずな' }, $select = $('.my-select'), $option, isSelected; $.each(characters, function (value, name) { isSelected = (value === 'miyako' || value === 'nori'); $option = $('<option>') .val(value) .text(name) .prop('selected', isSe
jQuery Validation Engineを利用する - Qiita
そもそもvalidation engineってなに？ form周りで便利なjQueryプラグイン。オープンソースで開発されている。ソースは以下のレポジトリから取得します。 https://github.com/posabsolute/jQuery-Validation-Engine フォームの正確なエラー判定は、実際にSubmitした後にシステム側でバリデーションして貰えばいい。 しかしそうすると、「え、年月日は半角じゃないとだめなの？」とか、不必要なストレスをユーザーに与える恐ればあり、UXの質が下がる。 またサブミットがされないようjsで制御する必要も出てくるし、submitをフックにその他いろいろなjsがあれば、干渉する可能性もある。 それが回避できても、すべてのモダンブラウザで入力した全データを（エラー後も）そのまま残すのはハードルが高い。 もし失敗してしまえば、ユーザーにとっては
【コピペOK】ユーザビリティを高めるHTML・CSSフォーム基本テク！
みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ みなさんはユーザー登録やお問い合わせのページって作ったことありますか？ See the Pen XGgMrB by JOラファエロ (@jo_raffaello) on CodePen. このようなフォームのページを作成するには、inputタグやtextareaタグなどといったフォーム部品タグと呼ばれる専用のHTMLタグを使います。 多分、Webデザイン初心者の方はほどんど触ったことなかったりするんじゃないでしょうか(^^;) 実はフォーム部品タグには、ユーザビリティを向上させるための専用の属性や便利なCSSの設定が色々あるんですよ！ ということで、今回はフォームのHTML・CSS基本テクをご紹介します！
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
Craft CMS の a&m forms プラグインで問い合わせフォームを作成してみよう（フォーム作成編） | BUN:Log
これは Craft CMS Advent Calendar 2017 25日目の記事です。 前回 に引き続き、 a&m forms プラグインでのフォーム作成の流れについて解説してみます。 フォーム作成の流れa&m forms プラグインでフォームを作成するには、大きく3つの工程が必要です。 フォーム専用フィールドの作成フォームの作成と初期設定テンプレートの調整順番に見ていきましょう。 フォーム専用フィールドを作成する管理メニューの a&m forms > フィールド に移動し、フォーム専用フィールドを作成・編集します。 各フォームに必要なものだけフィールドレイアウト画面で配置できるため、似たような入力項目を一元管理できるのが便利ですね。 では 新規フィールド ボタンをクリックし、フィールドを作成してみましょう。 それぞれの設定内容は、以下の通りです。 「お名前」フィールドラベル値
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック