03. Формы и взаимодействие

Что такое форма

Формы — это способ взаимодействия пользователя с сайтом. С их помощью можно вводить данные: логин, пароль, комментарий, email или отправлять сообщение на сервер.

Пример самой простой формы


<form action="#" method="post">
  <label>Имя: <input type="text" name="name"></label><br>
  <label>Email: <input type="email" name="email" required></label><br>
  <button type="submit">Отправить</button>
</form>

Разберём подробнее:

```
<form>
```
— контейнер формы. Атрибут
```
action
```
указывает, куда отправляются данные,
```
method
```
— каким способом (чаще всего POST).
```
<label>
```
— подписывает поле, делает форму удобной и доступной.
```
<input>
```
— само поле ввода (текст, email, пароль и т.д.).
```
<button>
```
— кнопка отправки данных.

Типы полей ввода

Тег

<input>

может быть разным в зависимости от типа данных.

Примеры:


<input type="text" placeholder="Ваше имя">
<input type="email" placeholder="Email">
<input type="password" placeholder="Пароль">
<input type="number" min="1" max="10">
<input type="checkbox"> Подписаться на новости
<input type="radio" name="gender" value="male"> Мужчина
<input type="radio" name="gender" value="female"> Женщина
<input type="file">

Что делает каждый атрибут

```
placeholder
```
— текст-подсказка внутри поля.
```
required
```
— делает поле обязательным.
```
value
```
— значение по умолчанию.
```
min
```
и
```
max
```
— ограничения для чисел и дат.
```
name
```
— имя переменной, через которую данные передаются на сервер.

Многострочные поля и списки

Иногда нужно ввести длинное сообщение или выбрать значение из списка.

Пример с textarea и select


<form>
  <label>Сообщение:</label><br>
  <textarea name="message" rows="4" cols="40" placeholder="Введите ваш комментарий..."></textarea><br><label>Город:</label>
  <select name="city">
    <option>Москва</option>
    <option>Нукус</option>
    <option>Ташкент</option>
  </select><br><button type="submit">Отправить</button>
</form>

Совет:

Элементы

<textarea>

<select>

тоже можно стилизовать с помощью CSS или Bootstrap, чтобы форма выглядела современно.

Форма обратной связи

Давайте создадим мини-проект: форму обратной связи для сайта.

Пример:


<form action="#" method="post">
  <fieldset>
    <legend>Свяжитесь с нами</legend>
    <label>Имя:<br>
      <input type="text" name="name" required>
    </label><br><label>Email:<br>
      <input type="email" name="email" required>
    </label><br>
<label>Сообщение:<br>
      <textarea name="message" rows="5" placeholder="Ваше сообщение..."></textarea>
    </label><br>
<label><input type="checkbox" checked> Я согласен с политикой конфиденциальности</label><br><button type="submit">Отправить</button>
  </fieldset>
</form>

Что мы используем здесь:

```
<fieldset>
```
— объединяет логически связанные поля в группу.
```
<legend>
```
— заголовок для группы полей.
Чекбокс с согласием — стандарт для любой формы.

Валидация и доступность

Браузер сам проверяет некоторые типы полей. Например, если указано

type="email"

, то форма не отправится, пока пользователь не введёт корректный адрес.

Пример ошибки валидации:

Попробуйте ввести “abc” в поле Email — браузер подсветит ошибку.

Мини-проект: форма регистрации

Теперь соберём простую форму регистрации с паролем и выбором города.

Пример:


<form action="#" method="post">
  <h2>Регистрация</h2>
  <input type="text" placeholder="Имя пользователя" required><br>
  <input type="email" placeholder="Email" required><br>
  <input type="password" placeholder="Пароль" required><br><select>
    <option selected disabled>Выберите город</option>
    <option>Нукус</option>
    <option>Москва</option>
    <option>Самарканд</option>
  </select><br><button type="submit">Создать аккаунт</button>
</form>

Итоги урока

Теперь вы знаете:

Как создавать формы и поля ввода.
Какие бывают типы
Как добавить многострочный текст и выпадающие списки.
Как использовать валидацию и оформить форму красиво.