Загрузка...

Атрибуты формы HTML

Формы дали каркас. Атрибуты формы уточняют поведение — пустой action, get vs post, автозаполнение, проверки, имя самого form. Типы input и form= позже.

Зачем атрибуты формы

Две похожие формы могут вести себя по-разному. Атрибуты на form меняют цель, стиль HTTP, автозаполнение и валидацию без новых полей.

Прямой ответ

1) action + method. 2) пустой action → текущая страница. 3) autocomplete. 4) novalidate только намеренно. 5) id/name формы для скриптов.

📊 Form attributes at a glance

Attribute Role Beginner tip
action Where the browser sends the data Empty often means “this page”
method get (query string) or post (request body) Prefer post for private or large data
autocomplete Autofill hint for the form off for sensitive practice forms
novalidate Skip built-in HTML checks on submit Demo tool — not a production default
name / id Identify the form element itself Useful when scripts or CSS target the form

Контактная форма с атрибутами

Расширьте каркас: оставьте поля с label и оформите открывающий тег form.

Contact form with attributes

html
HTML Code 
<form
id="contact"
name="contact"
action="/contact"
method="post"
autocomplete="on">
<label for="full-name">Name</label>
<input id="full-name" name="full_name" type="text" required>
<label for="msg">Message</label>
<textarea id="msg" name="message" rows="3" required></textarea>
<button type="submit">Send</button>
</form>

Читаем демо контакта

  • id/name идентифицируют форму
  • action — явный путь
  • post держит сообщение вне адресной строки
  • autocomplete=on разрешает автозаполнение
  • name полей — ключи payload
  • required на уровне поля

GET-поиск и опциональный novalidate

Поиск часто get, чтобы запрос был в URL. Не для секретов. autocomplete=off для практики. novalidate только для особых демо.

GET search with autocomplete off

html
HTML Code 
<form action="/search" method="get" autocomplete="off">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Go</button>
</form>

<!-- Demo-only: skip built-in checks
<form action="/demo" method="post" novalidate>
...
</form>
-->

Читаем демо поиска

  • get добавляет ?q=
  • autocomplete=off снижает автозаполнение
  • без required пустые уходят
  • novalidate — лишь напоминание
  • никогда get для паролей

Пустой action и GET против POST

  • пустой/опущен → текущий URL
  • get для фильтров и поиска
  • post для регистрации и сообщений
  • один method — не безопасность

Практика — настройка атрибутов

  1. Очистите action
  2. Переключите method поиска
  3. autocomplete=off на контакте
  4. Временно novalidate с required
  5. Уберите novalidate
  6. Проверьте id формы и name полей
  7. Фраза: атрибуты настраивают цель, стиль, автозаполнение, проверки

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

  • Удивление от пустого action
  • Пароли через get
  • Постоянный novalidate в проде
  • Путать name формы и поля
  • Считать off гарантией безопасности
  • Менять местами action и method

Кратко

  • Атрибуты уточняют отправку
  • action + method ядро; пустой → текущий URL
  • autocomplete и novalidate опциональны
  • name/id формы vs name поля
  • post для частного
  • далее: элементы формы

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

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

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

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

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

📝 Инструкции

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