Form stili en iyi uygulamalar

Question

Photoshop'ta güzel bir form öğeleri kümesi oluşturdum ve bunları HTML ve CSS'ye dönüştürmeyi düşünüyorum. Alanın boyut olarak değişmemesi nedeniyle, basit giriş metin formunun bir arka plan resmi olacaktır. Bununla birlikte, metin alanı formu, kullanıcı türleri olarak boyutu dinamik olarak değiştirecektir.

Normalde, stil bu tür oluşturmaktır, ben gibi, div 'ler içinde form alanını sarmak:

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

Ya tek sarma div birden arka plan görüntüleri kullanılarak:

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

Buna yaklaşmanın daha iyi bir yolu var mı? Yeniden boyutlandırmak için, alan stilleri tekrarlanabilen (alanın gövdesi için) gelişmiş resimlerdir ve üst ve alt için stil sahibi olur. Soru şu, bu gelişmiş form stiliyle uğraşırken en iyi uygulama nedir?

Answer 1

"En iyi uygulama" ile neyi kastettiğinizden tam olarak emin değilim, ancak geliştireceğim bir şey semantiklerdir. yerine yerine <fieldset> 'u kullanabilirsiniz.

Ve (bir CSS3 özelliktir ve yaygın desteklenmeyen) bir tek <div> üzerine textarea, hatta birden arka plan resimleri yaklaşık iki <div> 's kullanmaya gerek yoktur.

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

Bonus: sarma form öğeleri bu deneyin

: Ben aşağıda tarif ettik

Bunun yerine, bir <label> öğesi <textarea> ve yuva arka plan-görüntüleri yerleştirilmeli <label> 'un bu şekilde olması, kullanıcının eldeki form elemanına odaklanması için daha büyük bir tıklama alanı sağlar. Sadece bir şey gibi olurdu (o geçerli HTML olsa bile) güzel çalmıyor <select> 's,

CSS konusunda dikkatli olun: Ayrıca

.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);} 

; Form öğelerin tutarlı görünümleri için, her tarayıcıda & platformunda, Nathan Smith'in Formalize CSS (daha eski tarayıcılarda HTML5 desteği için JS gerektirir) önemle tavsiye edebilirim.