eYou.com に入った後、すぐに新しいバージョンの電子メール インターフェイスを XHTML+CSS に変換する必要がありました。幸いなことに、私の基本的なスキルはまだ十分にしっかりしていたので、順序立てて実行しました。もちろん、通常 Web ページを作成する場合、プログラムの経験がないため、フォームを使用することはほとんどありません。幸いなことに、世界にはまだ Google が存在するため、新しい課題にも簡単に対処できます。いくつかの経験を書き留めて、みんなと共有してください。
アクセシビリティの考慮事項に基づいて、フォームを記述する標準的な方法では、ユーザーがフォーム フィールドの概要を理解できるように、<form> と </form> にフィールドセットと凡例 (説明) を含める必要があります。簡単な構造は次のとおりです。
| 引用した内容は以下の通りです。 <フォーム> <フィールドセット> <凡例></凡例> ... </フィールドセット> </form> |
場合によっては、フィールドセットと凡例がデザインの美しさに影響を与えたくない場合があります。これは、CSS でフィールドセットの境界線を 0 に設定し、凡例の表示をなしに設定するだけで済みます。
ほとんどの場合、フォームのレイアウトは 2 つの列に分割され、左側にラベル、右側に入力ボックス (input type="text"...) が配置されます。このような単純な 2 列のレイアウトでは、テーブルを使用しないことを強くお勧めします。参照 http://stylephreak.frogrun.com/uploads/source/cssform.php と http://www.aplus.co.yu/css/forms/?css=1 (間違いなく貴重な 2 つの参照、あなたはすでに知っています。続きを読む必要はありません)、Web 標準の一般的な解決策は、ラベルの周囲に div を追加して type="text"... と入力し、div の表示をブロックに設定することであることがわかりました。ラベルを float: left; に設定すると (div が display: block; に設定されるのもこれが理由です)、ラベルを入力ボックスと同じ行に配置できます。ラベルを揃えるちょっとしたコツは、ラベルの幅を固定し、必要に応じて text-align を使用してラベルを左または右に揃えることです。幅を設定するためのヒントは、px を苦労してテストすることなく、em 単位を使用してタグの最大ワード数に基づいて幅を設定することです。
説明を理解しやすくするために、コードをいくつか書きます。
| 引用した内容は以下の通りです。 XHTML: (部分的) <フォーム> body {/*フォームとは関係なく、ページの表示効果を設定します*/ |