§ 19. Формы

Определения и обозначения

Форма — элемент веб-страницы, предназначенный для ввода данных пользователем и их отправки на обработку. Например, форма может собирать имя и адрес при оформлении заказа. Она нужна, чтобы посетитель мог не просто увидеть информацию, но и передать сайту сведения для дальнейшей работы.

Тег <form> — контейнер, объединяющий поля ввода и задающий способ отправки данных. Контейнером называют элемент, внутри которого размещаются другие элементы страницы. Благодаря <form> браузер понимает, какие поля относятся к одной отправке и куда направить введённые данные.

Элемент управления — поле или кнопка формы, с помощью которых пользователь вводит данные или выполняет действие. К таким элементам относятся текстовые поля, флажки и кнопки отправки. Они нужны, чтобы пользователь мог взаимодействовать с формой, а не только читать её подписи.

Атрибут name — имя элемента управления, по которому его значение передаётся при отправке формы. Атрибутами называют дополнительные настройки, записываемые в открывающем теге. Имя помогает обработчику различать данные: например, определить, что полученная строка содержит именно имя пользователя.

Как это устроено

Форма строится из тега <form> и вложенных в него элементов управления. Вложенность показывает браузеру, какие поля составляют единый набор: при отправке он собирает значения относящихся к форме элементов. Если поле находится за пределами формы, браузер обычно не включает его в эту отправку. Поэтому перед созданием формы полезно сначала определить, какие сведения нужно собрать, а затем разместить соответствующие поля внутри контейнера.

Атрибут action тега <form> задаёт адрес программы-обработчика, а method — способ передачи данных. Эти настройки выполняют разные задачи: обработчик указывает, куда обратиться, а способ — как передать сведения. При GET данные добавляются к адресу запроса, поэтому этот способ подходит, например, для поиска, где запрос удобно видеть и повторять. POST передаёт данные в теле запроса и часто применяется для отправки больших наборов сведений; сам по себе он не шифрует данные, поэтому для защиты соединения нужен HTTPS.

Тег <input> создаёт элементы разных типов, а значение атрибута type определяет их вид и поведение. Например, text предлагает ввести обычную строку, password скрывает ввод на экране, а checkbox показывает флажок. Такое разделение нужно, чтобы интерфейс соответствовал задаче: пароль не отображается открытым текстом, а варианты ответа удобно отмечать. Тип submit создаёт кнопку, запускающую отправку формы.

Для ввода текста в несколько строк используют <textarea>, а для выбора из списка — <select> с вариантами <option>. Эти элементы подходят для разных ситуаций: короткий ответ удобнее вводить в однострочное поле, а развёрнутый комментарий — в текстовую область. Список полезен, если вариантов заранее известно несколько и нужно выбрать один из них. В результате пользователю не приходится вводить вручную данные, которые можно выбрать из готовых вариантов.

При отправке формы передаются имена и значения заполненных элементов: атрибут name задаёт имя, а введённый текст или выбранный вариант становится значением. Обработчик получает, например, не безымянное слово «Анна», а пару, где понятно, что это имя пользователя. Поля без name не дают обработчику такого обозначения и обычно не включаются в отправляемые данные. Для флажков и переключателей значение можно дополнительно задать атрибутом value, чтобы передавать не только факт выбора, но и нужный код варианта.

Элементы HTML-форм и их назначение

Выбирайте строку таблицы по тому, какие данные должен указать пользователь: написать, отметить или выбрать из готового списка. Затем проверьте особенность элемента, особенно возможность множественного выбора. Для отправки данных понадобится кнопка submit, а сами элементы должны быть правильно включены в форму.

Разбор задач

Форма для ввода имени

Условие: создать форму с одним текстовым полем для ввода имени и кнопкой отправки. Сначала определим, что нужно получить: короткую строку, поэтому подойдёт <input type="text">. Полю дадим имя name, чтобы обработчик мог распознать переданное значение, а отправку поручим кнопке типа submit.

1. Откройте контейнер формы тегом <form> и укажите настройки action и method для адреса и способа передачи.
2. Добавьте внутрь <input type="text" name="name">, чтобы пользователь мог ввести имя и значение получило обозначение.
3. Добавьте <input type="submit" value="Отправить"> и закройте тег формы.

