Загрузка...

Атрибуты form у input в HTML

Раньше required, placeholder и диапазоны уточняли поле. Атрибуты form у input спрашивают иначе: какая форма владеет контролом и может ли кнопка временно сменить action? Звезда — form="id" вне form. form* на submit меняют цель только для этого клика.

Почему связь с формой важна

Большинство полей внутри form. Иногда вёрстка ставит контроль снаружи. Без связи его нет в payload. form связывает через id формы. Вложение яснее по умолчанию; связь — выход для сложных раскладок.

Прямой ответ

1) id на form. 2) Снаружи form="тот-же-id". 3) name и label всё ещё нужны. 4) На кнопке submit опционально formaction, formmethod, formenctype, formnovalidate, formtarget только для клика. 5) Владение и маршрутизация — не правила значения прошлой лекции.

📊 Form association and submit overrides

Attribute Where Beginner tip
form input (or other control) Value must match the form’s id exactly
formaction submit button Overrides form action for that click only
formmethod submit button Overrides method (get/post) for that click
formenctype submit button Overrides enctype when uploading via that button
formtarget submit button Overrides where the response opens (_blank, etc.)

Оплата: поле вне form

Короткий checkout держит email и количество внутри. Промокод позже в разметке — с label и name — и входит через form="checkout".

Outside input via form id

html 
<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">

<button type="submit">Pay</button>
</form>

<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">

Читаем демо checkout

  • id=checkout — крючок
  • form=checkout подключает promo при отправке
  • name=promo всё ещё ключ payload
  • email и qty внутри без form=
  • Labels у каждого видимого контроля
  • required/min могут быть; фокус — связь

Две кнопки: переопределить action

Иногда одна форма, две цели — черновик и публикация. Один form; разный formaction на кнопках. Override только для клика.

Submit overrides with formaction

html 
<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>

<label for="body">Body</label>
<input id="body" name="body" type="text">

<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>

Читаем демо двух кнопок

  • Путь по умолчанию = action формы
  • Черновик шлёт через formaction иначе
  • formmethod=post сохраняет намерение
  • Обе кнопки шлют те же named поля
  • form= владение; formaction маршрут кнопки
  • дальше: textarea для многострочного текста

Выбор связи или override

  • Поле вне дерева: form="form-id"
  • Те же поля, другой URL: formaction
  • Другой method на клик: formmethod
  • Enctype загрузки на клик: formenctype
  • Пропуск проверок (редко): formnovalidate
  • Ответ в другом месте: formtarget
  • Предпочитайте вложение, если вёрстка позволяет
  • Не путать с required/placeholder

Практика — владение и override

  1. Checkout; снимите form= с promo и верните
  2. Опечатка в id — связь ломается
  3. Второе внешнее поле notes с form=checkout
  4. Поменяйте formaction черновика
  5. Кратко formmethod=get на черновике
  6. Фраза: form= выбирает владельца; formaction только эту кнопку
  7. Вложите promo внутрь и уберите form=

Частые ошибки

  • Опечатка id vs form=
  • form= без name
  • Лишние отсоединённые поля
  • Путаница с прошлыми помощниками
  • Смешение form= и formaction
  • Думать, что каждому контролю нужен form=
  • formnovalidate вместо исправления полей

Итог

  • form="id" связывает внешний контроль
  • Совпадающий id; name и label важны
  • Кнопки override через formaction/formmethod/form*
  • Вкладывайте когда можно; связывайте если вёрстка требует
  • Владение/маршрут ≠ прошлые правила поля
  • Далее: textarea

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
5
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 53 из 68
Html Урок