React コンポーネントの「制御・非制御」を意識しない方法
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
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
Form Validation UX In HTML And CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! You can do an impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right! (You can) make the label look like a placeholder First: always use rea
Styling Cross-Browser Compatible Range Inputs With CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Styling for range inputs has improved dramatically since the release of IE 10. It is now possible to generate cross-browser compatible range inputs (sliders) using only CSS. In this tutorial, we will take a basic range input (<input type="range">): Screenshot of a range input, Mac Chrome 38
» checkboxのテキストにはuser-select: none;を付けるといいかも。 | isee ウェブに関するブログ
ダブルクリックの処理 checkboxとテキストをlabelタグで囲み、テキスト部分をクリックしてもチェックが入るというような処理は、必ずといってもいいほど行うことかと思います。 しかし、checkboxのテキストをダブルクリックしてしまい、テキストが選択状態になっていると上手くチェックを切り替える事がで出来なくなってしまうことがあります。 あまりダブルクリックをするということはないかもしれませんが、チェックを入れた瞬間に「あっやっぱり外そう」と思い瞬時にクリックをするとテキストを選択してしまい、切り替えが上手くいかない場合があります。以下のような感じです。 現象発生ブラウザ テキスト選択時にチェックが上手く切り替える事が出来なくなるブラウザは、確認した限りGoogle Chromeのみでした。(IEでも少しおかしかったです)ほかのブラウザではテキストが選択状態にある場合でも、チェックの切
Use Radio Buttons For Single Option » cssmojo
In Designing an Effective Donate Form Brad Frost recommends using buttons in lieu of radio buttons, citing a tweet from Luke Wroblewski. I disagreed and Brad responded saying he had a different point of view. After more people got involved the demo was updated to use radio buttons, but I think there is still room for improvement; I intend to demonstrate that Plain Old Semantic HTML (POSH) + CSS ca
入力フォームのラベルをフワッと浮かせるパターンの別解
Float Label Patternはかっこよくて、単にラベルをプレースホルダーにするよりはマシなので使いたくなる。しかしラベルとプレースホルダーは別に提供してやりたい。機能も違うものなので、その方がきっと良いはずだ。そこで別解として、ラベルが斜めに動くものを考えた。もちろんCSSのみで実装している。 Demo: Alternative Float Label Pattern 入力フォームにフォーカスすると、左にあるラベルが斜め右上に少し移動すると同時に入力フォームが左へ拡大する。これによりFloat Label Patternと同じような結果になるが、デフォルトの状態ではラベルとプレースホルダーを両立させることができる。 ラベルを入力フォームのフォーカスと連携させるには、隣接兄弟セレクターを使うくらいしか方法はなさそうなので、マークアップは入力フォーム→ラベルの順にする必要がある。また
WTF, forms?
Friendlier HTML form controls with a little CSS magic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox. Created by @mdo. WTF forms on GitHub @mdo on Twitter <label class="control checkbox"> <input type="checkbox"> <span class="control-indicator"></span> Check this custom checkbox </label> <label class="control radio"> <input id="radio1" name="radio" type="radio"> <span class="
Minimal Form Interface | Codrops
A very simplistic form interface that shows only one text input at a time and reveals the next input with a subtle transition. The concept is based on the form at the bottom of the PageLanes website. Today we’d like share a very simplistic form interface with you. You’ve probably seen this kind of single input view form in several modern websites. We spotted one in the end of the PageLanes website
そこそこユーザビリティの高いフォームを作った
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習＆業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです（サーバ側スクリプト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
pretty-checkbox.css
range.css
Replacing Radio Buttons Without Replacing Radio Buttons — SitePoint
JS Bin
Redirecting…
Dropthebit - A Bitcoin platform on-the-rise