フォームスタイリングのベストプラクティス

Question

Photoshopでフォーム要素の素晴らしいセットを作成し、HTMLとCSSに変換しようとしています。単純な入力テキストフォームは、フィールドのサイズが変更されないため、背景イメージを持ちます。ただし、ユーザーが入力すると、テキスト領域の形式が動的に変更されます。スタイルのこの種を構築するための

通常、私のような、div要素でフォームフィールドをラップしたい：

<div class = "textarea-top"> 
    <div class = "textarea-bottom"> 
    <textarea></textarea> 
    </div> 
</div> 

または1つの包装のdiv内に複数の背景画像を使用することにより：

<div class = "textarea"> 
    <textarea></textarea> 
</div> 

これにアプローチするより良い方法はありますか？説明すると、フィールドスタイルは、（フィールドのボディのために）繰り返すことができる高度なイメージであり、上部と下部のスタイルを持っています。問題は、これらの高度なフォームスタイリングに対処するベストプラクティスは何ですか？

Answer 1

「ベストプラクティス」の意味を完全にはわかりませんが、改善したいのはセマンティクスです。 <div>の代わりに、<fieldset>の代わりに使用することができますか？

<div>の周りにtextareaの2つ、または<div>（広範にサポートされていない1つの<div>）の複数の背景イメージを使用する必要はありません。

<fieldset class="expandableInput"> 
    <label> 
    Semantic text: 
    <textarea></textarea> 
    </label> 
</fieldset> 

ボーナス：ラッピングフォーム要素でこれを試してみてください

：私は以下に記載しましたよう

代わりに、あなたは<label>要素で<textarea>、および巣あなたの背景画像をラップする必要があります<label>はこのように、より大きなクリック領域を提供し、ユーザーは手元のフォーム要素に焦点を当てることができます。ただ、何かのようになります（それが有効なHTMLのだが）素晴らしいプレーしない<select>年代、

CSSを警戒する：また

.expandableInput {background: url(/path/to/first/img);} 
    .expandableInput label {display: block; background: url(/path/to/second/img);} 
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);} 

。 フォーム要素を一貫して表示するには、すべてのブラウザの&プラットフォームで、Nathan SmithのFormalize CSSをお勧めします（古いブラウザではJSにHTML5サポートが必要です）。