並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 56件

新着順 人気順

入力フォームの検索結果1 - 40 件 / 56件

  • 3大イラッとくる入力フォーム

    ペースト出来ないID/パスワード欄 4つに分割されてるクレジットカード番号入力欄 入力した後で記号は使えませんとか言ってくるパスワード欄 あと一つは?

      3大イラッとくる入力フォーム
    • 「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中

      米村歩@日本一残業の少ないIT企業社長 @yonemura2006 ・丁目、番地が全角しか入力できない ・電話番号が全角しか入力できない ・建物名が全角しか入力できない ・生年月日がカレンダーで果てしなきページ送りを要求される ・何の入力チェックでエラーが出ているのかわからない ・入力チェックエラーになると入力内容が全部消える #クソ入力フォーム選手権

        「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中
      • 「よくあるクソフォームだ!」このクレジットカード入力フォーム、どこが悪いのかわかりますか?

        白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic すみません。 何故悪いフォームなのかが理解できないのです。 普通のフォームだな、と思ってしまいます。 お手数ですが、解説をお願いできますでしょうか? 歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic @ShirayanagiRyuj 主に ・カードのブランドは選択させる必要がない(カード番号から判別できるため) ・カード番号入力欄が4つに分かれている(おまけに4桁入力したら勝手に次に遷移するので、修正が面倒です。入力欄は1つでOK) ・有効期限に独自の並び、形式を使用している(ここでめっちゃハマりました) です! 白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic なるほど! それは、幾つかの知識がないと「

          「よくあるクソフォームだ!」このクレジットカード入力フォーム、どこが悪いのかわかりますか?
        • 最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG

          こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね! しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか

            最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG
          • JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話

            Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を…

              JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
            • 入力フォームに「半角文字が含まれています」「全角英数字が含まれていま..

              入力フォームに「半角文字が含まれています」「全角英数字が含まれています」とか怒られるのはまだわかるんだけど「文字が含まれています」って怒られたのは初めてだよ 何を入力しろっていうんだよ

                入力フォームに「半角文字が含まれています」「全角英数字が含まれていま..
              • ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う - hogashi.*

                こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個

                  ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う - hogashi.*
                • 「このUIエグいて。」リセットボタンの配置が罠すぎる入力フォームに戦慄する人たち

                  半豚 @nai6ZUXMUVaEmP6 考えてみたら、ダイアログとかの場合のOKボタンは左配置だよな そのページで完結している場合は左配置で次ページある場合が右配置なのかな いや、まあ、この場合はそもそもリセットボタンは右上とか右下に小さめに配置した方が良いとは思うけど twitter.com/MacopeninSUTAB… 2023-06-13 08:54:15

                    「このUIエグいて。」リセットボタンの配置が罠すぎる入力フォームに戦慄する人たち
                  • 「日本3大許せない入力フォーム」に続々と候補と共感が集まる

                    Paul O'Leary McCann @polm23 @941 @asahiko 姓名や住所のところで半角英字を受け付けないやつですね。他には名前の読みがなで使用できる文字を明記せずカタカナや長音符を受け付けないのもあります(出前館はたしかに読みがながひらがなでないとエラーになるけどエラーはそれを説明してくれないとか…)。 2022-01-27 23:04:13

                      「日本3大許せない入力フォーム」に続々と候補と共感が集まる
                    • 独自の入力フォームを作成可能に ~デスクトップ版「Power Automate」の2月更新/フロー実行時の通知も強化。Base64変換やPDFの表抽出などの新アクションも

                        独自の入力フォームを作成可能に ~デスクトップ版「Power Automate」の2月更新/フロー実行時の通知も強化。Base64変換やPDFの表抽出などの新アクションも
                      • AWSのイベント申込を2秒で終わらせる!1passwordで入力フォームを自動補完してみた | DevelopersIO

                        はじめに CX事業本部IoT事業部の佐藤智樹です。 今回はAWSイベントの申し込みフォームを1passwordで自動化してみます。AWSセミナーは新しいイベントがあるたびにフォームの入力が必要です。所属会社/組織が変わらない限り、変更のない項目もあるため今回はこちらの自動化を実践します。 入力補完の内容 対象となるWebサイトのURLは以下で設定しています。 登録するwebサイトのURL 1passwordに登録する項目を一覧で記載していきます。本来であれば1passwordのexport機能を利用して共有したかったのですが、export機能で抽出されている内容が何なのか公開されていないため、今回は全て表に記載します。以下の表の値を1passwordの「ラベル」と「新規フィールド」に設定してください。また、このidを使えば1password以外でも入力を補完できるはずです。これがおそらく最

                          AWSのイベント申込を2秒で終わらせる!1passwordで入力フォームを自動補完してみた | DevelopersIO
                        • カクヤスのECサイトでクレカ情報漏えいの可能性 入力フォーム最適化SaaSに問題 ユーキャン・富士フイルムに続き

                          酒類の小売業を手掛けるカクヤスは11月1日、ECサイト「カクヤスネットショッピング」について、クレジットカード情報8094件が漏えいした可能性があると発表した。原因は採用していた入力フォーム最適化「フォームアシスト」の脆弱性。不正アクセスにより、同ツールのソースコードが不正に改ざんされたという。 7月19日から29日にかけてECサイトにカード情報を入力した人のクレジットカード番号、有効期限、セキュリティコードが漏えいした可能性がある。不正アクセスは7月28日に発生。カクヤスは29日にツール提供元のショーケース(東京都港区)から報告を受け、フォームアシストの利用を停止した。 10月24日には漏えいした可能性のある件数を特定。ECサイト本体のシステムからの漏えいがなかったことなどを確認できたことから発表に至った。すでに詳細は個人情報保護委員会や所轄警察署に報告済み。カクヤスは対策として、ECサ

                            カクヤスのECサイトでクレカ情報漏えいの可能性 入力フォーム最適化SaaSに問題 ユーキャン・富士フイルムに続き
                          • Androidでクレジットカードの入力フォームの実装を楽にするライブラリを公開しました - Konifar's WIP

                            作りました。簡単に説明を書いておきます。 github.com モチベーション クレジットカードの入力フォームは、ちゃんと作ろうとすると意外とめんどくさいものです。 すでにGitHubには先人がいくつかのライブラリを公開していますが、下記を満たせるものがなかったので自分で作ることにしました。 カードブランドごとのカード番号フォーマットに対応している サポートするカードブランドを設定できる 有効期限の年月の単一フォームに対応している バリデーションのエラーが細かい CustomViewではなくロジックを提供している テストコードがある 以下は補足説明です。使い方はリポジトリの方を見てください。 カードブランドごとのフォーマットとバリデーションに対応 カード番号のフォーマットは4桁 * 4 = 16桁が多いですが、実はカードブランドごとに異なります。 Brand PAN format Secu

                              Androidでクレジットカードの入力フォームの実装を楽にするライブラリを公開しました - Konifar's WIP
                            • 入力フォームに対してIMEの確定を待ってからEnterでなんかするやつ - 私が歌川です

                              入力フォームがあって、Enterを押して入力したテキストをリストに追加したいとしましょう。↓こちらでお試しできます。 ここに追加されるよ こういう感じで実装できます。簡単ですね。 (() => { const list = document.querySelector("#list_1"); const input = document.querySelector("#input_1"); input.addEventListener("keydown", (e) => { if (e.key !== "Enter") { return; } e.preventDefault(); const text = e.target.value; const li = document.createElement("li"); li.textContent = text; list.appendC

                                入力フォームに対してIMEの確定を待ってからEnterでなんかするやつ - 私が歌川です
                              • Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」 - かちびと.net

                                vue-interactive-paycardはVue.jsを使ったクレジットカード情報入力フォームです。上は動作サンプルです クレカのカード会社自動認識も可能で、スムーズでインタラクティブに動作します。カード情報は一部伏せられる親切設計です よく見るUIですが、動きが好みでユーザーにも分かりやすい印象だったので備忘録。MITライセンスの元、ソースコードが公開されています vue-interactive-paycard

                                  Vue.jsを使ったクレジットカード情報入力フォーム・「vue-interactive-paycard」 - かちびと.net
                                • タスク(予定)の入力フォームを改善しました-タブのメモ帳「Tab Notepad」 : 「Tab Notepad」マニュアルと開発日記

                                  「Tab Notepad」の開発日記です。 アプリの特徴や使い方、開発の記録などを更新していきます。

                                    タスク(予定)の入力フォームを改善しました-タブのメモ帳「Tab Notepad」 : 「Tab Notepad」マニュアルと開発日記
                                  • タスクの入力フォームがシュッと出るようになりました-タブのメモ帳「Tab Notepad」 : 「Tab Notepad」マニュアルと開発日記

                                    「Tab Notepad」の開発日記です。 アプリの特徴や使い方、開発の記録などを更新していきます。

                                      タスクの入力フォームがシュッと出るようになりました-タブのメモ帳「Tab Notepad」 : 「Tab Notepad」マニュアルと開発日記
                                    • タスク入力フォームなどのスライド表示が滑らかになりました-タブのメモ帳「Tab Notepad」 : 「Tab Notepad」マニュアルと開発日記

                                      「Tab Notepad」の開発日記です。 アプリの特徴や使い方、開発の記録などを更新していきます。

                                        タスク入力フォームなどのスライド表示が滑らかになりました-タブのメモ帳「Tab Notepad」 : 「Tab Notepad」マニュアルと開発日記
                                      • 入力フォームにおけるUI設計の基本とUXを改善するためのデザインルールとは? - Act.3 Consulting 通信

                                        お問い合わせや資料請求、サインアップからデータの登録まで...フォームのUI設計は、ビジネスの成果を上げるために最も重要な要素の一つであるといえます。 本記事では、入力フォームのUIデザインにおける基本とUXを改善するために必要な20のUI設計ルールについて、ご紹介していきたいと思います。

                                        • 【2023年最新事例付き】入力フォーム作成の際に注意したい12のポイント | えそらLLC UX ブログ

                                          入力フォームを作る上で注意したい12のポイント 1. 可能な限り項目数を減らす 良い例:PayPay(アプリ) – 初回入力に必要な情報がかなり絞られています。 新規登録や申し込みの段階で必ずしも必要でない項目や、わざわざユーザーが入力する必要のない項目は削除しましょう。登録後に別途取得するなどの工夫ができるかもしれません。特に「任意」となる項目はこれに該当する可能性があります。 2. 関連のあるラベルと入力欄はグループ化する 良い例:出前館(サイト) – ラベルは入力欄のすぐ左上に、氏名や住所など関連のある項目は間隔を狭くしてグループに見えるようにしています。 ラベルと入力欄は等間隔に並べず、入力欄のすぐ近くにラベルを設置したり、視覚的にグループであることが分かるようにしましょう。対応する入力欄の特定が困難だと、ユーザーは入力に通常よりも時間を要し、離脱に繋がってしまうこともあります。

                                            【2023年最新事例付き】入力フォーム作成の際に注意したい12のポイント | えそらLLC UX ブログ
                                          • パソコンの自動入力フォームを削除する方法 - 思い立ったら吉日Blog

                                            本日は真面目な方には縁のないブログです みなさん・・・ぶっちゃけ、ブログっていつ、どこで書いてますか? 「そんなん、家のパソコンからに決まってるじゃん!!」 はい!! そんなあなたには今日のブログは無縁・不要となっております・・・。 実はわたくしtuyokiはですね・・・。 仕事中にパソコンをシークレットモードにしてこっそりブログをしたためております・・・(すみませんすみませんすみませんすみません)。 『シークレットモードだから、職場の上司にバレない、バレない♪』 なんて思って毎日はてなブログにログインしてました。 するとある日から大問題が発生したんですよ!! そう!! 自動入力フォームに、はてなのID(私の場合「tuyoki」)が勝手に候補として入力されちゃう問題!! 自動入力フォームって、ネットとか利用してると、会員番号だとか、パスワードだとか、入力しなくてもフォーム入力画面をクリック

                                              パソコンの自動入力フォームを削除する方法 - 思い立ったら吉日Blog
                                            • 「めちゃくちゃ使いにくい」入力フォームを作ってみた。 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

                                              こんにちは、LIGのゴウです。 突然ですが、すごくイラっとする入力フォームってありますよね。そういうのに出会ったときってめっちゃイライラしませんか? 俺はします。 LIGでもお問い合わせフォームをずっと作ってきていますが、使い勝手の良いフォームというのはなかなかノウハウが必要で、非常に奥深いです。 今回はそんな「入力フォーム」に焦点を当てて、逆説的にめちゃくちゃ使いにくいフォームを作ってみようと思っています。そうすることで、なぜそれが使いにくいのか、が見えてくることでしょう。 今回協力していただくのは、5,000フォーム以上のWebサイト改善をしてきた株式会社ショーケースの上級ウェブ解析士である、樫木厚二さん。 普段は、企業の入力フォームの最適化を支援している方なのですが、今回は逆に「めちゃくちゃ使いにくいフォーム」をつくるために頑張っていただきました。なんかすいません。 上級ウェブ解析士

                                                「めちゃくちゃ使いにくい」入力フォームを作ってみた。 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
                                              • 入力フォームにおけるエラーデザイン | ベイジのUIラボ~業務システムとSaaSのUIを考える

                                                ウェブアプリケーションの使い勝手を向上させる上で、入力フォームの操作がスムーズかどうかは、非常に重要なポイントです。 スムーズに入力できないフォームは、ユーザーにたくさんのストレスを与える可能性があります。その中でも、特にストレスとなりやすいのが入力エラーです。 「入力を終えて登録ボタンを押した直後、エラーメッセージが表示されてイライラした」こんな経験は、誰しもあるでしょう。見方を変えれば、入力エラーを制すれば入力フォームの使い勝手を制することができる、といっても過言ではありません。 そもそも、エラーはユーザーに起こさせない仕組みであるのが理想です。つまり、エラーが発生しないUIに工夫したり、エラーを自動的に修正する機能を実装したり、といったことです。 しかし、UIの工夫だけでエラーを完全に回避することは難しいですし、自動化するにも現在のウェブの技術ではまだまだ限界があります。エラーが発生

                                                  入力フォームにおけるエラーデザイン | ベイジのUIラボ~業務システムとSaaSのUIを考える
                                                • 「コメダ珈琲、webの入力フォームすら異常にでかい」→寿限無も安心の名前入力欄

                                                  リンク Wikipedia 寿限無 『寿限無』(じゅげむ)は、落語の代表的な前座噺。長い名前を言い立てる早口言葉で知られる。上方落語では古くは別題を『長名の伜(ながなのせがれ)』という。『長い名の子』タイプの民話と落語『寿限無』は類話である。 生まれた子供がいつまでも元気で長生きできるようにと考えて、とにかく「長い」ものが良いととんでもない名前を付けた、という笑い話。縁起のいい言葉を幾つか紹介され、どれにするか迷った末に全部付けてしまった、という筋の場合もある。 生まれた子供にめでたい名前を付けようとして、お寺の和尚さん(人物が異なる場合も 48 users 195 リンク Wikipedia パブロ・ピカソ パブロ・ルイス・ピカソ(Pablo Ruiz Picasso, 1881年10月25日 - 1973年4月8日)は、スペイン・マラガ生まれの、フランスで制作活動をおこなった画家である

                                                    「コメダ珈琲、webの入力フォームすら異常にでかい」→寿限無も安心の名前入力欄
                                                  • 日付入力フォームをinput type=”date”でカスタマイズ【IEにも対応】 | 東京のホームページ制作 / WEB制作会社 BRISK

                                                    「日付入力フォームを作ってほしい」 あなたはそう言われたら、どうやって実装しますか? HTML5になって追加された「input[type=date]」を使うでしょうか。それともプラグインを使うのでしょうか。 どちらにも一長一短があり、設置するサイトの目的に応じて柔軟に対応することが求められます。 だがしかし!この日付入力フォームのカスタマイズはなかなか曲者でして、苦戦している方も少なくないでしょう。 Chromeではうまく表示されても、IEでうまくいなかったり、ちょっと見た目をいじったら動かなくなってしまったり。 今回はそんな悩める日付入力難民の皆様のために、日付入力フォームをどんな端末から見ても同じ見た目・動きになるようカスタマイズする方法について書きました。少しでもお役に立てればなによりでございます。 ※結論から言うと「日付入力フォームのカスタマイズなら、プラグイン(datepicke

                                                      日付入力フォームをinput type=”date”でカスタマイズ【IEにも対応】 | 東京のホームページ制作 / WEB制作会社 BRISK
                                                    • 【excel】vba初心者向け『入力フォーム』の作り方"オブジェクト作成編"

                                                      2020/01/23 (更新日: 2020/06/04) 【excel】vba初心者向け『入力フォーム』の作り方”オブジェクト作成編” ExcelVBA こんにちは、Fujiya(@fujiya_xyz)です。 今回は、エクセルの「VBAプログラミングをやってみたい人向け」に、実用的な自動化ツールの作り方を説明しています。 別の記事でも書きましたが、VBAを習得する上でメチャクチャ大事なのは自分で作ってみること。 実は僕も1番最初に作ったのは入力自動化ツールで、入門用の練習プログラムとしては最適だと考えています。 僕はエンジニアやプログラマーではないのでプロのセオリーからは外れていますが、初めての人にもわかりやすく作っており、複雑なコードは使用しません。そして、出来るだけ専門用語は使わずに、説明を入れつつツールを作っていきます。 今回はユーザーーフォームの”見た目”を作ることに特化した内容

                                                        【excel】vba初心者向け『入力フォーム』の作り方"オブジェクト作成編"
                                                      • 入力フォーム最適化(EFO)改善のチェックリスト~営業も安心の「全体最適」のポイント~ | メソッド | 才流

                                                        EFO(入力フォーム最適化)とは EFO(Entry Form Optimisation)とは、入力フォーム最適化のこと。Webサイトの入力フォームは、問い合わせや資料請求、会員登録、無料トライアルなどさまざまな目的で設置されています。入力フォームをユーザーが使いやすくなるように改善する施策のことをEFOと呼びます。 BtoBマーケティングにおけるEFOの重要性EFOは、コンバージョン直前の離脱を防ぐ施策なので、短期間で成果が上がりやすい改善策の1つです。 一般的に、BtoBでは入力フォームの通過率は25〜30%が最適化の目安です。裏を返せば、75%以上のユーザーは申し込むつもりで入力フォームを閲覧したものの、離脱してしまうわけです。目の前の魚を逃しているようで、もったいないですね。 ※入力フォームの通過率:フォーム経由のコンバージョン数をフォーム到達セッション数(訪問者数)で割った数値の

                                                          入力フォーム最適化(EFO)改善のチェックリスト~営業も安心の「全体最適」のポイント~ | メソッド | 才流
                                                        • 【React】複数ページに分割し進捗を表示する入力フォームの設計

                                                          概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ

                                                            【React】複数ページに分割し進捗を表示する入力フォームの設計
                                                          • ユーザー目線に配慮した入力フォームのデザインを考える〜より良いフォームにするために|chot Inc. デザイナーユニット

                                                            こんにちは、ちょっと株式会社の久保田です。 Webサイトを開発する工程の中に、お問い合わせやエントリーなどを受け付ける「入力フォーム」を設置することがあります。 一見するとテンプレ的に単純作業に思われがちですが、デザイナーが考えるポイントは意外と多く、必要に応じて時間を掛けて作り込むものだったりします。 そんな入力フォームを作る際に意識しておきたいポイントを、自身への教訓も込めてまとめてみました。 視点の移動とグループを意識したレイアウトスムーズに視点移動させる並べ方まずは大枠のレイアウト。ザッとテーブルのように組んでしまいがち。 サクッと5分くらいで組んじゃうラフレイアウトこれでも大きな問題ありませんが、少し踏みとどまって考えてみます。 改善したいのはラベル(項目名)と入力欄の位置関係。 表組のように横並びの関係にするのではなくて縦並びの関係にしてみます。 ラベルと入力欄が横並びになって

                                                              ユーザー目線に配慮した入力フォームのデザインを考える〜より良いフォームにするために|chot Inc. デザイナーユニット
                                                            • 【エクセル】vba初心者向け『入力フォーム』の作り方”コード記述編”

                                                              2020/01/24 (更新日: 2020/06/04) 【エクセル】vba初心者向け『入力フォーム』の作り方”コード記述編” ExcelVBA こんにちは、Fujiya(@fujiya_xyz)です。 この記事では”デジタルDIY”ということで、エクセルの「VBAプログラミングをやってみたい人向け」に、実用的な自動化ツールの作り方を説明しています。 そして、今回は前回作業『オブジェクト作成編』の続きとなっています。 オブジェクト編で作った入力フォームですが、現状は全く作動しない状態です。 プログラムコードを記述することで、自分の思った通りの動作させます。 「プログラミング」というと、文字がたくさん並んでいるイメージの人が多いと思いますが、この文字は「命令文」です。 例えば、ボタンを押したらA1のセルに「あ」と入力する。 この動作を行うようにコードを使って命令をしていきます。 今回作成する

                                                                【エクセル】vba初心者向け『入力フォーム』の作り方”コード記述編”
                                                              • 3大やめて欲しい入力フォーム

                                                                メールアドレス入力欄でiPhone/Androidのキーボードがemail状態にならずに@とか.の入力にイラッとするパスワード入力欄が英数字限定・文字数が8文字限定とかになっててChromeとかの自動パスワードが使えない独自のパスワード入力フォームになってて表示させながら入力ができない郵便番号入れるのに住所が補完されない 住所の番地等が全角数字限定でスマホからどうやって入力して良いかわからない 読み仮名入力が半角カナ限定でスマホからどうやって入力して良いかわからない 住所の入力欄にやたら短い文字数制限がかかっていてマンション名が長くて入らないチェックボックスが「メールを希望しない」にチェックになってて否定の否定は理解できないことを理解してないクレカ入力欄が4つに分割されてて自動入力したら最初のところに全部入力される 「送信」を押さないと未入力とか異常値入力を教えてくれないし元の画面に戻ると

                                                                  3大やめて欲しい入力フォーム
                                                                • 入力フォームで一番かわいい項目

                                                                  「カナ」 なごむ

                                                                    入力フォームで一番かわいい項目
                                                                  • 「イケてる入力フォームができた」…って全ての悪を詰め込んだ最悪の入力フォームができました「この世の終わり」

                                                                    イライライライラ

                                                                      「イケてる入力フォームができた」…って全ての悪を詰め込んだ最悪の入力フォームができました「この世の終わり」
                                                                    • 第16回 入力フォームを1画面にする? 分割する? | gihyo.jp

                                                                      サービス開始時のユーザー登録フロー、クチコミやレビューといったユーザー投稿などユーザーに何か情報入力してもらう際、入力してもらう項目が増え、画面が長くなってしまうことがあります。そんな場合、長くなっても分割せずに1画面にする(図1a)のか、それとも画面を分割して複数画面にする(図1b)のか、その構成がユーザー体験に大きく影響してしまう場合があります。どちらにするべきか悩んだ経験がある方が多いのではないでしょうか。 図1 同じ項目で、分割せず1画面にした場合(a)と、分割して複数画面にした場合(b)の違い 今回はどういったときに分割するか/しないかの考え方の事例をもとに、私の判断軸を紹介します。この記事を読んだあと、みなさんの迷いが少しでも解消しやすくなり、ユーザーにとってスムーズな設計ができるようになればと思っています。 分割するかしないかの基準 分割する/しないどちらが良いかは一概には言

                                                                        第16回 入力フォームを1画面にする? 分割する? | gihyo.jp
                                                                      • 池田 泰延 on Twitter: "入力フォームを使いやすくする、HTMLの書き方 https://t.co/d3jEMFTYhG"

                                                                        入力フォームを使いやすくする、HTMLの書き方 https://t.co/d3jEMFTYhG

                                                                          池田 泰延 on Twitter: "入力フォームを使いやすくする、HTMLの書き方 https://t.co/d3jEMFTYhG"
                                                                        • 広告効率を最大化する「入力フォーム最適化」 3つの最新トレンドとは? | 【レポート】デジタルマーケターズサミット2021 Summer

                                                                          コンバージョン改善を目的として、入力フォームの最適化を図るEFO(Entry Form Optimization)ツールが注目されている。「デジタルマーケターズサミット 2021 Summer」に登壇したシェアNo.1*1のEFOツールを提供するショーケースの上級ウェブ解析士*2、樫木厚二氏は、そのトレンドや考え方、分析・改善の勘所などについて、EFOツール「フォームアシスト」のコンサルタントとしての経験や事例を踏まえつつ解説した。 *1 出典:ITR「ITR Market View:メール/Webマーケティング市場2021」 *2 WACA認定 上級ウェブ解析士資格 入力フォームを最適化する「EFOツール」でコンバージョン率を向上させるWeb施策における集客からコンバージョンまでの経路を考えたとき、入力フォームはコンバージョンの直前に位置する。つまり、申し込み意欲が高いユーザーが集まるペ

                                                                            広告効率を最大化する「入力フォーム最適化」 3つの最新トレンドとは? | 【レポート】デジタルマーケターズサミット2021 Summer
                                                                          • JavaScript入力コントロール「InputManJS」にBootstrapを組み合わせてより便利な入力フォームを作ろう

                                                                            CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

                                                                              JavaScript入力コントロール「InputManJS」にBootstrapを組み合わせてより便利な入力フォームを作ろう
                                                                            • 入力フォーム型のアダプティブ カードをTeamsで使ってみよう

                                                                              こんにちは、Microsoft MVP(Azure / Business Applications)の松本典子です。 前回第22回の記事では、グラフィカルに情報を表示することが可能な「アダプティブ カード」の作り方と、Power Automateから送信するアクションについてご紹介しました。 今回は、Power Automateのトリガーとしてアダプティブ カードを利用する方法をご紹介します。 1. ワークフローの全体図 今回はMicrosoft Teamsコネクタのトリガーを利用して、Teams上で入力フォーム形式のアダプティブ カードを表示し、そこに入力されたデータをメール送信するというシンプルなワークフローを作成します。 なお後述するとおり、TeamsからPower Automateのトリガーを実行するために、Teamsに「Workflows」アプリを追加する必要があります。また前回

                                                                                入力フォーム型のアダプティブ カードをTeamsで使ってみよう
                                                                              • vue.jsでマルチステップの入力フォーム作成(基礎編) | アールエフェクト

                                                                                入力フォームには1つのページで完了するシンプルなものから複数のページを介して完了するものまでいろいろな形があります。本文書ではvue.jsを使ってマルチステップフォームを作成するための手順を説明しています。 各ステップにバリデーションが入っていないため実用的ではありませんが、マルチステップフォームを作る上での基本的は考え方とコンポーネントの理解を深めることができます。 作成するマルチステップフォームの概要 作成するフォームは4つのステップに別れ、1つのステップに1つのコンポーネントが対応します。最後のステップは確認画面のため入力フォームがあるのは3つのステップです。 1つ目のステップの入力フォームでは名前(firstName, lastName)を入力、2つ目のステップの入力フォームではEmail、電話番号を入力、3つ目は誕生日を入力するシンプルなものです。4つ目は確認画面なので1〜3で入

                                                                                  vue.jsでマルチステップの入力フォーム作成(基礎編) | アールエフェクト
                                                                                • ユーザーに優しい入力フォームを作ろう! Contact Form 7編 | onebitious's BLOG

                                                                                  投稿日:2021年9月13日 先日のブログ  で紹介した、郵便番号から都道府県と住所を自動入力するjQuery ajaxzip3  と、ふりがなを自動入力するautoKana  をContact Form 7 で作成したフォームに実装したいと思います。 ▲Contact Form 7 インストールして有効化します。 ▲有効化するとメニューにお問い合わせが表示されるので、新規追加を選択します。 ▲タイトル名を任意につけ、ショートコードを利用してフォームの項目を作ります。 青地箇所のショートコードを固定ページにペーストし、表示設定でホームページとして設定します。 今回はコーディングも含め下記のような記述にしました。 <span style="color:red">※</span>は必須 <label> 氏名<span style="color:red">※</span> [text* your