プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
型付けを頑張る 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
React コンポーネントの「制御・非制御」を意識しない方法
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
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.
JSON Schema で複雑な仕様の入力フォームの実装に立ち向かった話
Ruby on Rails を用いたシステム上で入力フォームを実現する際、Rails が提供しているフォームヘルパーを利用した実装や、React や Vue によるコンポーネントの自前での実装が一般的に行われます。 ここで、職業で学生を選択した場合は学校名と学年、会社員を選択した場合は役職と年収を入力する...といった、条件分岐が大量に生まれる入力フォームを想像しましょう。 一般的な実装手法では、あるフォームの入力値が他のフォームに影響を与えるような、複雑で動的な入力フォームの実現をするために、大量の if 文を書く必要があります。 また、ユーザから送信された入力値の正しさをバリデーションするために、バックエンド側に同様の if 文を大量に書く必要が出てきます。 そこで私は、複雑な仕様の入力フォームの実装のための JSON Schema 活用方法および事例について紹介します。入力フォームの
Geri Reid - Forms best practice
Form design Best practice, research insights and examples Here's my best practice guidelines for form design. Working on a design system for a bank taught me a lot about forms. I watched testing in labs. I worked alongside experts from specialist accessibility organisations. I saw forms tested by people with disabilities and users of assistive technology. I've also read a lot of research. From all
Improving form controls in Microsoft Edge and Chromium
Better touch support Windows devices come in a rich array of form factors and input modalities, including traditional desktop and laptop PCs, 2-in-1 devices, and other tablets and pen devices. We heard your feedback looking for a better touch input experience in our early Chromium preview builds, and set out to take an inventory of the controls to identify opportunities to improve the touch experi
railsで複数チェックボックスの値を使って検索する - Qiita
Rails 4.0.3です。 railsで複数チェックボックスの値を使ってテーブルの検索するには、check_boxタグのmultipleオプションを利用します。 例)性別判定 gender.html.haml = form_for @search_form, url: hoge_path, remote: true, html: {method: :get} do |f| %table %tr %th 性別 : %td = f.check_box :gender, {multiple: true}, 'male',nil 男性 = f.check_box :gender, {multiple: true}, 'female',nil 女性 = f.check_box :gender, {multiple: true},'empty',nil データなし <input id="search
フォームデータの送信 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
ActiveModel Form Objects
Submitting form data is a common feature of web applications – allowing users to submit their information and giving them feedback whether the information is valid or not. ActiveRecord comes with a powerful set of validators for attributes on a persisted data model. When data is not persisted, or used for other non-active record purposes, Active Model Helper Modules reduce the complexity of valida
ActionView::Helpers::FormHelper
Form helpers are designed to make working with resources much easier compared to using vanilla HTML. Typically, a form designed to create or update a resource reflects the identity of the resource in several ways: (i) the url that the form is sent to (the form element's action attribute) should result in a request being routed to the appropriate controller action (with the appropriate :id paramete
form objectを使ってみよう - メドピア開発者ブログ
こんにちは。メドピアのRuby(Rails)化をお手伝いしている@willnetです。 Ruby化のプロジェクトが始まって1年が過ぎました。新しいメンバーも入り、Railsのコード量は日に日に多くなっています。可読性を保ちつつアプリケーションを大きくしていくために、使える知見をチームメンバーに効率よく伝えていくのが大事だと感じる今日このごろです。 普段メドピア内ではコードレビューや社内勉強会などで知識のシェアを行っています。そんなとき、ブログ記事や書籍などのまとまった文章があると「これ読んでおいて」と言うだけで良くなるので楽です。先日form objectを使ったほうがいいですよーという内容でレビューコメントをつけようとしたところ、日本語で詳しくまとまった文章が見当たりませんでした＞＜なければ自分で書くしかありません。そこで今回はRailsにおいて可読性を保つための知見である、form o
formvalidation_CSSDay
Form validation Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Browser API Special, 15 June 2017 Form validation Literally the oldest trick in the JavaScript book. Netscape 2 could do form validation, and little else. Modern input types • type=“date” • type=“email” • required • pattern • and so on Modern input types • Automatically validated • Automatically get native error messages
【Rails】form_for/form_tagの違い・使い分けをまとめた - Qiita
※追記: fields_forにかんして、新しくこちらの記事にまとめたので是非一緒に参照してください。 form_tagとform_forの使い分け Railsにおけるformを理解するために、最初に理解すべきなのがこの違いです。 Railsのform_for/form_tagの分け方の意図としては、 form_for: 任意のmodelに基づいたformを作るときに使う form_tag: modelに基づかないformを作るときに使う ということです。 つまり、あるuserモデルに基づいたuserを作成するときはform_forを使い、 そうではなく、検索窓のような何のモデルにも基づかないformを作りたいときはform_tagを使うのが原則です。 具体的に何が違って、その用途はどう分かれているのか。 結論としてform_forはモデルオブジェクト扱う上で便利 post先のurlは不要
Form Validation Part 1: Constraint Validation in HTML | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some cus
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using Forms in React
Accessible React Forms
No Style Design System
Let select render default selected option for required field by prikha · Pull Request #32087 · rails/rails
pretty-checkbox.css
