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来设计它们。

祝你好运！