Атрибуты форм: action, method, name, value, placeholder, required, disabled

Введение в атрибуты форм 🌟

Формы — это мост между пользователем и сервером. Без них не было бы авторизации, поиска, комментариев и других интерактивных элементов. Но как формы понимают, куда отправлять данные и как их обрабатывать? Всё решают атрибуты! Сегодня разберём ключевые из них.

action: Куда отправляем? 🎯

Атрибут action указывает URL, куда отправятся данные формы после её заполнения. Если его не указать, данные уйдут на текущую страницу.

<form action="/submit-form">
  <!-- Поля формы -->
</form>

Пример из жизни:
Форма входа (/login) отправляет данные на сервер (/auth) для проверки.

method: GET или POST? 📤

Определяет способ отправки данных формы:

• GET — данные добавляются в URL (видны в адресной строке).
  Подходит для поиска, фильтров.

<form action="/search" method="GET">
<input type="text" name="query">
</form>

При отправке URL станет: `/search?query=Python`

• POST — данные скрыты в теле запроса.
  Используется для паролей, платежей.

<form action="/pay" method="POST">
<input type="password" name="card-pin">
</form>

name: Идентификатор поля 🏷️

Сервер получает данные в виде пар name=value. Без name поле не отправится!

<input type="text" name="username">

Если ввести Danila, сервер увидит: username=Danila.

Лайфхак:
Имена должны быть уникальными в пределах формы (кроме radio и checkbox).

value: Значение по умолчанию 💾

Задаёт начальное значение поля. Можно менять через JavaScript или вручную.

<input type="text" name="city" value="Москва">

Для чекбоксов/радио-кнопок value — это то, что отправится на сервер:

<input type="checkbox" name="subscribe" value="yes"> Подписаться

placeholder: Подсказка 🔍

Исчезает при вводе текста. Не заменяет <label>! Используется для примеров:

<input type="email" placeholder="email@example.com">

Важно:
Не злоупотребляйте — некоторые скринридеры игнорируют placeholder.

required: Обязательное поле ⚠️

Браузер не отправит форму, пока поле не заполнено. Работает без значения!

<input type="text" name="phone" required>

Совет:
Всегда дублируйте проверки на сервере — пользователь может отключить JavaScript.

disabled: Заблокированное поле 🔒

Поле недоступно для редактирования и не отправляется на сервер.

<input type="text" value="Только для чтения" disabled>

Отличие от readonly:
readonly позволяет выделять/копить текст, но тоже блокирует редактирование.

Практика: Собираем всё вместе 🧩

Форма регистрации с использованием всех атрибутов:

<form action="/register" method="POST">
  <input type="text" name="username" placeholder="Придумайте логин" required>
  <input type="email" name="email" placeholder="Ваш email" required>
  <input type="password" name="pwd" placeholder="Пароль" required>

  <select name="country">
    <option value="" disabled selected>Выберите страну</option>
    <option value="ru">Россия</option>
    <option value="us">США</option>
  </select>

  <button type="submit">Зарегистрироваться</button>
</form>

Разбор:
- Данные уходят на /register методом POST.
- Поля username, email, pwd обязательны.
- Выпадающий список начинается с заблокированной подсказки.

Итоги 🏁

• action — цель отправки.
• method — способ (GET/POST).
• name — ключ для сервера.
• value — данные по умолчанию.
• placeholder — подсказка.
• required — обязательное поле.
• disabled — блокировка поля.

Теперь вы готовы создавать формы, которые не просто собирают данные, но и делают это правильно! Для углубления в тему смотрите разборы Данилы Бежина на YouTube.