タグ

formに関するjay-esのブックマーク (5)

  • 非制御フォームをやるならこんなふうに Recoil編

    Reactにおいて、フォームをどのように実装するかというのは開発者の悩みの種のようです。筆者は最近ロジックをRecoilに載せるのにはまっていますので、今回はRecoilを使ってフォームを実装することを考えてみます。 制御コンポーネントと非制御コンポーネント Reactにおいてフォームの実装方法は2種類に大別されます。それは、制御コンポーネント (controlled components) を使うか非制御コンポーネント (uncontrolled components) を使うかです。制御コンポーネントとは、入力されたテキスト等をReactのステートとして保持し、<input value={state} />のようにinput等のvalueに渡してレンダリングする方法です。制御コンポーネントではデータの体がReact側にあり、DOMはそれを写像しているだけです。一方、非制御コンポーネン

    非制御フォームをやるならこんなふうに Recoil編
    jay-es
    jay-es 2023/01/29
    制御コンポーネント(状態を React のステートで保持)はタイピング毎にレンダリング発生して無駄。生 DOM のフォーム値を Recoil から読み取って管理
  • Form fields — Required vs Optional

    Memo card series n ° 1 : a maximum of information in a minimum of word. The way to mark field have strong implications for how users perceive and complete forms. This is a case of psychology quite simple, indicate the positive is better because it gives a better feeling to users, the decision is made by the user : gives them the power to believe that they have the choice. On the other hand, if you

    Form fields — Required vs Optional
    jay-es
    jay-es 2023/01/28
    入力フォームで「必須」を指示するのは心理学的にマイナス効果があり、エラーが増えたり入力完了率が下がる。赤い * マークだと分からない人もいる。必須項目の方が多いので「任意」の項目だけを示す方が見やすい
  • 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

    Form Validation Using JavaScript's Constraint Validation API
    jay-es
    jay-es 2022/01/15
    前半はHTML フォームの type や属性、CSS 擬似クラスの説明。後半から Constraint Validation API の説明、カスタムバリデーションなど
  • Javascript Input Mask

    Features get and set value and unmasked value easily no external dependencies supports overwrite mode supports all major browsers supports web components supports contenteditable RegExp mask Function mask Number mask (integer and decimal support) Date mask (with various format support and autofix mode) Dynamic/on-the-fly mask Pattern mask show placeholder always or when needed unmasked value can c

    jay-es
    jay-es 2021/07/10
    入力フォーム内で整形(数字にカンマ、電話番号にハイフン)したり、整形済みのテキストから元の値(カンマなし数字)を取得するライブラリ。入力制限などもできる。依存なし、Vue, React などのプラグインも
  • Sign-in form best practices  |  Articles  |  web.dev

    Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.

  • 1