人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
社内の仕様質問を激減させた話｜takashi
こんにちは。ダイニーのPM @takashi です。 みなさんは、社内からのプロダクト仕様質問などが多くて困っているなどはないでしょうか？ ダイニーでは、日々、顧客からの質問も含めて、プロダクトに関する詳細な仕様質問や、データ不備や不具合の調査依頼など様々な質問が寄せられています。 また、ダイニーは、導入店舗数が増えたり、新入社員が増えた時、営業が商談・サクセス活動のために顧客と接触を増やした時など、事業が大きくなるほど質問が増える構造となっており、対応が大変になっています。 基本的には、PMが回答する仕組みにしているのですが、件数が多く時間を取られてしまい、本来の企画等に割ける時間が減ってしまっている課題があったので、改善に取り組みました。 前提ダイニーでは、Slackに気軽にプロダクト関連の質問をできるチャンネルがあり、Slack Workflow を使って、フォームから質問できるよう
よくある問い合わせフォームを提供していたら、知らぬ間にスパムメールの加害者になっていた話です エンジニアが知っておくべき メール送信・運用ノウハウ、メールの認証技術やセキュリティについて投稿しよう！ by blastengine Advent Calendar 2024 の8日目です。 要件 お問い合わせ内容の他、名前や所属、メールアドレスの入力が必須 問い合わせ完了後、入力されたメールアドレス宛に自動応答メールを送る 自動応答メールには入力された問い合わせ内容を記載する 同様に指定したサービス担当者宛にも問い合わせ通知メールを送る 以上の要件で作成しました。 実現方法 メール送信にはAWS SESを使用しました。問い合わせ確定ボタンを押下後にAWS Lambdaにリクエストを飛ばし、SESと連携してメールを送信する流れです。 実装後のこと 実装後、しばらく正常に稼働していました。しかし、
[備忘録] PowerShellでExcelのようなグリッド画面を作成してみた - Qiita
Add-Type -AssemblyName System.Windows.Forms Add-Type -AssemblyName System.Drawing # フォームの作成 $form = New-Object System.Windows.Forms.Form $form.Text = "PowerShell データグリッド" $form.Size = New-Object System.Drawing.Size(800, 600) $form.StartPosition = "CenterScreen" # DataGridViewの作成 $dataGridView = New-Object System.Windows.Forms.DataGridView $dataGridView.Size = New-Object System.Drawing.Size(760, 52
![[備忘録] PowerShellでExcelのようなグリッド画面を作成してみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/db071715b5a5a4fca1cf11d0aaf09950f0f5607a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYyNjQ4MDY5JTJGMGU0YTU4OTYzNzI5ZTIyYjkwODM5NDY4YjkzYWNkMGNmNWM4YWFhOCUyRmxhcmdlLnBuZyUzRjE2NTE1ODc2MzQ_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZmQxZmIxNGYyM2JiYTE1NTZmMzQ4YmYxZGE3YzFmMjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D4e21d6c99ffd21130be46a8d859f162c%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU1JTgyJTk5JUU1JUJGJTk4JUU5JThDJUIyJTVEJTIwUG93ZXJTaGVsbCVFMyU4MSVBN0V4Y2VsJUUzJTgxJUFFJUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFBJUUzJTgyJUIwJUUzJTgzJUFBJUUzJTgzJTgzJUUzJTgzJTg5JUU3JTk0JUJCJUU5JTlEJUEyJUUzJTgyJTkyJUU0JUJEJTlDJUU2JTg4JTkwJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZTNkOGNmMmZlYjZhZDY0N2QxZjc4MTQ5OGFkNDA0YTM%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBUYWRhdGFrYV9UYWthaGFzaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz01YWM4MmFhMTM4Y2ZkZDI1MzAyNzNkMmI1YzJiNDBhMQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3De1a89f4eec75abb221fa7053884807d8)
これは朗報！ ついにCSSでif else文が使えるようになります、Chrome 137で新しく追加された7個のCSSの機能
Chrome 137で追加された、CSSの新しい機能7個を紹介します。 今回のアップデートで目玉は、if else文の条件付きでCSSの値を設定できるif()関数がついに使用できるようになりました。また、CSS GridやFleboxで見た目の順序とtabキーの順序が異なるのを制御できる新しいプロパティもサポートされるなど、Web制作者は要チェックです！ ちなみに、先日紹介したCSSのカスタム変数はChrome 139（7月頃）に実装される予定です。 New in Chrome 137 Chrome 137 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに if else文の条件付きでCSSの値を設定できるif()関数 reading-flowとreading-order
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
SaaS の管理画面を開発していると新規作成画面と編集画面を実装することがよくあります。 これらの画面は一見似ているので共通のコンポーネントで実装できそうですが、意外と多くの違いがあります。 この記事では新規作成画面と編集画面を実装するときに気をつけていることをまとめてみます。 コンポーネント設計について シンプルな例でも新規作成画面と編集画面には違いがありました。 これらを1つの共通コンポーネントで実装するとコンポーネント内でIF分岐が発生し可読性が下がったり、再利用性が低くなったりします。 では両者を完全に別コンポーネントで実装したら良いのかというとそれも微妙です。新規作成、編集の入力項目は仕様的に同じであり、バリデーションも同じであることが多いです。 ここを別に実装してしまうと仕様が変わったときに変更する箇所が多くなってしまいます。 なのでフォーム部分(入力とバリデーション)は共通化
![[React] 新規作成画面と編集画面の実装で気をつけていること](https://cdn-ak-scissors.b.st-hatena.com/image/square/432395e3512787cdd1c8db72d6caebe5d18361c3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--NYsUL-XL--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%25255D%252520%2525E6%252596%2525B0%2525E8%2525A6%25258F%2525E4%2525BD%25259C%2525E6%252588%252590%2525E7%252594%2525BB%2525E9%25259D%2525A2%2525E3%252581%2525A8%2525E7%2525B7%2525A8%2525E9%25259B%252586%2525E7%252594%2525BB%2525E9%25259D%2525A2%2525E3%252581%2525AE%2525E5%2525AE%25259F%2525E8%2525A3%252585%2525E3%252581%2525A7%2525E6%2525B0%252597%2525E3%252582%252592%2525E3%252581%2525A4%2525E3%252581%252591%2525E3%252581%2525A6%2525E3%252581%252584%2525E3%252582%25258B%2525E3%252581%252593%2525E3%252581%2525A8%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3Akult%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhhNDQwNmNlMGUuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3AAI%252520Shift%252520Tech%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzhkZmY1MjcxNzUuanBlZw%3D%3D%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
フォームのテキストエリアにCSSのfield-sizingとlh単位を使用すると便利、入力された文字量に合わせてサイズを自動変更
CSSはどんどん便利になっていますね！ これまではJavaScriptを使用しないとできなかったことがCSSで簡単に実装できるようになっています。 CSSのfield-sizing: content;でフォームのテキストエリアのサイズを入力された文字量に合わせて自動変更したり、テキストエリアの高さを行の高さで設定するlh単位を使ったCSSのテクニックを紹介します。 フォームのテキストエリアに使用するCSSのテクニックは、2つあります。 field-sizing: content;で、コンテンツに合わせてテキストエリアを自動的にサイズ変更する。 lh単位で、テキストエリアの高さを行の高さで設定する。 HTMLは、textareaを用意するだけです。
なぜ？ クレカの「セキュリティコード」まで漏洩する事件が相次ぐ（山口健太） - エキスパート - Yahoo!ニュース
最近、個人情報が漏洩する事件が相次いでいる中で、クレジットカードの「セキュリティコード」まで漏洩していることに驚きの声が上がっています。 本来、セキュリティコードはシステム上に保存していないはずですが、なぜそれが漏洩してしまうのでしょうか。を解説します。 攻撃されたのはデータベースではなく入力フォームか最近のオンラインストアでは、3桁または4桁のセキュリティコードはもちろん、クレジットカード情報自体を自社で取り扱わない仕組みを導入するところが増えています。 しかし、今回9万件超の流出が話題となっているタリーズは、セキュリティコードを含む5万件超のクレジットカード情報が漏洩した可能性があると説明しています。 (3)クレジットカード情報漏洩の可能性があるお客様 2021年7月20日～2024年5月20日の期間中に「タリーズ オンラインストア」においてクレジットカード決済をされたお客様52,95
2025年3月にリリースされたChrome 134、Microsoft Edge 134では、<select>要素をカスタマイズできるようになりました。今までは<select>要素で表現できる見た目は限られており、やむをえず別のタグを組み合わせて独自の実装をしていた方も多いのではないでしょうか？ 独自の実装をした場合、アクセシビリティーやキーボード操作に対しても独自の対応が必要だったり、対応が不十分になる場合もあります。<select>要素をカスタマイズできるようになれば、こうした課題を解決しつつ自由なデザインやレイアウトを実現できるようになります。 この記事では、カスタマイズできるようになった<select>要素でどんなことができるのかを紹介します！（※本記事の作例はChrome 134、Microsoft Edge 134以上で閲覧ください）。 カスタマイズに必須のCSS まずはカスタ
Brave groupとその子会社が運営するVTuberオーディション企画で、応募フォームとして使っていたGoogleフォームの設定不備により、応募者の1万人以上の個人情報が漏えいした問題をめぐり、同社は7月31日、原因の詳細を発表した。 応募期間中にGoogleフォームで予告のない仕様変更があり、応募者が回答を送る「回答用URL」から、応募者の回答内容を閲覧できる「編集用URL」を特定できる手法が存在していた可能性が高いことが分かったという。この手法は既に再現できなくなっている。 漏えいが起きたのは、「ぶいすぽっ！」など3つのVTuberオーディション企画。6月4日から6月25日にかけ、応募者の氏名や電話番号などの個人情報累計約1万件が漏えいした可能性がある。 原因は、応募者の回答を閲覧できるGoogleフォームの「編集URL」が、「URLを知っている全員が閲覧可能」に設定されていたこと
はじめに HERP Careersの開発をしている松山です。 今回は応募フォームの実装で、React Hook FormからuseReducerに移行した話をしてみたいと思います。 フォームライブラリの選定って結構悩みどころだと思うのですが、今回の事例が参考になれば嬉しいです。 フォームライブラリの技術選定 検討対象として考えていたのは以下の2つでした。 React Hook Form useReducer（Reactの標準機能） Formikという選択肢もあったのですが、React Hook Formと使い方が似ていることと、困った時に記事が多い方が助かるので今回はFormikは選ばずにライブラリを使うならReact Hook Form、そうでないならuseReducerを検討対象にしました。 技術選定の背景と理由 プロジェクトの概要 実装するフォームの概要はこんな感じでした。 採用の応
皆さんこんにちは。今回は、最近筆者が遭遇した、<label>で<button>を囲んでいるときにclickイベントが2回発火することがある問題について解説します。 さっそくですが、こちらのCodePenをご覧ください。 ここでは、0と書かれたボタンが表示されています。このボタンは1回クリックすると数字が1増えるように実装されています。 しかし、ボタンに表示されている数字をクリックすると、数字が2増えてしまいます。これは、clickイベントが2回発火しているためです。それ以外の部分（ボタンの端や、ラベル）をクリックした場合は数字が1増えます。 実装のHTMLとJavaScriptは以下のとおりです。 <p>数字をクリックするとonClickが2回発火する！！！</p> <div> <label> ラベルのテスト <button type="button"></button> </label>
はじめに みなさん、フォームライブラリは何を使っていますか？ React Hook Formがフォームの一時代を築いた後に、server actionに対応しているConformが登場したり、様々なフォームライブラリがあると思いますが、今回は最近v1になったTanStack Formについてご紹介します。 TanStack Formは、各入力フィールドを独立したコンポーネントとして提供します。これにより、フォーム全体を再描画するのではなく、変更が生じた特定のフィールドのみを選択的に再レンダリングすることが可能となり、パフォーマンスの最適化を実現しています。 TanStack Formの推しポイント👍 まずは、TanStack Formの推しポイントをいくつかご紹介します。 強力な型サポート TanStack系のライブラリ全般の特徴になりますが、TypeScriptでできているため型安全・
更新系と状態
2025-04-23 Exploring State - LayerX Web Frontend Night
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
https://layerx.connpass.com/event/348773/
最近いろんなプロジェクトをNext.js v14からv15にアップデート作業している@zaruです、こんにちは。 Next.js v15の大きな変更点はリリースノートなどで発表されていますし、アップグレードをサポートする codemod もあり、大半のプロジェクトは npx @next/codemod@canary upgrade latest を実行するだけで自動で修正されます。 しかし、Next.js v15のリリースノートには書かれていない（と思う）のですが、Next.js v15にはフォームをサブミットすると、フォーム内容がリセットされるように変更されています。これはv14とは異なる挙動です。 「フォームをサブミットすると、フォーム内容がリセットされる」とテキストで書くと、それはそうでしょう。なに当たり前のこと言ってるんだ？となるかもしれません。 実際に挙動を確認したほうが早いので
HTMLのフォームは、送信ボタン（<button type="submit">）をクリックするだけでなく、暗黙の送信手段による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）でEnterキーを押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。 この記事では、理由はともかく、フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい人に向けてその方法を伝授します。 TL;DR 暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。 解説 Enterキーのような方法による暗黙の送信は、実際には「そのフォームのdefault buttonに対してclickイベントを発生させる」という機構
Notionに新機能「Form」が追加されました。予想よりも高機能で、入力された内容のデータ管理や連携がノーコーディングにて色々と可能です。 Notion新機能のフォームがプライベートアカウントのワークスペースにて有効になっていたので試してみました。 埋め込み方 /formとタイプしましょう。 新規データベースの1viewとしてフォームエディタが表示されます。 フォームの使い方 入力してほしい人へ専用のURLを渡します。アクセス自体も制限でき、匿名によるポスト受付も可能です。入力されたデータはデータベースに記録されます。 このURLのポイントはアクセス時には完全に独立したものとなっているところです。アクセスしてみると、いずれかのページの子階層とはなっていないことがわかります。 ちなみに、/embedで埋め込むと以下の様にリンクとなり、一度アクセス遷移が必要です。 フォームの独自機能 1つの
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
WebサイトやスマホアプリのUIで日にちや時間、年の範囲の書式を自動的に短く、読みやすく、理解しやすく表示するJavaScriptのライブラリを紹介します。 このライブラリを使用すれば、シンプルで一貫性のある書式で表示できます。 little-date -GitHub little-dateの特徴 日時範囲のフォーマット little-dateの使い方 little-dateの特徴 WebサイトやスマホアプリのUIで日時範囲を表示するときに、日時の範囲が長すぎたり、繰り返しが多かったりして、読みにくいことがよくあります。little-dateは日時範囲を短く、読みやすく、理解しやすくすることでこの問題を解決します。 たとえば、下記をご覧ください。 // よく見かける長いフォーマット console.log(`${from.toLocaleString()} - ${to.toLocaleS
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data The trojanized jQuery attack has been spread on npm, GitHub and elsewhere since May. A trojanized version of jQuery has been spreading on the npm JavaScript package manager, GitHub and elsewhere, for use in a jQuery attack, security researchers have discovered. Phylum researchers said they have been monitoring the “persistent supply chai
チェックボックスは、HTML・CSSで独自にデザインすると手間のかかる要素です。ほとんどの場合は、<input type="checkbox" />を利用することになりますが、以下の課題があります。 標準のinputタグはブラウザごとに見た目が異なり、利用できるCSSプロパティにばらつきがある。 実装方法が複数存在し、どの方法が適しているか判断しにくい。 チェックボックスには複数の状態が存在し、用意すべき見た目がわかりにくい。 慣れていない方にとっては、判断に迷いやすい要素です。この記事では、独自にデザインされたチェックボックスの作り方を4つのポイントに分けて紹介します。 本記事で紹介すること チェックボックスの独自のデザインを、シンプルなHTML構造で実装する方法 標準のinputタグの利点を落とさず、独自のデザインを適用する方法 コピペで使えるチェックボックスの作例 シンプルなチェック
ラジオボタンとラベルの間にクリックしても反応しない謎スペースができてしまったことはありませんか？ 通常であれば、フォームコントロールとラベルの関連付けが機能し、クリックするとラジオボタンが選択されますが、謎スペースは無反応です。なぜ謎スペースができてしまったのか、そしてこの問題を解決する方法を紹介します。 Sanding UI by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ラジオボタンとラベルの間にある謎スペース はじめに UIを実装する時に私が好む方法の一つは、何かを構築し、何度もあちこちをクリックし、微調整を加え、さらにクリックして、微調整を加え、さらにクリックしてといったことを繰り返し、最終的に完成したと判断するまで続けることです。 このクリックするというのが重要な部分です。ページ
Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
EFOとは？問い合わせフォームの成果を高める改善策12選 | マーケティング | ブログ | 東京のWeb制作会社・ホームページ制作｜QUOITWORKS Inc.（株式会社クオートワークス）
クオートワークスのブログ 東京のWeb制作会社 株式会社クオートワークスのブログです。ここではWeb制作におけるノウハウやナレッジ、ビジネスに関する覚書などまとめて発信しております。 「お問い合わせ数が一向に増えない。。。」 「お問い合わせフォームまで到達しているのに、離脱されてしまう。。。」 「お問い合わせフォームの入力内容に不備が多い。。。」 このような悩みはありませんか？ Webサイトの運営を行う中で、よく直面する問題かと思います。 しかし、これらの問題の多くはフォームの最適化（EFO：Entry Form Optimization）によって改善することができます！ この記事では、フォームの離脱を少しでも減らしコンバージョンを増やすために気をつけるべきことと、具体的な改善方法を12個でまとめました。 1. 入力項目数は最小限にする フォーム設計でよく見られる課題は、不必要に入力項目が
If you want to automate actions on a website, like repeatedly fill out a form, you normally can't do it with AI apps like Cursor or Claude because they don't have access to a web browser. With Browser MCP, you can connect AI apps to your browser so they can automate tasks on your behalf.
このたび、法人向けWebサイト制作CMS「はてなCMS」に、Webサイト上でのお問い合わせや資料請求などを簡単に実現できるフォーム機能を追加しました。 はてなCMSをご利用のお客様は、管理画面の左メニューから「フォーム」を選択し、編集したいコンテンツ領域にドラッグ＆ドロップするだけで、様々な種類の入力フィールドを持つフォームを簡単に追加できます。 フォーム機能の概要 コンテンツからのフォームパーツ配置 左メニューの「フォーム」から、必要なフォームパーツを直感的にコンテンツへ配置できます。 豊富なフィールドの種類 テキスト、メールアドレス、電話番号、日付、ドロップダウン、チェックボックスなど、様々な入力形式に対応しています。 フィールドの詳細設定 各フィールドに対して、ラベル名、プレースホルダー、必須項目の設定などが可能です。 フォームの動作設定 送信先メールアドレス、送信後のリダイレクトU
クイックリンク 仕様 | 説明 ショート動画が好きですか？ Wes Bos と Jhey の Twitter には、field-sizing を紹介する優れた動画がそれぞれあります。 フィールドのサイズ設定の影響を受ける要素 以下に、field-sizing が動作する <form> 要素と、各要素に与える影響の概要を示します。 <textarea> 入力は min-inline-size に縮小されるか、プレースホルダに収まるように縮小されます。 ユーザーが入力すると、入力はインライン方向に最大インライン サイズに達するまで拡大します。この時点でテキストが折り返され、入力のブロックサイズが新しい行に収まるように拡大します。 <select>、nd <select multiple> select 要素は、選択したオプションに合わせて縮小されます。 multiple 属性を持つセレクトは、
GitHub - origin-space/originui: Origin UI is an extensive collection of copy-and-paste components for quickly building application UIs. Powered by Tailwind CSS and React.
Origin UI is designed to integrate seamlessly with Next.js projects, but the components are also compatible with any React-based project. The components follow shadcn conventions, so they'll feel familiar to anyone who has used shadcn before. 1. Set up the required files: Copy all .tsx files from Origin UI's registry/default/ui folder to your project's components/ui folder. Copy utils.ts from Orig
Next.js + React Hook Form + バニラPHPでお問い合わせメールを送る - フリーランスのNK STUDIO 備忘録
はじめに Next.js（React）でフロント側のフォーム作成といえば、React Hook Formが定番です。ではメールを送信するバックエンド側はどうでしょうか。 従来のMPA（Multiple Page Application）※１で構築したサイトであれば、入力画面からPHP等で作成し、確認画面、完了画面とセッションで値を保持して、最終的にはsendmailもしくはSMTP接続にてメール送信という流れでした。 Next.js（React）のSPA(Single Page Application)※2で構築されたお問い合わせフォームの事例では、SendGridやEmailJS、MicroCMSと連携する方法がなどが出てきます。Vercelとsendgridの組み合わせも定番ですね。 企業によっては、外部サービスの利用にはセキュリティの関係で安易に採用できないという場合があるでしょう。
CSSの疑似クラス「:has()」がモダンブラウザで使えるようになり、今までJavaScriptを使わないと実装できなかったようなものでも、CSSだけで実現できる幅が広がりました。 そんなCSSの「:has()」を使って、お問い合わせページなどでよく見かける、利用規約など個人情報の同意チェックボックスのチェックの有無で送信ボタンの活性（押せる状態）と非活性（押せない状態）を切り替える動作を、JavaScriptを使わずに実装する実験をしてみたので紹介してみます。 :has()を使ってCSSだけで同意チェックボタンを実装 まずは、JavaScriptを使わずにCSSの疑似要素「:has()」を使って、同意チェックボックスのチェック有無によって、ボタンの活性／非活性を切り替える動作サンプルです。 See the Pen CSS only Agree Check by BLACKFLAG (@B
Authors Alexander Petros (contact@alexpetros.com) Carson Gross (carson@bigsky.software) Date Created August 17, 2024 Last Updated November 10, 2024 Issue Tracker WHATWG Issue #3577 Status Published Table of Contents Summary A proposal for adding PUT, PATCH, and DELETE support to HTML forms. Proposal 1/3 in the Triptych Proposals. Goals PUT, PATCH, and DELETE support in forms should: be the path of
このように、TanStack Form は「一度でも編集されたら isDirty = true」という履歴型の判定を採用しています。 ただし、TanStack Form のコミュニティからは「現在値 ≠ 初期値」のような差分型の判定も求められており、そのため今後は「isDefaultValue」の導入が進められています。これにより、将来的には履歴型と差分型の両方のアプローチを柔軟に使い分けられるようになる予定です。こちらに関しては後述します。 なぜ TanStack Form は React Hook Form と異なる Dirty 判定を採用したのか？ TanStack Form が後発のライブラリでありながら、React Hook Form とは異なる「履歴型」の Dirty 判定を採用しているのには、いくつか理由があると考えられます。 まず、ユーザーが実際にフィールドを操作したかどう
フォームはEnterキーで送信できるようにする（ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目） | Ginpen.com
ちょっと良いUIおれおれAdvent Calendar 2024 – 11日目 普通にフォームをマークアップすれば Enter キーで送信できるようになるんですが、なんかそうなってない場合があります。しときましょう。 デモ： https://codepen.io/ginpei/pen/MYgjgXP <form> で括る Enter キーで送れるようにするには、単に <form> 要素で括るだけです。簡単です。やらない理由がない。 JavaScript からは submit イベントを使う ボタンのクリックではなくフォーム送信 submit のイベントを使います。ボタンはイベント管理する必要ありません。 JS で全部管理する場合は HTML レベルでの送信を event.preventDefault() で止めます。 逆に送信しないボタンは type="button" にする フォーム内の
Surveyrはアンケートや投票フォームなどをドラッグ&ドロップで簡単に生成できるオープンソースのWebアプリです。PHP + JavaScriptで書かれています。開発にあたりLeaf PHP及びSurvey.jsが採用されています。 サーベイ（アンケート）や投票、クイズ、カスタマーフィードバックなどをD&Dで生成できる、というよくあるフォームビルダーです。テキストフィールドやチェックボックス、ドロップダウンなどのフォーム項目を組み合わせて簡単にフォームを生成可能、テンプレートの登録、ビルトインされた解析機能とデータのビジュアライズ、CSVやJSONなどでデータをエクスポート可能、などなど機能も十分用意されています。 まだ開発段階のアルファ版でバグも確認されているようで実用段階ではありませんが、同時にWebhookで他のプラットフォームなどにシームレスに統合できる機能なども開発中だそうで
静的サイトでいいのにお問い合わせフォームの実装ができないからWordPressを利用している人は多いと思います。 WordPressプラグインのContact Form 7あたりが便利で、専用のコードさえ理解していれば実装可能なので、初心者でも比較的かんたんに実装できます。 ただ、WordPressでの実装となると、本体のインストールや各種プラグインの設定、セキュリティ対策をおこなう必要があるため、その分工数がかかってしまいます。 だからといって、WordPressを使用せず、静的サイトに独自で問い合わせフォームを実装するとなると、バックエンドのコードやサーバー設定が必要になり、専門的な知識が必要です。 扱いが難しい問い合わせフォームを手軽かつセキュアに実装できるサービスが、無料でも利用できる「SSGform」です。 今回は、SSGformが提供する機能や特徴を一通り紹介し、実際にフォーム
デベロッパー フィードバックのリクエスト: カスタマイズ可能な選択 | Blog | Chrome for Developers
<select> 要素などのフォーム コントロールのスタイル設定は、長年にわたりデベロッパーの最大の問題として報告されており、Google は解決策の開発に取り組んできました。この作業は複雑で、適切に行うまでに長い時間がかかりましたが、この機能のリリースは間近に迫っています。カスタマイズ可能なバージョンの select 要素は、WHATWG で正式にステージ 2 に移行しており、クロスブラウザでの関心が高く、Chrome Canary 130 からプロトタイプをテストできます。 ぜひお試しになり、フィードバックをお寄せください Chrome Canary のインストールがバージョン 130 に更新され、試験運用版のウェブ プラットフォームの機能フラグがオンになっていることを確認します。このフラグを有効にするには、アドレスバーで chrome://flags に移動し、#experiment
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
問い合わせフォームを実装しただけなのにスパムメールの加害者になっていた話 - Qiita
[React] 新規作成画面と編集画面の実装で気をつけていること
HTML/CSSで装飾可能に！ select・optionタグの新しいカスタマイズ方法 - ICS MEDIA
「ぶいすぽっ！」応募者の情報流出問題、「Googleフォームの予告ない仕様変更」が原因の一端か
React Hook FormをやめてuseReducerを使用した話
<label>で<button>を囲んでいるときにclickイベントが2回発火する問題の原因と対策
フォームライブラリの新たな選択肢 - TanStack Form
Next.js v15からはフォーム内容がリセットされる
HTMLのフォーム送信がEnterキーなのか送信ボタンなのか判別する方法 - Qiita
Notionの新機能「フォーム」を試してみた #Notion | DevelopersIO
Dialog と Popover #7 | blog.jxck.io
日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date
コピペで使える! HTMLのチェックボックスを独自のデザインで実装する方法 - ICS MEDIA
CSSでラジオボタンとラベルの間にスペースを加えると、関連付けがうまくいかないときの対応方法
Browser MCP - Automate your browser with AI
【法人向け機能】はてなCMSにフォーム機能を追加しました - はてなブログ開発ブログ
CSS のフィールド サイズ設定 | Chrome for Developers
:has()を使ってCSSだけで同意チェックボタンを実装する方法｜BLACKFLAG
Support PUT, PATCH, and DELETE in HTML Forms
TanStack Form と React Hook Form の Dirty 判定の挙動を比較してみた
アンケートや投票フォームなどをドラッグ&ドロップで簡単に生成できるOSS・「Surveyr」 - かちびと.net
コピペで実装できるお問い合わせフォームコーディング｜小林 / デザイナー