CSS Only Floated Labels with :placeholder-shown pseudo class - Call Me Nick
In this tutorial, we’re going to build a CSS only solution to the floated label technique using the :placeholder-shown pseudo class. The Floated Labels Technique When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the bala
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗRead less
[CSS]この発想はなかった！inputとlabelを使って実装する美しいデザインのアコーディオン
パネルが開いた+ホバー時 パネルが開いている時のアローは上向きに変わります。 デモでは上記のチェックボックス版だけでなく、ラジオボタン版などもあります。 デモページ：チェックボックス版 デモページ：ラジオボタン版 デモページ：チェックボックス版・デフォルトオープン 実装 HTML 一つのアイテムに含まれるのは、チェックボックス、ラベル、コンテンツの3つです。それらをdiv要素で内包します。 <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">About us</label> <article class="ac-small"> <p>Some content... </p> </article> </div> <div> <
iOSのフォームで label要素をタップできるようにするJavaScript
H2O Space. のたにぐちまことが、H2O Blog.に投稿するまでもないようなちょっとした話題やサイトクリップを投稿する、つぶやきブログ。 お仕事のご依頼などは、こちらへどうぞ iOSおよび iPhone OSでは、最新版の iOS 5であっても label要素をタップすることができません。そのため、ラジオボタンやチェックボックスなどは、パーツ自体をタップしなければならず、かなり細かな操作を要求されます。 そこで、次のようなスクリプトを書いて書籍「iPhone+Android スマートフォンサイト制作入門」にも収録しました。 $(‘label’).click(function() { var t = ’#’ + $(this).attr('for’); $(t).attr('checked’, !$(t).attr('checked’)); });
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
