{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":" связывает "},{"type":"text","marks":[{"type":"bold"}],"text":"все поля ввода на странице"},{"type":"text","text":" (например, "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"

"},{"type":"text","text":") в "},{"type":"text","marks":[{"type":"bold"}],"text":"единую структуру данных"},{"type":"text","text":", которую браузер может "},{"type":"text","marks":[{"type":"bold"}],"text":"отправить на сервер"},{"type":"text","text":" при нажатии кнопки “Отправить” ("},{"type":"text","marks":[{"type":"code"}],"text":"<button type=\"submit\">"},{"type":"text","text":")."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иными словами: "},{"type":"text","marks":[{"type":"code"}],"text":"<form>"},{"type":"text","text":" — это "},{"type":"text","marks":[{"type":"bold"}],"text":"контейнер"},{"type":"text","text":", который объединяет все связанные элементы и управляет процессом передачи введённой информации."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 1. Пример: как форма “собирает” данные"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"<form action=\"/register\" method=\"post\">\n  <label>Имя:</label>\n  <input type=\"text\" name=\"username\">\n\n  <label>Email:</label>\n  <input type=\"email\" name=\"useremail\">\n\n  <button type=\"submit\">Зарегистрироваться</button>\n</form>\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Что происходит:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь заполняет поля ("},{"type":"text","marks":[{"type":"code"}],"text":"username"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"useremail"},{"type":"text","text":")."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"При нажатии на кнопку "},{"type":"text","marks":[{"type":"bold"}],"text":"Submit"},{"type":"text","text":" браузер:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"собирает все поля, у которых есть атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"формирует из них "},{"type":"text","marks":[{"type":"bold"}],"text":"пары “ключ=значение”"},{"type":"text","text":","}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и отправляет их на сервер по адресу "},{"type":"text","marks":[{"type":"code"}],"text":"/register"},{"type":"text","text":"."}]}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🟢 Например:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"username=Иван&useremail=ivan@mail.ru\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 2. Как именно форма связывает поля"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Связка происходит "},{"type":"text","marks":[{"type":"bold"}],"text":"по атрибуту "},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Он — “ключ” для каждого значения."}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элемент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"name"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отправляемое значение"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"<input type=\"text\" name=\"login\" value=\"Alex\">"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"login"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Alex"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"<input type=\"email\" name=\"email\" value=\"a@mail.com\">"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"email"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"a@mail.com"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"📘 Итоговый набор данных, который отправит "},{"type":"text","marks":[{"type":"code"}],"text":"<form>"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"login=Alex&email=a@mail.com\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Без "},{"type":"text","marks":[{"type":"code"}],"text":"name"},{"type":"text","text":" элемент "},{"type":"text","marks":[{"type":"bold"}],"text":"не будет включён"},{"type":"text","text":" в отправку."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 3. Как происходит отправка"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пользователь нажимает кнопку "},{"type":"text","marks":[{"type":"code"}],"text":"<button type=\"submit\">"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Браузер берёт все значения полей внутри "},{"type":"text","marks":[{"type":"code"}],"text":"<form>"},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Кодирует их в зависимости от "},{"type":"text","marks":[{"type":"code"}],"text":"method"},{"type":"text","text":":"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"GET"},{"type":"text","text":" — добавляет в URL ("},{"type":"text","marks":[{"type":"code"}],"text":"/register?login=Alex&email=a@mail.com"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"POST"},{"type":"text","text":" — передаёт “внутри” HTTP-запроса (в теле запроса)."}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Отправляет их на сервер по адресу из "},{"type":"text","marks":[{"type":"code"}],"text":"action"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 4. Другие способы связки"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно иметь "},{"type":"text","marks":[{"type":"bold"}],"text":"несколько форм на странице"},{"type":"text","text":" — каждая собирает только “свои” поля."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Элементы формы можно "},{"type":"text","marks":[{"type":"bold"}],"text":"связывать по идентификатору"},{"type":"text","text":" через атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"form"},{"type":"text","text":":"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"type":"text","text":"<form id=\"feedback\" action=\"/send\" method=\"post\"></form>\n<input type=\"text\" name=\"name\" form=\"feedback\">\n<button type=\"submit\" form=\"feedback\">Отправить</button>\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"→ Даже если поле не внутри формы, оно всё равно отправится вместе."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"🔹 5. После отправки"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сервер принимает пары "},{"type":"text","marks":[{"type":"code"}],"text":"ключ=значение"},{"type":"text","text":", например:"}]},{"type":"codeBlock","attrs":{"language":"json"},"content":[{"type":"text","text":"{\n  \"username\": \"Иван\",\n  \"useremail\": \"ivan@mail.ru\"\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"и может:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сохранить данные в базе,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"проверить корректность,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вернуть пользователю ответ (страницу “успешно отправлено”)."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Итого:"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Механизм"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"<form>"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Контейнер, объединяющий поля ввода"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Атрибут "},{"type":"text","marks":[{"type":"code"}],"text":"name"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Связывает значения с их “ключами”"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"<button type=\"submit\">"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Триггер отправки данных"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"action"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Указывает адрес сервера"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"method"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Определяет способ передачи ("},{"type":"text","marks":[{"type":"code"}],"text":"GET"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"POST"},{"type":"text","text":")"}]}]}]}]},{"type":"horizontalRule"},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Простыми словами:"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":"<form>"},{"type":"text","text":" — это как "},{"type":"text","marks":[{"type":"bold"}],"text":"конверт"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"каждое поле — "},{"type":"text","marks":[{"type":"bold"}],"text":"заполненная строка в письме"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а кнопка “Отправить” — "},{"type":"text","marks":[{"type":"bold"}],"text":"почтальон"},{"type":"text","text":", который несёт всё содержимое на сервер."}]}]}</article></body></html>

Как элемент <form> связывает поля ввода и отправку данных?

Комментарии