При разработке сайтов на базе ZF3 мы используем CSS-фреймворк Twitter Bootstrap, который предоставляет
стандартные CSS-правила для стилизации форм и полей форм. Чтобы применить CSS-правила к полю формы
(<input>
, <textarea>
и др.), нужно присвоить ему CSS-класс .form-control
. Кроме того, при использовании
меток (labels) вместе с полями ввода, поместите пары "метка-поле ввода" внутрь элементов <div>
с помощью CSS-класса .form-group
.
Для кнопок отправки формы можно использовать класс .btn
и класс темы (.btn-default
, .btn-primary
и т.п.)
Ниже представлен модифицированный пример формы обратной связи, который использует стилизацию Bootstrap.
<h1>Contact Us</h1>
<p>
Пожалуйста, заполните следующую форму для связи с нами.
Мы высоко ценим ваши отзывы.
</p>
<form name="contact-form" action="/contactus" method="post">
<div class="form-group">
<label for="email">Your E-mail</label>
<input name="email" type="text" class="form-control"
placeholder="name@example.com">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input name="subject" type="text" class="form-control"
placeholder="Type subject here">
</div>
<div class="form-group">
<label for="body">Message Body</label>
<textarea name="body" class="form-control" rows="6"
placeholder="Type message text here"></textarea>
</div>
<input name="submit" type="submit"
class="btn btn-primary" value="Submit">
</form>
Визуализация формы показана на рисунке 7.5.
Так как Twitter Bootstrap разработан для поддержки мобильных телефонов, планшетов и настольных компьютеров, он делает поля формы в ширину экрана. Это может сделать форму слишком широкой и сложной для понимания. Чтобы ограничить ширину формы, используйте предоставляемую Bootstrap сетку, как в примере ниже:
<div class="row">
<div class="col-md-6">
<form>
...
</form>
</div>
</div>
В данной HTML-разметке мы помещаем форму в ячейку шириной в 6 столбцов, что делает форму шириной в половину экрана.