Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Основы работы с web-формами в HTML

Формы в HTML — пример файла index.html с комментариями

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="forms.css">
    <title>Веб формы</title>
</head>
<body>
<!-- Веб Формы -->
<!-- Формы это метод веб-страницы получать данные от пользователя -->

<!-- Формы обычно содержат ярлыки(labels), поля с вводом данных(inputs), текстовые поля(text area) и кнопки "отправить"(submit) -->
<!-- В основном, процесс обработки формы происходит на части сервера -->

<!-- <form> -->
<!-- Используйте этот тег для создания формы и добавления элементов в неё -->
<form>
    <!-- <label> -->
    <!-- Описывает тип информации которую должен вводить пользователь-->
    <label>Форма</label>
    <input type="text"/>
    <!-- <input type="submit">  -->
    <!-- Отсылает информацию с формы к серверу -->
    <input type="submit" value="Submit"/>
</form>
<br/>

<!-- Типы вводимых данных <input>  -->
<!-- Атрибут "type" задаёт тип вводимых данных -->
<!-- Все обычные типы вводимых данных <input>  -->
<form>
    <input type="text"/>
    <input type="checkbox"/>
    <input type="radio"/>
    <input type="file"/>
    <input type="password"/>
    <input type="submit">
</form>
<br/>

<!-- Атрибуты "for" и "id" -->
<!-- Значение атрибута "for" в теге <label> должно быть таким же как и значение атрибута "id" в теге <input> -->
<!-- Это создаст ассоциацию между тегами <label> и <input> -->
<!-- Значение для каждой пары тегов for/id должно быть уникальным в пределах веб-страницы -->
<form>
    <label for="inputId">For и Id атрибуты</label>
    <input type="text" id="inputId"/>
</form>
<br/>
<!-- <textarea> -->
<!-- Используется для многострочного ввода данных -->
<!-- В отличии от тегов <inputs>, <textarea> требует открывающий и закрывающий тег и тут не нужно определять тип вводимых данных -->
<form>
    <label for="text-area-id">Text Area</label>
    <textarea id="text-area-id"></textarea>
</form>
<br/>
<!-- Добавление стилей для форм -->
<form class="styled-form">
    <label for="styled-form-input">Форма со стилями</label>
    <input type="text" id="styled-form-input"/>
    <label for="checkbox-label">ярлык для чекбокса</label>
    <input type="checkbox" id="checkbox-label"/>
    <input type="submit" value="Submit"/>
</form>

</body>
</html>

Формы в CSS — пример файла forms.css с комментариями

/* Добавление стилей для форм*/
/* <label> и <input> строчные элементы*/
/* В основном, лучше отображать строчные элементы один сверху другого как блочные*/
.styled-form label,input{
    display: block;
}
/*Вы можете задавать стили элементам находящимся в форме*/
.styled-form label{
    margin-bottom: 10px;
}
.styled-form input{
    width: 500px;
    margin-bottom: 25px;
}

/* Селекторы атрибутов */
/* Что бы сделать стилизацию элемента, нужно задать стили его атрибутам*/

/* Задавайте стиль кнопке "отправить" отдельно */
/* Кнопка "отправить" находится в теге <input>, по этому другие свойства для тега <input> будут влиять и на этот элемент тоже */

/* Чтобы создать конкретный селектор, вам нужно : */
/* Имя этого атрибута и его значение */
.styled-form input[type=submit]{
    width: 120px;
    font-size: 30px;
}

/* Добавление стилей для полей ввода */
/* Контейнер вокруг поля ввода это границы, по этому вы можете задать ей стиль с помощью свойства "border" */
.styled-form input[type=text]{
    border: 2px solid #7facaa;
}

/* Изменение высоты поля ввода*/
/* Чтобы достичь этого, вам нужно задать стиль для текста внутри */
/* Так же, границей поля ввода можно манипулировать с помощью отступов (padding), чтобы добавить расстояние между границами и текстом */
.styled-form input[type=text]{
    font-size: 24px;
    padding: 7px;
}

/* Добавление стилей для текстовых полей */
/* Вы можете изменять высоту и ширину текстового поля */
/* Вы можете использовать те же стили, которые используются в постоянных полях ввода (inputs) */
textarea{
    width: 500px;
    height: 400px;
    padding: 7px;
    border: 2px solid #7facaa;
    margin-bottom: 25px;
    font-size: 24px;
}

/* Добавление стилей для чекбоксов (checkbox) */
/* В основном чекбоксы делают на одной и той же строке */
/* Вы можете использовать селекторы атрибута что бы сделать поле ввода и ярлык для него в одну строку*/
.styled-form input[type=checkbox], label[for=checkbox-label]{
    display: inline;
}