窗體造型最佳實踐

我在Photoshop中創建了一組很好的表單元素，並且希望將它們轉換爲HTML和CSS。簡單的輸入文本表單將具有背景圖像，因爲該字段的大小沒有變化。但是，文本區域表單將隨用戶輸入而動態更改大小。窗體造型最佳實踐

通常情況下，打造出了這種風格，我會敷窗體域的div，因爲這樣的：

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

或在一個包裹格使用多個背景圖像：

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

有沒有更好的方法來解決這個問題？要重申，字段樣式是可以重複的高級圖像（對於字段的主體），並且具有頂部和底部的樣式。問題是，處理這些高級表單樣式的最佳做法是什麼？

來源

2011-09-05 Akaishen

我不完全確定「最佳實踐」是什麼意思，但我會改進的一點是語義。你可以（應該？）使用<fieldset>而不是一個毫無意義的<div>。

而且您不需要在textarea附近使用兩個<div>，或者在單個<div>（這是一個CSS3屬性，但沒有廣泛支持）上使用多個背景圖像。

相反，你應該換一個<label>元素<textarea>和巢您的背景圖像，因爲我已經描述如下：

試試這個：

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

加成：包裝形式元素<label>就是這樣，提供了一個更大的點擊區域，讓用戶能夠專注於手頭的表單元素。只是要警惕<select>的，它沒有發揮好（儘管它是有效的HTML）

的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）。

來源

2011-09-06 08:18:05 cabgfx

謝謝CabGFX，真的有幫助。 Formalize看起來非常整齊，我稍後再試一試。至於我想要做的，我需要三個背景圖片（頂部，中間重複和底部）。我會更多地關注Fieldset標籤，並瞭解如何讓表單更加語義化。我不認爲你會想要用字段集合來包裝所有的文本區域，儘管我可能是錯的。無論如何，這有所幫助。謝謝！ – Akaishen

很高興幫助 - 足以接受答案？對於'

'你是對的，它的意思是在你的表格中對一個或多個字段進行邏輯分組，最好用''來表示字段的上下文。我將編輯我的答案，以獲得更多關於實現三個背景圖像的詳細信息。 – cabgfx

是的，它保證一個被接受的答案。我爲延誤表示歉意。我忘了，因爲我在這裏還是比較新的。 ;）使用標籤是一個很棒的主意！再次感謝你的幫助。 – Akaishen

窗體造型最佳實踐

回答

相關問題