Веб-формы — Работа с пользовательскими данными

Примечание. Вы также можете использовать элемент с соответствующим type для создания кнопки, например . Основное преимущество элемента заключается в том, что элемент допускает только простой текст в своей метке, в то время как элемент допускает полный HTML-контент, что позволяет использовать более сложное, креативное содержимое кнопки.

Базовый стиль формы

Теперь, когда вы закончили писать HTML-код формы, попробуйте сохранить его и просмотреть в браузере. На данный момент вы увидите, что это выглядит довольно некрасиво.
Примечание. Если вы считаете, что у вас неправильный HTML-код, попробуйте сравнить его с нашим готовым примером — см. first-form.html (также см. его вживую ).
Общеизвестно, что формы сложно красиво стилизовать. Подробное обучение стилю формы выходит за рамки этой статьи, поэтому на данный момент мы просто попросим вас добавить немного CSS, чтобы все выглядело нормально.
Прежде всего, добавьте
Скопировать в буфер обмена
Внутри style тегов добавьте следующий CSS:
form {
/* Center the form on the page */
margin: 0 auto;
width: 400px;
/* Form outline */
padding: 1em;
border: 1px solid #ccc;
border-radius: 1em;
}

ul {
list-style: none;

padding: 0;
margin: 0;
}

form li + li {

margin-top: 1em;
}

label {
/* Uniform size & alignment */

display: inline-block;
width: 90px;
text-align: right;
}

input,
textarea {

/* To make sure that all text fields have the same font settings
By default, textareas have a monospace font */
font: 1em sans-serif;

/* Uniform text field size */

width: 300px;
box-sizing: border-box;

/* Match form field borders */

border: 1px solid #999;
}

input:focus,

textarea:focus {
/* Additional highlight for focused elements */
border-color: #000;
}

textarea {

/* Align multiline text fields with their labels */
vertical-align: top;

/* Provide space to type some text */

height: 5em;
}

.button {

/* Align buttons with the text fields */
padding-left: 90px; /* same size as the label elements */
}

button {
/* This extra margin represent roughly the same space as the space

between the labels and their text fields */
margin-left: 0.5em;
}
Скопировать в буфер обмена
Сохраните и перезагрузите, и вы увидите, что ваша форма должна выглядеть гораздо менее уродливо.
Примечание. Вы можете найти нашу версию на GitHub по адресу first-form-styled.html (также смотрите ее вживую).