HTML-формы - проблема выравнивания

Question

Как создавать формы с цветом фона? Использование таблиц?

Также я не могу выровнять текст в первую строку каждого текстового поля?

Edit: Чтобы уточнить, это мой код:

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

Answer 1

Изменение цвета фона формы очень просто. Использование CSS и уникальный идентификатор, применить стиль к форме:

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

Использование CSS

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

В самом деле, вам даже не придется использовать идентификатор, но это желательно, если вы будет иметь несколько форм, каждый из которых требует уникального стиля. В противном случае вы можете просто ссылаться на элемент формы в своем CSS как таковой: form { background-color: your-color-of choice; }

Что касается выравнивания текста и текстовой области, вы можете использовать простые CSS, divs или таблицы. Но я думаю, вы должны спросить об этом отдельно, поскольку это еще одна область применения. Проведите некоторое исследование и найдите другие вопросы по выравниванию здесь на 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

Если вы будете иметь много различных полей в форме, вы можете рассмотреть возможность оборачивать каждую секцию в 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> 

FIELDSET позволяет определить «легенду» для группы полей (имя в сверху) и помещает вокруг них коробку. ИМХО это дает довольно крутой эффект. И, конечно же, вы можете нарисовать их с помощью css.

Удачи вам!