まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
Steam Deck
256GB NVMe SSD 1280x800 オプティカルボンディングLCDディスプレイ 7インチ（対角）のディスプレイサイズ 最大60Hzのリフレッシュレート 7nm APU Wi-Fi 5 40Whrバッテリー；2～8時間のゲームプレイ（コンテンツによって異なります） 45W電源（1.5mケーブル付属） キャリングケース Steamプロフィールバンドル
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
3大イラッとくる入力フォーム
ペースト出来ないID/パスワード欄 4つに分割されてるクレジットカード番号入力欄 入力した後で記号は使えませんとか言ってくるパスワード欄 あと一つは？
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
「丁目、番地が全角しか入力できない」「何の入力チェックでエラーが出ているのかわからない」みんながネットでイラつく#クソ入力フォーム選手権 開催中
米村歩@日本一残業の少ないIT企業社長 @yonemura2006 ・丁目、番地が全角しか入力できない ・電話番号が全角しか入力できない ・建物名が全角しか入力できない ・生年月日がカレンダーで果てしなきページ送りを要求される ・何の入力チェックでエラーが出ているのかわからない ・入力チェックエラーになると入力内容が全部消える #クソ入力フォーム選手権 2021-09-06 22:44:39
Kaigi on Rails 2023の登壇資料です！
ハイフンに似ている横棒を全て統一するᅳㅡ˗𐆑–᭸‒-─−▬𐄐—━‐‑ー﹣―ｰ﹘－⁃➖⁻！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
2022年10月25日、ショーケースは同社が提供する複数のサービスが不正アクセスを受けたため、サービスを利用する企業のWebサイトを通じて入力された情報が外部へ流出した可能性があると公表しました。ここでは関連する情報をまとめます。 フォーム入力支援やサイト最適化サービス改ざんで複数社に影響波及 www.showcase-tv.com 不正アクセスによりショーケースが提供するサービスのソースコードの改ざんが行われた。対象サービスが稼働するシステムの一部で脆弱性を悪用されたことが原因。 被害に遭ったのは「フォームアシスト」「サイト・パーソナライザ」「スマートフォン・コンバータ」の3つ。フォームの入力支援やサイト表示最適化を行うサービスで利用企業は同社が公開するJavaScript (formassist.jp、navicast.jp上で公開)を自社サイトより読み込むことで利用する。 改ざん被害
Google Forms APIが正式リリース。Googleフォームの作成や編集、集計などをプログラミングで制御可能に
Google Forms APIが正式リリース。Googleフォームの作成や編集、集計などをプログラミングで制御可能に アンケートやクイズなどを簡単に制作できるGoogleフォームをAPI経由で作成、編集できる「Google Forms API」が正式版となったことを、Googleが発表しました。 Introducing the new Google Forms API! Developers can now build powerful integrations on top of Forms. Here's how you can use the new Forms API and what’s in it → https://t.co/zLcaEw2ru1 What will you build for Google Workspace? pic.twitter.com/oSkPqx
「めちゃくちゃ有用だけど、きつい現実を突きつけられる」──こんな口コミで、あるWebサイトが話題になっている。「データはどのように収集しましたか？」「この論文で検証したいことは何ですか？」など複数の設問に回答することで、論文の骨組みを出力してくれるWebフォームだ。 設問は、データの正確性、研究の正確性、研究の意義、研究の必要性の4種類に分かれており、それぞれのテーマに沿った質問を用意している。入力した後は「論文骨子へ変換」をクリックするだけで、論文タイトルから要旨、実験方法、結論などを表示する。 作成したのは「独学大全」などの書籍で知られる、作家の読書猿（@kurubushi_rm）さん。自身のブログに「論文に何を書くべきか→これだけは埋めろ→論文作成穴埋めシート」と題して2012年2月に投稿したものだ。「穴埋めしたら論文を出力してくれるものが作れないか」という話を受けて、シートを作成し
アンケートなどを簡単に制作できるGoogleフォームをAPI経由で作成、編集できる「Google Forms API」が発表されました。 The #DeveloperCommunity has more power! Thanks to the new Google Forms API, you have the ability to build powerful integrations on top of forms. Check out automation use cases https://t.co/3rwg3qr5Vg — Google Developers (@googledevs) October 12, 2021 Googleフォームは、質問項目や選択肢が並んだフォーム画面を作り、公開すると、自動的に結果がGoogle Spreadsheetに集計され、容易にグラフ化など
「全ての住所フォームがこうなってほしい」 SIerが公開した“使いやすい入力欄”の作り方が話題 ソースコードも掲載
「郵便番号を入れる枠はひとまとまりに」「郵便番号を基にした住所の自動入力を搭載する」といった、使いやすい住所入力フォームを作る知見をまとめたブログ記事が話題だ。「はてなブックマーク」で1000ユーザー以上がブックマークした他、Twitterでも「参考になる」「全ての住所フォームがこうなってほしい」などの反応を集めている。 ブログでは、入力の煩雑さから離脱してしまうユーザーを減らすためにすべきことを大きく4つに分ける。 「郵便番号の枠はひとまとまりに」「郵便番号を入れたら即座に、もしくはユーザーがボタンを押したら住所を自動入力する」に加え「Webブラウザが備える住所の自動入力機能に対応・最適化する」「入力欄は『都道府県』『市区町村』『町名以下』の3欄を基本とし、『建物』欄はオプションとする」といった機能が必要と紹介。それぞれの実装に当たっての注意点などを説明している。 これらの機能を搭載した
いま話題のツイートまとめが読めるTwitterまとめに特化したまとめサイト。人気のツイートやTwitterトレンド、写真やマンガといった話題の画像から、さまざまなニュースの反応まで、みんなであつめる国内最大級のメディアプラットフォームです。
よくある問い合わせフォームを提供していたら、知らぬ間にスパムメールの加害者になっていた話です エンジニアが知っておくべき メール送信・運用ノウハウ、メールの認証技術やセキュリティについて投稿しよう！ by blastengine Advent Calendar 2024 の8日目です。 要件 お問い合わせ内容の他、名前や所属、メールアドレスの入力が必須 問い合わせ完了後、入力されたメールアドレス宛に自動応答メールを送る 自動応答メールには入力された問い合わせ内容を記載する 同様に指定したサービス担当者宛にも問い合わせ通知メールを送る 以上の要件で作成しました。 実現方法 メール送信にはAWS SESを使用しました。問い合わせ確定ボタンを押下後にAWS Lambdaにリクエストを飛ばし、SESと連携してメールを送信する流れです。 実装後のこと 実装後、しばらく正常に稼働していました。しかし、
Google フォームの共同編集設定に起因して発生していた情報流出についてまとめてみた - piyolog
2024年6月以降、Google フォームの設定に起因する情報流出が生じたとして複数の組織より公表されました。ここでは関連する情報をまとめます。 回答情報を第三者に参照される恐れのあった共同編集設定 Google フォームの設定次第で外部から回答者の情報を閲覧することが可能な状態が発生し、実際に影響を受けたとして複数の組織が6月以降公表を行っている。 事案公表した組織が行っていた設定とは、Google フォームの「共同編集者の追加」において「リンクを知っている全員」が選択されている場合。 Googleのアカウントにログインした状態で当該設定が行われたGoogle フォームに回答を行った後、自身のGoogleアプリからGoogle フォームの画面を表示した際に、「最近使用したフォーム」の欄にそのGoogle フォームが表示されるようになっていた。そこよりGoogle フォームを通じて入力され
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、<form> の method には GET と POST しかサポートされていない。HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Description:
こんにちは @zaru です。今回は昔からある CSRF (クロスサイト・リクエスト・フォージェリ) の今時の対策についてまとめてみました。もし、記事中に間違いがあれば @zaru まで DM もしくはメンションをください (セキュリティの細かい部分についての理解が乏しい…) 。 2022/08/29 : 徳丸さんからフィードバック頂いた内容を反映しました。徳丸さん、ありがとうございます！ 認証あり・なしで対策方法が違う点 トークン確認方式のデメリットのクロスドメインについての言及を削除、代わりに Cookie 改変リスクを追記 Cookie 改ざん可能性について徳丸さんの動画リンクを追記 SameSite 属性で防げない具体的なケースを追記 nginx 説明が関係なかったので削除 そもそも CSRF ってなに？ 昔からインターネットをやっている方であれば「ぼくはまちちゃん」 騒動と言えば
Fumi@Wecrin @fu_nigeria 警察署に無犯罪証明書をとりに行ったらフォームにTribeの項目があり、何書こうか考えてたら、担当者の人が「ヨルバ族とかイボ族とかあるやろ。」と。Japanでもいいかと聞いたら「それは国だ。」と怒られたので、適当に出身地書いたけど、TRIBE GUMMAって何か嫌だな。群馬族ってなに。 pic.twitter.com/JWH4YqOagU 2022-04-03 20:15:42
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
ChatGPTを利用して画面モックを爆速で作成する - Taste of Tech Topics
こんにちは、最近スマホのChatGPTアプリで、音声入出力機能を使って会話を楽しんでいる安部です。 皆さんWebアプリ開発などで、画面モックを作成しなければいけない場面は多いですよね？ 適当なHTMLを作ったり、ツールで図示したりしますが、正直面倒です。 そこで今回は、ChatGPTに最初から画面モックを作ってもらいます。 最近はChatGPTに画像を添付できるようになったので手書き画像からHTMLを出力することもできますが、 この記事では画面要素を言葉で指定し、HTMLを出力してもらいます（配置などのデザインは、ひとまずChatGPTにお任せしてみます）。 では早速始めましょう。使用モデルはGPT-4です。 簡単な入力フォームを出力させる まずは、よく使いそうな簡単な入力フォームを出力してもらいます。 ここでは、「書籍を登録する画面」という設定で指示を出します。 次の画面構成の案を、HT
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
昨今流行に合わせたWebサイトの作り方など聞くことがしばしありますが、流行以前にWebサイトはDBの設計だったりセキュリティ対策など様々な事をしなければなりません。 そこで今回はWebサービスにおける脆弱性を利用した攻撃と防ぎ方、そして不正アクセスしたらなぜバレるのかなど私の私見ですがお話ししていこうと思います。 想定読者 これから企業で研修受ける人 情報系の大学生・専門学生 注意 ここに書いてある内容は不正アクセスを推奨するものではなく、不正アクセスはどうやって防ぐかをまとめたものです。 自作サイトや自社で作ったサイトのテスト以外で不正なアクセスやパケットキャプチャは普通に違法になりますのでご注意を。 既にある設計論 実は情報処理技術者試験で有名な(っていうとそれが本業みたいになってしまいますが違います)IPAが『安全なウェブサイトの作り方』というサイトを作ってあります。 ここには各種W
LINE TECHNICAL WRINTING MEETUP Vol.8 2021.10.14 https://line.connpass.com/event/226589/ 「ドキュメントを改善するためのはじめの一歩」 株式会社ソラコム テクニカルライター 矢崎 誠 イベントレポ…
HyperForm
formタグのaction属性にURLをセットするだけで、データの管理や自動返信メールの送信などができる、ヘッドレスフォームサービスです。
BtoBにおけるフォーム入力者の76.9%が途中で離脱する原因は、運営者の「削れない項目」にあった | Coneのコンテンツ制作所
【フォーム入力経験者】離脱理由や入力をためらう項目 BtoBマーケティングにおいて、「フォームを最後まで入力してもらえるかどうか」は、リード獲得成果を左右する重要な分岐点です。いくら広告やコンテンツで興味を引いても、フォーム入力の段階で離脱されてしまえば、商談につながるチャンスを逃すことになります。 では、実際のところ、どのくらいの人がフォーム入力の途中で離脱しているのでしょうか。そして、ユーザーはどのような項目で「入力をためらう」のでしょうか。 ここでは、実際にBtoBサービスへの問い合わせや資料請求を経験した人（130名）を対象に行ったアンケート結果をもとに、フォーム離脱の実態と“ためらいポイント”の傾向を明らかにします。さらに、各データをもとに「離脱を防ぐための改善の方向性」についても考察していきます。 7割以上が「途中でフォーム入力を放棄」している フォーム入力経験のある人（N=1
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
CSSの新しいプロパティ「field-sizing: content;」が便利！ フォームのサイズを入力された文字量に合わせて自動変更
今まではJavaScriptを使用しないとできなかったことが、たった1行のCSSで簡単に実装できるようになります。フォームのtextareaに文字を入力すると、その文字量に合わせてサイズを自動で変更するCSSの新しいプロパティを紹介します。 下記のように入力された文字量に合わせてサイズを自動で拡張してくれます。また、min-heightやmax-heightを同時に設定できるので、上限下限のサイズを設定することもできます。 CSSの新しいプロパティはfield-sizingです。field-sizingプロパティを使用すると、フォームコントロールのデフォルトのサイズを無効にし、フォームのサイズをコンテンツに依存させることができます。そのため、自動で拡張されるtextareaを実装するのが簡単になります。 参考: Feature: field-sizing CSS property CSSは
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を…
こんにちは。転職ドラフトでWebアプリケーションエンジニアをやっている@iwtnです。 転職ドラフトでは自社開発企業に特化したエージェントサービスを始めました。 agent.job-draft.jp そこでサービスの申し込みフォームを作ったのですが、その中に生年月日の入力がありました。 生年月日ということは日付の入力。 ブラウザの実装もリッチになってきて、デフォルトでinputタグの type="date" を使うだけでカレンダーまで表示されます。素晴らしいですね！ しかしこの実装の問題は多くの人が指摘しています。実際あまりよいUIとは言えません。 動作はバラバラ、特にスマホでは入力しにくい 実装はブラウザに依存します。なので統一したUIをユーザーに提供できません。 caniuse.com もちろん普段使っているブラウザで慣れていればそれがその人にとってのベストのUIにはなりえます。 しか
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : アクセシビリティ / ユーザビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
複雑なフォームを継続的に開発していくための技術選定・設計・実装 #tskaigi / #tskaigi2025
Web エンジニアが JavaScript で AI Agent を作る / JSConf JP 2025 sponsor session
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
Content-Disposition の filename という地雷。 (1個の観点で17個の脆弱性を見つけた話) - ぶるーたるごぶりん
English ver: https://gist.github.com/motoyasu-saburi/1b19ef18e96776fe90ba1b9f910fa714#file-lack_escape_content-disposition_filename-md TL;DR 1つのブラウザ、1つのプログラミング言語、15個の { Web Framework, HTTP Client ライブラリ, Email ライブラリ / Web Service 等} で脆弱性を見つけました。 見つけた脆弱性は、全て 1つの観点で発見した (多分 50-80 くらいのプロダクトの調査をした)。 RFC の記載では、（かなりわかりにくく）この問題に対する要件が記載されており、WHATWG > HTML Spec の方はしっかりと書かれているといった状況にある。 この問題は、 Content-Dispo
React Hook Formを1年以上運用してきたちょっと良く使うためのTips in ログラス（と現状の課題）
はじめに 早いものでこちらの記事が公開して約1年、ログラスでReactを書き始めて1年以上が経ちました。 今回はフロントエンドのアプリの中でも特段重要なフォーム、特にReact Hook Formについての解説をしていきます。 今回のTipsは公式がベストプラクティスとして発表しているものではなく、あくまで個人が1年間の経験の上で良いとしているものであしからず。 なるべく何故良いかの説明もしていきます。 目次 useFormをラップしてタイプセーフにする React Hook Formへの依存するコンポーネントを分ける yupを使って見通しの良いバリデーションを実装する 1. useFormをラップしてタイプセーフにする ログラスでは useForm をそのまま使うことはせずラップしています。理由は一部の型づけがゆるく実行時例外が起きる可能性があるためです。 問題なのは defaultVa
<form>の外側に送信ボタンを配置する
Web アプリなどの UI でよくあるのですが、フォームの外側に送信ボタンがあるようなデザインのときに HTML だけで解決する方法があるので紹介します。 form 属性で紐付け <input> 要素の form 属性に <form> 要素の id 属性値を指定することで、フォームと送信ボタンを関連づけられます。 <form id="signin"> <label> メールアドレス <input type="email"> </label> <label> パスワード <input type="password"> </label> </form> <input type="submit" form="signin" value="サインイン">
フォームの実装で面倒なのがフォーム要素とテキストを揃える、特にチェックボックス・ラジオボタンとテキストをベースラインに揃えることです。 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> 複数行の長いテキストでも大丈
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これだけは押さえよう！住所フォームの作り方 - ケンオールブログ
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
HTTPを手で書いて学ぶ ファイルアップロードの仕組み
フォーム入力支援やサイト最適化サービスの改ざんについてまとめてみた - piyolog
穴埋めするだけで論文を作れるWebフォーム 便利すぎて無情な現実を突きつけてくると話題に
Google Forms API登場。プログラミングでGoogleフォームの作成や編集が可能に
Togetter - 国内最大級のTwitterまとめメディア
問い合わせフォームを実装しただけなのにスパムメールの加害者になっていた話 - Qiita
リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
今時の CSRF 対策ってなにをすればいいの？ | Basicinc Enjoy Hacking!
ナイジェリア在住の日本人、警察で「部族名を書け」と言われて「JAPANのグンマー族」と自己申告。「群馬族ってなんだよ…」
HTMLの標準機能で作るフォームバリデーション - ICS MEDIA
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
Webのしないといけないセキュリティ対策 - Qiita
ドキュメントを改善するためのはじめの一歩
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
最速の生年月日入力フォームを求めて - LIVESENSE ENGINEER BLOG
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
俺の管理画面 2023年冬 - KAYAC Engineers' Blog
このCSSなら簡単！フォームのチェックボックス・ラジオボタンとテキストをベースラインに揃えて配置
React コンポーネントの「制御・非制御」を意識しない方法
karina1.ue.bulog.jp
chiilop.hatenablog.com
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp