今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル
今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。 フォームサンプル HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。 <div> <label for="email">メール</label> <input type="email" id="email" name="email" placeholder="example@example.com" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="val
IE のフォームがタコい件について。
IE のフォームがタコい件について。 $Id: input-type-submit.php,v 1.8 2008/07/23 01:56:52 isaki Exp $ フォームの書き方によって、ブラウザごとに挙動が違うらしく、 時に致命的なバグになる (というか遭遇した)。 慌てていろいろまとめサイトを調べてみたけど、結局自分のところで 起きてる現象の解決に必要なだけの情報は自分で調べないと 分からないので、 まずは起きている現象を把握するために調べてみた。 このへん詳しくないので 解決方法が適当かどうかはよく知らない(ぉ。 テスト A IE6、IE7 の <button> が使いものにならないという話。 これについては こちら が 詳しい。 A3 は、A2 の結果を踏まえて、こんなコードを書いて、 このフォームを受け取るのが PHP の $_REQUEST (のような連想配列) だったら
IE6のフォームの挙動
Internet Explorer 6 はフォームのsubmit時に予想外の挙動をすることがあるようだ。気づいた点をメモしておく。 なお、IE7では動作が一部改善されているようだが、このページではIE7の挙動については触れていない。次のサイトでは、IE7やOpera9も含めた動作内容がまとめられている。 IE のフォームがタコい件について。 目次 buttonタグで作ったボタンのvalue属性は無視される buttonタグで作ったボタンは押されなくてもsubmitされる テキストボックス内でのEnterキー押下でボタンがsubmitされないことがある 動作確認に使用したブラウザのバージョンは、IEが6.0.2800.1106、Firefoxが1.0.6。 buttonタグで作ったボタンのvalue属性は無視される buttonタグでは次のようにvalue属性を指定することができ、submi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
