Тег <form> собирает поля ввода в одну форму и умеет отправить всё, что в них написано, на сервер - без единой строчки JavaScript. Куда отправлять, задаёт атрибут action, а как именно - атрибут method: GET или POST.
В этом уроке
Кнопка здесь ничего никуда по-настоящему не отправляет - это просто демонстрация разметки. Попробуй поменять placeholder или добавить ещё одно поле input.
form и action
Атрибут action у <form> указывает адрес, куда браузер отправит данные при отправке формы. Если action не указать вовсе, это не значит, что форма никуда не отправится - по спецификации она отправится на адрес ТЕКУЩЕЙ страницы, просто это легко упустить из виду.
<form action="/otpravit-zayavku" method="post">...</form> - явно указано, куда уйдут данные.
<form>...</form> - action не указан: форма всё равно отправится, но на адрес текущей страницы, а не "никуда", как иногда думают новички.
method: GET и POST
Атрибут method определяет, КАК данные попадут на сервер. GET дописывает их прямо в адрес страницы как строку запроса (?q=привет) - это удобно для поиска и попадает в историю браузера и адресную строку. POST отправляет данные внутри тела запроса, не в самом адресе - поэтому пароли и другие чувствительные данные всегда отправляют через POST, а не GET.
<form action="/login" method="post"><input type="password" name="pass"></form> - пароль уйдёт в теле запроса, не в адресной строке.
<form action="/login" method="get"><input type="password" name="pass"></form> - пароль окажется прямо в адресе страницы: виден в истории браузера и в логах сервера.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Думать, что без action форма никуда не отправится | На самом деле форма отправится на адрес текущей страницы - это задокументированное поведение, а не "ничего не произойдёт" | Указывать action явно, если нужен конкретный адрес обработки |
| Отправлять пароль или другие чувствительные данные через method="get" | Данные оказываются прямо в адресной строке - видны в истории браузера и логах сервера | Использовать method="post" для всего чувствительного |
| Считать, что форма не заработает без JavaScript | Обычная HTML-форма полностью отправляет данные и без единой строчки JS - это встроенное поведение браузера | JavaScript нужен только для дополнительного поведения (например, отправки без перезагрузки страницы), а не для базовой работы формы |
Шпаргалка
| Термин | Значение |
|---|---|
| form | Собирает поля ввода в одну форму, умеет отправить их без JS |
| action | Адрес, куда отправятся данные (без него - адрес текущей страницы) |
| method="get" | Данные дописываются в адрес страницы как строка запроса |
| method="post" | Данные уходят в теле запроса, не в адресе - для чувствительных данных |
Коротко: отвечаем на вопросы
Что произойдёт, если не указать action у формы?
Форма всё равно отправится - на адрес текущей страницы. Это задокументированное поведение спецификации HTML, а не "ничего не произойдёт", как иногда думают новички.
Чем принципиально отличаются GET и POST при отправке формы?
GET дописывает данные прямо в адрес страницы как строку запроса - они попадают в историю браузера и логи сервера. POST отправляет данные в теле запроса, не в самом адресе. Жёсткого предела длины для GET в самой спецификации нет, но на практике многие браузеры и серверы ограничивают длину адреса.
Нужен ли JavaScript, чтобы форма реально отправляла данные?
Нет. Обычная HTML-форма полностью отправляет данные и перезагружает страницу с ответом сервера без единой строчки JavaScript - это встроенное поведение браузера. JavaScript нужен только для дополнительных сценариев, например отправки без перезагрузки страницы.
