HTML forms - alignment problem

How do I make forms with background colour? Using tables?

Also I can't seem to line up the text to the first row of each textarea?

Edit: To clarify, this is my code:

Summary: <textarea rows="1" cols开发者_运维知识库="50"> </textarea><br/><br/>

---

Changing the background colour of the form is very simple. Using CSS and a unique id, apply a style to the form:

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

Using CSS

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

In fact, you don't even have to use an ID, but it's advisable if you are going to have several forms with each requiring a unique style. Otherwise, you could just reference the form element in your CSS as such: form { background-color: your-color-of choice; }

As far as aligning the text along with a text area, you can use plain CSS, divs, or tables. But I think you should ask this separately as it is another scope altogether. Do some research and search for other questions on alignment here on SO to see which method will work best for you.

To give you an idea, though, try this:

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

In CSS

#myForm {
    width:500px
}

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

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

I don't recommend you do it exactly this way, but this should give you a start.

---

If you will have many different fields in the form, you might consider wrapping each section in a fieldset:

<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>

The fieldset lets you define a "legend" for the group of fields (the name at the top) and puts a box around them. IMHO it gives a pretty cool effect. And, of course, you can style them with css.

Good luck!