Формы нужны для того, чтобы пользователь мог отправить данные на сервер: логин, поиск, обратную связь, регистрацию.

1. Контейнер формы — <form>

Все элементы формы должны быть внутри <form>.

<form>
    ... поля формы ...
</form>

2. Подпись к полю — <label>

Тег <label> связывает текст с полем. При клике на текст фокус переходит в поле.

<label for="username">Имя пользователя:</label>
<input type="text" id="username">

Как это выглядит в браузере:

3. Текстовые поля — <input type="text">

Однострочное текстовое поле. Атрибут placeholder показывает подсказку внутри поля.

<label for="name">Ваше имя:</label>
<input type="text" id="name" placeholder="Иван">

Как это выглядит в браузере:

4. Поле пароля — <input type="password">

Символы скрываются звёздочками или точками.

<label for="pwd">Пароль:</label>
<input type="password" id="pwd">

Как это выглядит в браузере:

5. Электронная почта — <input type="email">

Браузер проверяет, похоже ли значение на email (должна быть @ и точка).

<label for="email">Email:</label>
<input type="email" id="email">

Как это выглядит в браузере:

6. Многострочное поле — <textarea>

Для длинного текста, комментариев, описаний.

<label for="comment">Комментарий:</label>
<textarea id="comment" rows="4" cols="40"></textarea>

Как это выглядит в браузере:

7. Выпадающий список — <select> и <option>

Позволяет выбрать один вариант из нескольких.

<label for="city">Город:</label>
<select id="city">
    <option>Москва</option>
    <option>СПб</option>
    <option>Казань</option>
</select>

Как это выглядит в браузере:

8. Флажок — <input type="checkbox">

Можно выбрать несколько вариантов или согласиться с условиями.

<input type="checkbox" id="agree">
<label for="agree">Согласен с условиями</label>

Как это выглядит в браузере:

9. Переключатель — <input type="radio">

Выбор одного варианта из группы. У всех радиокнопок в группе одинаковый name.

<input type="radio" name="gender" id="male">
<label for="male">Мужской</label>
<input type="radio" name="gender" id="female">
<label for="female">Женский</label>

Как это выглядит в браузере:

10. Кнопка отправки — <input type="submit"> и <button>

Отправляет форму на сервер.

<input type="submit" value="Отправить">
<button type="submit">Отправить</button>

Как это выглядит в браузере:

11. Куда отправляется форма — action и method

Когда пользователь нажимает кнопку отправки, браузер собирает все данные из полей и отправляет их на сервер.

• action — адрес, куда отправлять данные (например, /login.php или /api/submit)
• method — способ отправки (GET или POST). Пока просто запомните, что GET — данные видны в адресной строке (для поиска), POST — не видны (для паролей и сообщений).

<form action="/send-form.php" method="post">
    <label for="msg">Сообщение:</label>
    <textarea id="msg"></textarea>
    <input type="submit" value="Отправить">
</form>

12. Что нельзя делать с формами

• Вкладывать формы друг в друга — запрещено.
• Использовать <button> без type внутри формы — по умолчанию он работает как submit.
• Забывать связывать <label> с полем через for и id.