Logo
Книга для начинающих
ВходРегистрация
/
Веб-разработка
/
Курс HTML Верстка
/

Формы в HTML

HTML: Формы в HTML

При взаимодействии с HTML-документами одно из частых действий — ввод данных в различные поля документа. Например, ввод данных в строку поиска. Именно так вы ищете информацию с помощью поисковых систем (например, Google или Yandex): вводите запрос, он отправляется на сервер (компьютер, на котором расположен сайт), и на выходе вы получаете результат поиска.

Такое взаимодействие осуществляется с помощью форм — набора полей и кнопок действий. Важно помнить, что HTML не умеет обрабатывать данные, которые были отправлены через форму. Для взаимодействия с этими данными нужно использовать языки программирования, которые работают на сервере, например JavaScript или PHP. Основы программирования на этих языках есть в соответствующих разделах на Code Basics:

  • JavaScript
  • PHP

Детальнее эти вопросы рассмотрены в профессиях на Hexlet:

  • Профессия Бэкенд JavaScript (node.js)
  • Профессия PHP-программист

Любая форма начинается с главного тега <form>, внутри которого и будут располагаться поля для заполнения и кнопка действия.

<form>
  // Внутри формы будут поля для ввода данных и кнопка с действием (отправкой данных)
</form>

Основным атрибутом у тега <form> является action — путь к файлу, где располагается обработчик данных. Именно туда уйдут данные после отправки формы.

<form action="/search">
  // Данные, после заполнения, будут отправлены на страницу /search
</form>

Если данный атрибут не указан, данные уйдут на ту же страницу, откуда была отправлена форма.

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people

Коммерческий опыт и Трудоустройство

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
/
Веб-разработка
/
Курс HTML Верстка
/

Формы в HTML

HTML: Формы в HTML

При взаимодействии с HTML-документами одно из частых действий — ввод данных в различные поля документа. Например, ввод данных в строку поиска. Именно так вы ищете информацию с помощью поисковых систем (например, Google или Yandex): вводите запрос, он отправляется на сервер (компьютер, на котором расположен сайт), и на выходе вы получаете результат поиска.

Такое взаимодействие осуществляется с помощью форм — набора полей и кнопок действий. Важно помнить, что HTML не умеет обрабатывать данные, которые были отправлены через форму. Для взаимодействия с этими данными нужно использовать языки программирования, которые работают на сервере, например JavaScript или PHP. Основы программирования на этих языках есть в соответствующих разделах на Code Basics:

  • JavaScript
  • PHP

Детальнее эти вопросы рассмотрены в профессиях на Hexlet:

  • Профессия Бэкенд JavaScript (node.js)
  • Профессия PHP-программист

Любая форма начинается с главного тега <form>, внутри которого и будут располагаться поля для заполнения и кнопка действия.

<form>
  // Внутри формы будут поля для ввода данных и кнопка с действием (отправкой данных)
</form>

Основным атрибутом у тега <form> является action — путь к файлу, где располагается обработчик данных. Именно туда уйдут данные после отправки формы.

<form action="/search">
  // Данные, после заполнения, будут отправлены на страницу /search
</form>

Если данный атрибут не указан, данные уйдут на ту же страницу, откуда была отправлена форма.

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people

Коммерческий опыт и Трудоустройство

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются
← ПредыдущийСледующий →
← ПредыдущийСледующий →
← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ query, expect }) => {
  const form = query(document, 'form');

  expect(form).to.have.attr('action', '/people');
});
← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

waiting_clock
← ПредыдущийСледующий →