公開日 : 2013年4月7日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 先の記事「プレースホルダーについて考える」をまとめる中で再認識したのですが、Web サイトのフォームの各入力要素 (<input> 要素、<textarea> 要素、<select> 要素) には、そのすぐ手前に、常に見える形で、ラベル (項目名) を配置するべきだと考えます。 これは、Web アクセシビリティの基本のひとつであり、JIS X8341-3:2010 でも、下記のとおり規定されています。 コンテンツが利用者の入力を要求する場合は、入力箇所のラベル又は入力方法についての説明文を提供していなければならない。 出典 : JIS-X8341-3:2010「7.3.3.2 ラベル又は説明文に関する達成基準 (等級A)」 このラベルは、入力要素の近くに「ただ書いてあればよ
デモページ: フィールドセット FormHackの使い方 FormHackはSassベースで、フォームのデザイン（フォント、幅、高さ、カラー、ボーダー、角丸など）を簡単に好みのスタイルに変更できます。 カスタマイズは、Sassファイルの上部にまとめられています。 /* FormHack v1.0.0 (formhack.io) */ // Config ----------------------------- // Font $fh-font-family: 'Raleway', sans-serif $fh-font-size: 16px $fh-font-color: rgb(40, 40, 40) // Borders $fh-border-radius: 5px $fh-border-width: 1px $fh-border-style: solid $fh-border-co
CSS3の 隣接セレクタ、属性セレクタ、擬似セレクタの合わせ技で input[type=checkbox]:checked + label の書式を駆使すると、スタイルシートだけでcheckboxやradioのデザインを変更できます。 CSS3のセレクタに対応していないIE8以下では 通常のラジオボタンやチェックボックスが表示されます。 応用編で、cssだけでラジオボタンを2択スイッチに変更も紹介しています。 htmlの構成は inputの次にlabelを配置し、idとforで連動させるようにしておきます。 <div class="sample"> <div> <input type="radio" name="sample-radio" checked="checked" id="radio-1" /><label for="radio-1">radio 1</label> <input
Responsive Newsletter Form A minimal and responsive newsletter form with the addition of some subtle CSS3 animations to enrich the user experience. It's always challenging to push a user to subscribe to your website newsletter. The real key is where you position the call-to-action form IMO. Then there's the UI and UX of the form itself. When the user decides to subscribe, we need to make sure the
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="
フォームのチェックボックスとラジオボタンに余分はタグは使用せずに、ちょっとだけアニメーションを加えて楽しくするスタイルシートを紹介します。 Animated Toggles HTML チェックボックスもラジオボタンも通常通りにマークアップします。 余分なタグは特にありません。 <form> <h1>Animated Toggles!</h1> <div class="controls"> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label> </div
Registration Form The functional demo can be seen above. A complete registration form with a “gender” toggle switch, clean text inputs, and a fancy submit button. The switch could also be used to toggle between sign-up and login. On Mac OS X and iOS this snippet uses the light/semi-bold font weights of Helvetica Neue for an even sharper look. Original PSD by Ionut Zamfir. Download Freebie
Web designers must use HTML, CSS, and CSS3 to make sign-up and registration form templates that look good. These templates are needed to make user interfaces. If you read this post, you will learn more about the registration form in HTML5, CSS3, and CSS. This article will show how to make registration form templates using Cascading Style Sheets (CSS), Cascading Style Sheets 3 (CSS3), and HTML5 in
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
昨年後半辺りから、iPhoneやAndroidなどのスマートフォン案件を実際にやる機会が増えて、今年はもっともっと増えるんだろうなぁと思う今日この頃。 なので今回は、スマートフォン向けサイトのフォームを作成する時に使うかも知れないラジオボタンにフォーカスした記事なんぞを。 ラジオボタンといえば、よく見かけるのは性別の選択とかでしょうか。 何にせよ、下記のような感じです。 ラジオボタン1 ラジオボタン2 んで、これをiPhoneとかで見ると、何の変哲もない普通のラジオボタンですが、iPhoneってラベル部分をタップしても選択できなかったりして使い勝手が悪いと思ったりしませんか？ ボクが持ってる、iPod Touch では反応してくれなかったです。 そこで、ラジオボタンをもっと良さ気なボタンっぽくしてみたら良いんじゃないかと思ったのでやってみました。 サンプルはiPhoneかwebkit系ブラ
Pictos enabled CSS3 checkboxes There was a request, so I tried. The outcome.. no JavaScript, no images and just minimal markup - but a ton of messy CSS3. And only Safari will render it properly. Chrome looks ok, but just with a fake 3D perspective. iOS has some issues with the icons and Firefox, Opera and IE.. well, I haven't tried yet. Read more details or see a screenshot. PS: If you're curious
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く