Ответ: форма содержит текстовое поле с именем name и кнопку отправки. При нажатии кнопки браузер отправит введённое значение указанному обработчику. Для реальной работы action должен вести на существующую программу обработки.

Опрос с несколькими предметами

Условие: дать участнику опроса возможность отметить несколько предметов, которые ему интересны. Здесь варианты независимы: выбор математики не должен запрещать выбрать информатику. Поэтому переключатели radio не подходят, так как в одной группе они предназначены для единственного выбора; используем флажки checkbox.

1. Разместите варианты внутри <form> и продумайте подписи, чтобы было понятно, какой предмет соответствует каждому флажку.
2. Для каждого предмета создайте отдельный <input type="checkbox"> с атрибутом name и подходящим value.
3. Добавьте кнопку submit, чтобы отправить отмеченные варианты обработчику.

Ответ: каждый предмет представлен отдельным флажком, и пользователь может отметить несколько. Неотмеченные варианты не означают выбранный ответ, поэтому обработчик учитывает переданные значения. Имена полей помогают определить, к какому вопросу относятся данные.

Форма заказа с выбором доставки и услуг

Условие: пользователь выбирает один способ доставки, отмечает дополнительные услуги и отправляет заказ обработчику. Для доставки нужен ровно один вариант, значит, подойдут radio с одинаковым name. Дополнительные услуги выбираются независимо друг от друга, поэтому для них нужны checkbox; адрес и метод отправки задаются у формы.

1. Создайте <form> и укажите action с адресом обработчика, а также method с выбранным способом передачи данных.
2. Добавьте переключатели radio для способов доставки; у всех вариантов этой группы задайте одинаковый name, а каждому — своё значение.
3. Добавьте отдельные checkbox для дополнительных услуг, задав им имена и значения, затем разместите кнопку submit.

Ответ: форма отправляет один выбранный способ доставки и все отмеченные дополнительные услуги. Совпадающий name связывает варианты доставки в группу единственного выбора, а отдельные флажки сохраняют возможность выбрать несколько услуг. Перед проверкой убедитесь, что адрес обработчика действителен и нужные элементы находятся внутри формы.

Типичные ошибки

Элементы управления размещают вне <form>, если забывают, что отправляется набор, связанный именно с контейнером формы. Тогда поле может отображаться на странице, но его значение не попадёт в эту отправку. Проверьте вложенность: поле и кнопка, относящиеся к форме, должны находиться между открывающим и закрывающим тегами <form>.

Если не задать элементу атрибут name, его значение обычно не будет передано обработчику под понятным именем. Ошибку легко допустить, потому что поле всё равно выглядит и работает на странице. Проверка простая: у каждого значения, которое нужно обработать, должен быть name, а имя должно соответствовать назначению поля.

Переключателям radio одной группы задают разные name, когда копируют элементы и меняют только подписи или значения. Браузер воспринимает их как разные группы, поэтому пользователь может выбрать сразу несколько переключателей. Убедитесь, что у вариантов одного вопроса совпадает name, а значение value различает сами варианты.

Путают action и method, потому что оба атрибута находятся у тега формы и связаны с отправкой. Но action — адрес получателя данных, а method — способ передачи; если поменять их роли, форма будет настроена неверно. Проверьте себя вопросами: «Куда отправлять?» — action, «Каким способом?» — method.

Связь с другими темами

Для работы с формами нужны основы HTML: понимание тегов, атрибутов и вложенности помогает правильно составить разметку. Сами поля только собирают и передают значения; принять их и выполнить действие должны веб-сервер и программа-обработчик. Поэтому формы связывают HTML-страницу с серверной частью сайта, а их назначение становится понятным на примерах поиска, регистрации, опроса или заказа товара.

Что запомнить

• Тег <form> объединяет элементы, данные которых отправляются вместе.
• Атрибут action указывает адрес обработчика.
• Атрибут method задаёт способ передачи данных.
• Атрибут name нужен, чтобы передать значение элемента под определённым именем.
• Флажки checkbox позволяют выбрать несколько вариантов.
• Переключатели radio с одинаковым name образуют группу единственного выбора.