HTMLFormElement.submit は validation を無視するし submit イベントを発火しない - 平常運転
日記です。タイトルでほぼすべてがオチてしまった。 const form = document.querySelector('form#ultra-form'); form.submit(); みたいな感じで、 <form> を JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている: Submits the form, bypassing interactive constraint validation and without firing a submit event. https://html.spec.whatwg.org/multipage/forms.html#htmlformelement つまり、例えば下のような HTML form の場合、
【10分で作成】Microsoft TeamsでForms投票、その結果をPower BIでリアル可視化 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Microsoft Teamsには、チーム内で、簡単にMicrosoft Formsの投票機能が呼び出せ、その結果が簡易的な棒グラフで同チーム内にリアルタイムに表示できます。また投票されたデータはMicrosoft Formsの管理機能で円グラフ、1件づつの回答結果、Excelでの回答一覧を取り出せます。 こちらを、Power AutomateとPower BI Serviceを連携することにより、リアルタイムに好きなビジュアルで表示するようにします。 尚、当初は【1】の手順でTeams内で使えるクイック投票機能（Formsが
pixiv PAY サービス終了のお知らせ
pixiv事務局です。 2017年8月10日（木）よりサービスを開始し、みなさまにご愛顧いただいていた「pixiv PAY」（https://pay.pixiv.net）ですが、2020年12月1日（火）をもってサービスを終了させていただくことになりました。 pixiv PAYでは、クリエイターのみなさまがもっと便利で手軽に取引できる決済環境を実現するため、これまでにレジ機能やQR決済の提供、お支払いにpixiv PAYのQR決済をご利用いただく即売会「pixiv MARKET」（https://market.pixiv.net/）の開催などを実施してまいりました。 しかし、昨今の大きな環境変化により、pixiv PAYを主にご利用いただいております即売会などのリアルイベントの在り方は変わりつつあります。これに伴い、イベントにおける決済手法として求められるサービスの形がpixiv PAY開
React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO
React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えてご紹介してみたいと思います。 なお本記事は、前の記事（react-hook-form編）に続く形式となりますので、お時間あれば下記の記事も合わせてご参照いただけますと幸いです。 作ってみた 前回の記事で作成した Web フォームの基本項目（Basic.js）というフォームに下記の yup という JavaScript schema builder を利用してバリデーションの機能を追加していきたいと思います。 バ
この記事で話すこと この記事ではReact入門者の方、UIの状態管理についてよく悩んでしまう人を対象に書いています。 いきなり複雑な状態管理を考え出すのではなく、そもそも宣言的UIの構築プロセスを頭の中に置いてそのコンポーネントの状態を特定し、整理することで管理する状態を明確にします☺️ 宣言的UIの構築プロセスを通し、react入門・初心者がいきなり状態管理を考え出して手が動かなくなる状態を脱却することを目的にしています。 宣言的UIの構築をフォームコンポーネントを例に４STEPで理解する 今回は「入力値を送信するテキスト入力フォーム」を例にとって4stepでプロセスを理解する コンポーネントの状態を列挙してみる 状態変化のきっかけのトリガーを特定して、フローを作る useStateを使って状態を宣言する 状態のリファクタリング（今回は不要・重要でない状態変数を削除する） 目標：最初から
![[React🐣 ]宣言的UIの構築をシンプルなプロセスで理解する](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1ee0c459e1b4a4aea78c40bcee51962a03421c4/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--wJ9KmAW9--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520%252520%25255D%2525E5%2525AE%2525A3%2525E8%2525A8%252580%2525E7%25259A%252584UI%2525E3%252581%2525AE%2525E6%2525A7%25258B%2525E7%2525AF%252589%2525E3%252582%252592%2525E3%252582%2525B7%2525E3%252583%2525B3%2525E3%252583%252597%2525E3%252583%2525AB%2525E3%252581%2525AA%2525E3%252583%252597%2525E3%252583%2525AD%2525E3%252582%2525BB%2525E3%252582%2525B9%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AAltppp%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzVmZmJmYTgzYTkuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
非制御フォームをやるならこんなふうに Recoil編
Reactにおいて、フォームをどのように実装するかというのは開発者の悩みの種のようです。筆者は最近ロジックをRecoilに載せるのにはまっていますので、今回はRecoilを使ってフォームを実装することを考えてみます。 制御コンポーネントと非制御コンポーネント Reactにおいてフォームの実装方法は2種類に大別されます。それは、制御コンポーネント (controlled components) を使うか非制御コンポーネント (uncontrolled components) を使うかです。制御コンポーネントとは、入力されたテキスト等をReactのステートとして保持し、<input value={state} />のようにinput等のvalueに渡してレンダリングする方法です。制御コンポーネントではデータの本体がReact側にあり、DOMはそれを写像しているだけです。一方、非制御コンポーネン
ホームページにはメールアドレスを掲載してはいけない！？その理由と対策方法 公開日 : 2021.07.12 最終更新日 : 2022.10.05 コーディング お問い合わせ用などのメールアドレスをホームページ上に公開することはよくあると思いますが。 ・・そのメールアドレス、そのまま公開していませんか？ 実は、何の対策もせずにメールアドレスを公開してしまうと、スパムメール（迷惑メール）に襲われるリスクが高くなってしまいます。それにより、ウイルス感染の恐れや情報漏洩などさまざまな被害リスクが高まると同時に、クライアントへも多大なる迷惑をかけてしまう恐れがあります。 これからホームページにメールアドレスを公開しようと思っている方、また既に対策をせず公開してしまっている方も、スパムの危険性を理解し今すぐ対策を行なっていきましょう！ スパムメールとは受信者の意向とは無関係に、無差別かつ大量に送り付け
公式では制御されたコンポーネントを推奨し、<input type="text" value={this.state.value} onChange={this.handleChange} /> のように onChange を使って更新、value に state を入れて制御するようにしているのですが、推奨は言いすぎではと思っていることについて書きます。 「公式のここがおかしいのではないか」という問いかけはだいたい自分が間違っているだけという場合がほとんであることは自覚していますので、もし間違っていたら """優しく""" 指摘してくれると嬉しいです。 React は制御されたコンポーネントを推奨している まず制御されたコンポーネントについて、公式の定義をみましょう。 HTML では <input>、<textarea>、そして <select> のようなフォーム要素は通常、自身で状態を保
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
React Hook Form v7 + MUI v5 + zod v3を使ったコンポーネント実装例 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに TextField RadioGroup SelectForm CheckboxGroup DatePicker コンポーネント使用側実装例 おわりに 本記事を執筆するにあたって、 マナリンク Tech Blog運営さんのReact Hook Form(v7)を使ったコンポーネント設計案 piyokoさんのMUI v5 + React Hook Form v7 で、よく使うコンポーネント達を連携してみる という記事を参考にさせていただきました。いつも非常にわかりやすい記事をありがとうございます。 はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 React Hook Form v7 + MUI v5 + zod v3を使ったよく使うコンポーネントの実装例を調査しており、こちらの記事を参考に実装を進めてみました。しかしRadioGroupやDatePickerをatom
Asking a user to provide the OTP (one time password) delivered via SMS is a common way to confirm a user's phone number. There are a few use cases for SMS OTP: Two-factor authentication. In addition to username and password, SMS OTP can be used as a strong signal that the account is owned by the person who received the SMS OTP. Phone number verification. Some services use a phone number as the use
松竹は6月17日、大阪松竹座の特定のイベントに申し込んだ会員情報111人分が、他の申込者から閲覧可能だった可能性があると発表した。申し込み用のGoogleフォームで設定ミスがあったため。 対象は、「松竹歌舞伎会」会員のうち、大阪松竹座「七月大歌舞伎」チケット購入者限定で募集した「船乗り込み」イベントの応募者。 6月11日午後4時30分ごろから12日午前12時50分ごろに応募した会員の会員番号、氏名、郵便番号、住所、メールアドレス、参加人数が、申し込んだ会員相互で閲覧可能だった可能性があるという。 各情報は個人ごとにひも付けられない表示になっており、「個人を特定することは困難だった」としている。閲覧できたのは、フォームにアクセスできた限定的な会員で、外部からアクセスできる状態ではなかったという。 対象者には謝罪文を送付した。再発防止のため、フォーム公開時のテストとチェック体制の強化を図るとし
型付けを頑張る React Hook Form
はじめに React Hook Form は Controlled component と比べると利便性は高いですが、代償として型安全性をある程度放棄しています。この記事では React Hook Form を使いながらも型安全性を可能な限り高めるための解決策を紹介しています。 この記事で扱わないこと フォームライブラリを使うことの是非 React Hook Form の基本的な使い方 本題から逸れるコンポーネント設計の話 解決したいこと 次のような TextInput コンポーネント、NumberInput コンポーネントと、それらを使う Form コンポーネントについて考えます。 type TextInputProps = { name: string; }; const TextInput: React.VFC<TextInputProps> = ({ name }) => { co
Google Forms APIがオープンベータに。プログラミングでGoogleフォームを作成、回答を取得可能
Google Forms APIがオープンベータに。プログラミングでGoogleフォームを作成、回答を取得可能 Googleは、アンケートやクイズなどを手軽に作成できるGoogle Formsを、API経由で操作する「Google Forms API」がオープンベータとして公開されたことを発表しました。10月に発表された時点では限定ベータでした。 The #GoogleWorkspace team is proud to announce the Open Beta of the Google Forms API! @Google partners can now fully automate Google Forms generation and management. Learn more and sign up for Open Beta https://t.co/5GlA7PXYg
Checklist Use meaningful HTML elements: <form>, <input>, <label>, and <button>. Label each form field with a <label>. Use HTML element attributes to access built-in browser features, in particular type and autocomplete with appropriate values. Avoid using type="number" for numbers that aren't meant to be incremented, such as payment card numbers. Use type="text" and inputmode="numeric" instead. If
Zodとの比較 公式サイトで、Valibot は、Zod と比較して、バンドルサイズが最大98%削減できると記述されています。今回作成した問い合わせフォームでも、92.2%の削減を確認できました。 VSCode 上で Zod で作成した Schema ファイルのサイズは gzipped 圧縮で12.8kです（Zod を利用した Schema はこちらを参照ください）。 ZodのSchema実装 import { z } from "zod"; const email: z.ZodString = z .string({ required_error: "入力が必須の項目です" }) .min(1, { message: "入力が必須の項目です" }) .max(255, { message: "255文字以内で入力してください" }) .email({ message: "メールアドレスの
フォームのアクセシビリティを考える
フォームのアクセシビリティを考える 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。スクリーンリーダーといった支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するよう
「日本3大許せない入力フォーム」に続々と候補と共感が集まる
Paul O'Leary McCann @polm23 @941 @asahiko 姓名や住所のところで半角英字を受け付けないやつですね。他には名前の読みがなで使用できる文字を明記せずカタカナや長音符を受け付けないのもあります（出前館はたしかに読みがながひらがなでないとエラーになるけどエラーはそれを説明してくれないとか…）。 2022-01-27 23:04:13
この記事について 実際にフォームを使用するときは、バリデーションライブラリと合わせて実装することが多いと思います。 こちらの記事で再描画を抑えるためにはReactHookForm（以下 RHF）を使用するのが良いと投稿しました。 今回の記事では、タイプセーフなバリデーションライブラリ「Zod」とRHFを使用した実践的なフォームを作成していきます。 RHFとZodは以下のresolverを使用すると簡単に組み合わせることができます。 ですが愚直に実装しても、1つのコンポーネントにすべての関心事が詰め込まれ、ファットなコンポーネントになってしまうでしょう。 今回は、フォーム処理における関心事をカスタムフックに切り出し、交換可能（プラガブル）なフックを作成していきます。 画面 以下のようなフォーム画面を実装しています。 InputFieldコンポーネント 以降で使用しているInputFieldの
＜お知らせ＞ この記事は移転しました。約5秒後に新記事へ移動します。 株式会社HAPPY ANALYTICS 公式サイトよりお読みください。 ウェブサイトの改善施策を出すには３つの方法があります。セミナー等で良くお話ししているのですが １：データを元に「良い」と「悪い」を見つけ、自社サイト内で改善案を出す ２：データを元に課題を見つけ、「仮説」をもって同業他社を比較する ３：自分が良いなと思った施策のスクリーンショットを撮って施策をためる この3番について、セミナーで紹介しているいくつかの事例はこんな感じです。 ■男女お互い選びやすいように「価格を隠す」機能を入れる ■メールマガジンを「受け取らない」を選ぶと、メールマガジンの詳細を表示するバナーが案内される こういった施策を私は貯めているのですが、それらをまとめたサイトをリリースしました。それが「施策掲示板」になります！ 施策掲示板とは
Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook Form - Qiita
Uncontrolled Components でシンプル且つ高パフォーマンスなフォームの実装 - React Hook FormJavaScriptTypeScriptReactreact-hooksreact-hook-form この記事は READYFOR Advent Calendar 2020の13日目の記事です。 はじめに こんにちは。今年の11月から READYFOR でフロントエンドエンジニアとして働いている菅原（@kotarella1110）です！ React と TypeScript が好きで、React Hook Form のメンバーだったりもします。React Hook Form は TypeScript で記述されているのですが、型の改善を中心にコントリビュートしております。 そこで、本記事では React Hook Form に関連した内容をお話しできればと思い
Announcing SWR 1.0 – SWR
Almost 2 years ago we open sourced (opens in a new tab) SWR, the tiny data-fetching React library that people love. Today we are reaching another milestone: the 1.0 version of SWR! What’s New Smaller Size Performance is one of the most important features of SWR. In 1.0, we made the library significantly smaller without removing any existing features: 41% smaller core (24% smaller when gzipped, 3.9
最近いろんなプロジェクトをNext.js v14からv15にアップデート作業している@zaruです、こんにちは。 Next.js v15の大きな変更点はリリースノートなどで発表されていますし、アップグレードをサポートする codemod もあり、大半のプロジェクトは npx @next/codemod@canary upgrade latest を実行するだけで自動で修正されます。 しかし、Next.js v15のリリースノートには書かれていない（と思う）のですが、Next.js v15にはフォームをサブミットすると、フォーム内容がリセットされるように変更されています。これはv14とは異なる挙動です。 「フォームをサブミットすると、フォーム内容がリセットされる」とテキストで書くと、それはそうでしょう。なに当たり前のこと言ってるんだ？となるかもしれません。 実際に挙動を確認したほうが早いので
Sailboat UI - Modern UI component library for Tailwind CSS
Build your website quickly with Sailboat UISailboat UI is a modern UI component library for Tailwind CSS. Get started with 150+ open-source Tailwind CSS components, and make it easy to build your products.
Blitz.jsの議論から学ぶ，formik vs react-final-form vs react-hook-form - Qiita
What should the default form library be in Blitz apps? BlitzがどのFormライブラリをデフォルトにするかの議論が参考になったので要約しました。 formik react-final-form react-hook-form の３択で，結論としては，React Final Formを推奨とする形に落ち着きました。 最初のコメント Blitz.jsの作者であるBrandon(@flybayer)さんがコメントしています。要約するとこんな感じ。 Formik 以前使ってたけど，パフォーマンスめっちゃ悪いって気づいたから，Formikは無しで。 React-final-form 最近ずっと使ってるけどいい感じ。 React-hook-form ほとんど使ったことない。 React-final-formをReact-hook-formに書き
GA4でお問い合わせフォームがどこまで入力されているかを分析する方法 | Pivot-Form 独自ドメイン対応、オンプレミス、 管理機能もカスタマイズ可能なフォームシステム
GA4でお問い合わせフォームがどこまで入力されているかを分析する方法 【寄稿】連 久実子さん ブログ：https://shuhu-marketing.com/ X：https://twitter.com/shuhu_marketing/ 広告代理店を経て、メーカーEC運用部門にてサイト構築運用・カスタマーオペレーション・ロジスティクスと広く経験した後、ブランディング及び販促戦略企画に携わり、現在は、フリーランスのWebアナリストをしています。「レンさん」と呼ばれるのを密かに気にしています（連と書いてムラジと読みます）。 こんにちは、Webアナリストをしている連久実子です。 はじめに伝えておきます・・・この方法だいぶ面倒くさいです。フォームがどこまで入力されているかをざっくり把握したいだけであれば、Microsoft Clarityを使った方がめちゃくちゃ楽です。 じゃあ何故今回ご紹介する分
Forms have existed for a significant amount of time, greatly simplifying the task of drafting complaints and various other legal pleadings. With the advance of information and its processing, means to gather the data are also evolving. As printed forms were here for years we can learn a few tips from their design. Text field anatomyText fields allow users to enter text into a UI. They typically ap
hCaptcha EnterpriseStop online fraud and abuse before it starts Instantly detect and deter human and automated threats.Get Startedor Contact SalesLooking for hCaptcha Free or Pro? Compare plans.
Form Validation Using JavaScript's Constraint Validation API
Form validation is one of the primary reasons to use client-side JavaScript. It can prevent user entry errors before your app attempts to submit data to the server. But… client-side validation is not a substitute for server-side validation! Always check incoming user data on the server. Not every request will come from a browser nor will every browser run validation code. Client-side validation is
HTMLのフォームは、送信ボタン（<button type="submit">）をクリックするだけでなく、暗黙の送信手段による送信もサポートされています。大抵のウェブブラウザでは、フォームの入力欄（inputやtextarea）でEnterキーを押すことで、送信ボタンを押さなくても送信できる挙動をサポートしており、これが暗黙の送信に該当します。 この記事では、理由はともかく、フォームの送信（submitイベント）がEnterキーによって起きた（暗黙の送信）のか送信ボタンを押したことで起きたのかを判定したい人に向けてその方法を伝授します。 TL;DR 暗黙の送信用の見えない送信ボタンと、ユーザーが押す用の見える送信ボタンを用意しましょう。 解説 Enterキーのような方法による暗黙の送信は、実際には「そのフォームのdefault buttonに対してclickイベントを発生させる」という機構
TypeScript-first schema validation with static type inference
The Best Form Builder for Notion Create beautiful forms and surveys without writing code. Receive submissions straight into Notion. Easy.
WP908
WP908 อีกหนึ่งเว็บไซต์ที่ถูกครอบครองโดย PGZEED.BEST โดยเว็บไซต์ WP908.com ถูกเข้าซื้อกิจการเมื่อวันที่ 8 สิงหาคม 2566 WP908.com เป็นเว็บไซต์เกมสล็อตออนไลน์ที่ได้รับความนิยมเป็นอย่างยิ่งตั้งแต่ปี 2020-2023 ซึ่งเว็บไซต์ที่รวมเกมสล็อตหลากหลายรูปแบบ ทั้งเก่าและใหม่ ค่ายชั้นนำจากต่างประเทศหรือค่ายเกมดังที่คนไทยทุกคนรู้จักอย่าง PGSLOT, Askmebet และ SLOT XO ยกระดับเกมสล็อตให้มีมาตรฐานยิ่งกว่าเดิมด้วย WP9
react-hook-formとモーダルの設計原則
reactでformを作る時、react-hook-formを使う方も多いと思います。react-hook-fomで実装すると、非制御コンポーネントベースなためレンダリングコストを減らすことが期待でき（実装にもよります）、また、zodとの連携によるバリデーション実装の容易さなど、実装や設計面においても多くのメリットが得られます。 一方で、チームでreact-hook-fomを使って実装を進めていくには設計的難しさを伴うことがあります。筆者は実際にform内におけるモーダルの実装で設計の見直しを迫られました。 本稿は実際に設計を見直すことで筆者が感じた、react-hook-fomの実装における設計の勘所の紹介記事になります。 2つのformの実装原則 先に結論です。react-hook-fomを使ったform実装においては以下の2つの原則を守ることが設計上重要になってきます。 form実装
この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック時にはリセットされてしまいます。これはNext.jsに限らず、ReactやVueなどをベースにしたモダンなフロントエンドフレームワークを採用して、クライアントサイドルーティングが発生する場合に起きがちな挙動です。クライアントサイドルーティングが不在なMPAでは、bfcacheやブラウザ側の復元処理によっ
Safari 17.4 adds vertical writing mode support for form control elements across macOS, iOS, iPadOS, and visionOS. Setting written text vertically is commonly observed in East Asian languages. For example, Chinese, Japanese, and Korean (CJK) may be written vertically and read top-to-bottom, flowing in lines from right to left. Similarly, Traditional Mongolian is a vertical script that flows in line
こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？ おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 （結論のコードだけ知りたい方は読み飛ばして OK です） 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
１ はじめに加古川市が５月13日より開始した新型コロナワクチンWeb予約抽選申込フォーム（以下「抽選申込フォーム」）に関し、多くの関心・問い合わせが寄せられましたので整理するものです。 加古川市オープンデータカタログサイトには、フォームと受け皿となるアプリを掲載していますので、実際にどのように抽選を行っているかについて、こちらのページにおいて説明したいと思います。 単なるロジックの整理となりますので、あらかじめご了承いただいた上でお読みください。 ２ ワクチン予約オペレーションとは２月中旬から医療従事者をはじめとする新型コロナウイルスワクチン接種が開始され、３月ごろから65歳以上の高齢者を対象としたワクチン接種が開始されるにあたり、接種券を配布された高齢者に対するワクチン予約が各自治体において開始されました。 ワクチンの需給バランスが整っていない中、少ないワクチンを無駄なく接種するための方
本記事ではReact Hook Form(v7)を使ったコンポーネント設計のアイデアについて話します。 React Hook Formはその名の通り、Hooksをベースにフォームのバリデーション設定を記述できるライブラリで、特にv7で大きな変更が入りました。そのため、本記事ではv7前提であることをタイトルで明記しています。 Hooksにフォームのロジックが切り離されることにより、理論的には、TSXで記述されたView層と、バリデーションを司るロジック層を切り離して実装することができるはずです。 オンライン家庭教師マナリンクで提供しているオンライン指導の機能にてこちらの設計を実践してみたので、どなたかの参考になれば幸いです。 前提条件 React v17 React Hook Form v7 Material UI v5 ※View層、ロジック層という命名は適当に考えたものなので、もっと適切
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[React🐣 ]宣言的UIの構築をシンプルなプロセスで理解する
ホームページにはメールアドレスを掲載してはいけない！？その理由と対策方法 | AndHA Blog
Reactのフォームをコントロールしたときのデメリットを考える
Chrome のフォーム コントロールとフォーカスのアップデート
SMS OTP form best practices | Articles | web.dev
松竹、Googleフォームの設定ミスで個人情報漏えいの可能性
Payment and address form best practices | Articles | web.dev
react-hook-form が Valibot に対応、Zod比較でバンドルサイズが92%削減
Reactでフォーム処理の関心事をカスタムフックに切り出す
「施策掲示板」をリリースしました - Real Analytics （リアルアナリティクス）
Next.js v15からはフォーム内容がリセットされる
Text fields & Forms design — UI components series
hCaptcha - Stop bots and human abuse.
HTMLのフォーム送信がEnterキーなのか送信ボタンなのか判別する方法 - Qiita
TypeScript-first schema validation with static type inference
Create beautiful forms to fill your Notion databases
@location-state/conformをリリースした
Implementing Vertical Form Controls
【React】フォームは状態管理せずに実装できるよ - Qiita
Dialog と Popover #7 | blog.jxck.io
新型コロナワクチンWeb予約抽選申込フォームについて｜tdism
React Hook Form(v7)を使ったコンポーネント設計案
applech2.com
nlab.itmedia.co.jp
shogakukan-square.jp
www.kbaba1001.com
r.goope.jp
magcomi.com