HTML表單 - 對齊問題

Question

如何製作帶背景顏色的表單？使用表？

另外我似乎無法排隊文本到每個textarea的第一行？

編輯： 爲了澄清，這是我的代碼：

Summary: <textarea rows="1" cols="50"> </textarea><br/><br/> 

Answer 1

改變窗體的背景顏色是很簡單的。使用CSS和一個唯一的ID，應用樣式的形式：

<form id="myForm"></form> 

使用CSS

#myForm { 
    background-color: your-color-of choice; 
} 

事實上，你甚至不必使用一個ID，但它是明智的，如果你是將有幾種形式，每種形式都需要獨特的風格。否則，你可以只參考CSS中的表單元素，例如：form { background-color: your-color-of choice; }

至於對齊文本和文本區域，您可以使用普通的CSS，div或表格。但我認爲你應該單獨提出這個問題，因爲這是另一個範圍。做一些研究並搜索關於SO的其他問題，以瞭解哪種方法最適合您。

爲了給你一個想法，不過，試試這個：

<form id="myForm"> 
<label for="myTextArea">Summary</label> 
<textarea id="myTextArea"></textarea> 
</form> 

在CSS

#myForm { 
    width:500px 
} 

#myForm label { 
    float:left; 
    display:block; 
    width:150px; 
} 

#myForm textarea { 
    float:left; 
    width:200px; 
} 

我不建議你這樣做正是這樣，但是這應該給你一個起點。

Answer 2

如果你將在表單許多不同的領域，你可能會考慮包裝在一個字段每個部分：

<form id="myform"> 
    <fieldset id="customerinfo"> 
    <legend>Personal Info</legend> 
    Name: <input type="text" /><br/> 
    Address: <input type="text" /><br/> 
    etc... 
    </fieldset> 
    <fieldset id="orderinfo"> 
    <legend>Your Order:</legend> 
    Product: <input type="text" /><br/> 
    Quantity: <input type="text" /><br /> 
    etc... 
    </fieldset> 
</form> 

字段集可以讓你定義一個「傳奇」的字段組（名稱爲頂部）並在他們周圍放一個盒子。恕我直言，它給了一個非常酷的效果。當然，你可以用CSS來設計它們。

祝你好運！