Создание формы | htmlbook.ru
Сейчас практически ни один сайт не обходится без элементов интерфейса вроде полей ввода текста, кнопок, переключателей и флажков. Они необходимы для взаимодействия с пользователем, чтобы он мог искать на сайте по ключевым словам, писать комментарии, отвечать на опросы, прикреплять фотографии и делать много других подобных вещей. Именно формы и обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Так что если вы планируете сделать нечто подобное на сайте, без форм не удастся это реализовать.
Сама форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:
- адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;
- элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;
- кнопку отправки данных на сервер.
Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).
Пример 1. Ошибочное использование форм
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
</head>
<body>
<form action="handler.php">
<p><input name="a"> <input type="submit"></p>
<form action="handler.php">
<p><input name="b"> <input type="submit"></p>
</form>
</form>
</body>
</html>Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введенную в форме информацию, а дальше делает с ней то, что предполагает разработчик.
Часто бывает, что текущая страница написанная, допустим, на PHP, сама является обработчиком формы, в таком случае можно указать пустое значение атрибута action или вообще его опустить. В простейшем случае тег <form> не содержит никаких атрибутов и представлен в примере 2.
Пример 2. Простая форма
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form> <p><input name="a"> <input type="submit"></p> </form> </body> </html>
В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа, установленная по умолчанию.
Пример 3. Отправка формы по почте
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формы</title> </head> <body> <form action="mailto:[email protected]" enctype="text/plain"> <p><input name="a"> <input type="submit"></p> </form> </body> </html>
Браузеры неоднозначно работают с таким кодом. Firefox предложит список подходящих приложений для отправки почты (рис. 1), Internet Explorer выведет предупреждение (рис. 2) и попытается запустить программу, сопоставленную с почтой, Opera подобно Firefox предложит список вариантов подходящих для отправки почты (рис. 3).
Рис. 1. Запуск приложения в Firefox
Рис.
2. Предупреждение Internet Explorer
Рис. 3. Выбор программы в Opera
формы
- Тег <form>
Как структурировать HTML-формы — Изучение веб-разработки
- Назад
- Обзор: Forms
- Далее
Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.
| Уровень подготовки: | Основы компьютерной грамотности, и базовые знания HTML. |
|---|---|
| Цель: | Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании. |
Гибкость HTML форм делает их одной из самых сложных структур в HTML; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и доступность.
Элемент <form> формально определяет форму и атрибуты, которые определяют поведение этой формы.
Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента <form>, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы <form> и реализовывать специальные хуки, чтобы их было проще использовать.
Мы уже встречались с этим в предыдущей статье.
Предупреждение:
Стоит учесть, что всегда можно использовать элементы формы вне <form>. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута form. В HTML5 был представлен атрибут form для элементов HTML форм, который позволяет явно связать элемент с формой, даже если он не заключён внутри <form>.
Элемент <fieldset> — это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.
Различные вспомогательные технологии будут использовать <legend> как часть метки label всех элементов внутри <fieldset>. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы
Небольшой пример:
<form>
<fieldset>
<legend>Fruit juice size</legend>
<p>
<input type="radio" name="size" value="small">
<label for="size_1">Small</label>
</p>
<p>
<input type="radio" name="size" value="medium">
<label for="size_2">Medium</label>
</p>
<p>
<input type="radio" name="size" value="large">
<label for="size_3">Large</label>
</p>
</fieldset>
</form>
Примечание:
html (также посмотрите на результат).Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.
Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри <fieldset>. Также <fieldset> можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные
Из-за своего влияния на вспомогательные технологии элемент <fieldset> является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как экранный диктор интерпретирует вашу форму.
В предыдущей статье мы увидели, что элемент <label> принято использовать для указания текстов-подсказок (лейблов) в HTML-формах.
Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:
<label for="name">Name:</label> <input type="text" name="user_name">
При правильно связанном элементе <label> с элементом <input> через атрибуты for и id соответственно (атрибут for ссылается на атрибут id соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие «Name, edit text».
Если <label> не правильно установлен, скринридер прочитает это как «Edit text blank», что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.
Обратите внимание на то, что виджет формы может быть вложен в элемент <label>, как на примере:
<label for="name"> Name: <input type="text" name="user_name"> </label>
Однако даже в таких случаях лучше всё равно указывать атрибут for, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.
Лейблы тоже кликабельны!
Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.
Например:
<form>
<p>
<label for="taste_1">I like cherry</label>
<input type="checkbox" name="taste_cherry" value="1">
</p>
<p>
<label for="taste_2">I like banana</label>
<input type="checkbox" name="taste_banana" value="2">
</p>
</form>
Примечание: вы можете посмотреть этот пример тут checkbox-label.html (также можно посмотреть код вживую).
Несколько лейблов
На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры.
Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента <label>.
Рассмотрим этот пример:
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
<!-- Тогда это: -->
<div>
<label for="username">Name:</label>
<input type="text" name="username">
<label for="username"><abbr title="required">*</abbr></label>
</div>
<!-- лучше сделать таким образом: -->
<div>
<label for="username">
<span>Name:</span>
<input type="text" name="username">
<abbr title="required">*</abbr>
</label>
</div>
<!-- Но этот вариант лучше всего: -->
<div>
<label for="username">Name: <abbr title="required">*</abbr></label>
<input type="text" name="username">
</div>
Параграф на первой строке примера описывает правило для обязательных элементов.
Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.
- В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь «edit text blank» и отдельно читаемые тексты-подсказки. Множественные элементы
<label>могут быть неправильно интерпретированы программой чтения с экрана. - Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как «name star name edit text», однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
- Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как «name star edit text».
Примечание: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.
Примечание: вы можете найти этот пример на GitHub required-labels.html (также можно посмотреть вживую). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!
Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.
Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент <div> — это общепринятая практика.
Элемент <p> также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).
В добавок к элементу <fieldset> часто используют HTML-заголовки (например, <h2> (en-US), <h3> (en-US)) и секционирование (например, <section>) для структурирования сложных форм.
Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.
Каждый отдельный раздел функциональности содержится в элементах <section> и <fieldset>, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе <section> с элементами <fieldset>, содержащими переключатели.
Активное обучение: построение структуры формы
Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты.
Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (Основные нативные элементы управления формами (en-US)). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.
- Для начала сделайте локальную копию пустого шаблона и CSS для нашей платёжной формы в новой директории на вашем компьютере.
- Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента
<head>:<link href="payment-form.css" rel="stylesheet">
- Далее начните создавать свою форму с добавления внешнего элемента
<form>:<form> </form>
- Внутри тега
<form>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:<h2>Payment form</h2> <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.
</p>
- Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент
<section>. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка (<li>). Наконец, у нас есть два текстовых поля<input>и связанные с ними элементы<label>, которые находятся внутри элементов<p>, а также поле для ввода пароля. Добавьте этот код в вашу форму:<section> <h3>Contact information</h3> <fieldset> <legend>Title</legend> <ul> <li> <label for="title_1"> <input type="radio" name="title" value="M." > Mister </label> </li> <li> <label for="title_2"> <input type="radio" name="title" value="Ms. ">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" name="password">
</p>
</section>
- Сейчас мы перейдём к второму разделу
<section>нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <p>. Первый — это выпадающее меню (<select>) для выбора типа кредитной карты. Второй — это элемент<input>с типомnumberдля ввода номера карты. Последний виджет — это элемент<input>с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье The HTML5 input types (en-US). Вставьте следующий код под предыдущим разделом:<section> <h3>Payment information</h3> <p> <label for="card"> <span>Card type:</span> </label> <select name="usercard"> <option value="visa">Visa</option> <option value="mc">Mastercard</option> <option value="amex">American Express</option> </select> </p> <p> <label for="number"> <span>Card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="number" name="cardnumber"> </p> <p> <label for="date"> <span>Expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/yy</em> </label> <input type="date" name="expiration"> </p> </section> - Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент
<button>с типомsubmit, для отправки данных. Добавьте этот код в конец вашей формы:<p> <button type="submit">Validate the payment</button> </p>
</p>
">
Miss
</label>
</li>
</ul>
</fieldset>
<p>
<label for="name">
<span>Name: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="text" name="username">
</p>
<p>
<label for="mail">
<span>E-mail: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="email" name="usermail">
</p>
<p>
<label for="pwd">
<span>Password: </span>
<strong><abbr title="required">*</abbr></strong>
</label>
<input type="password" name="password">
</p>
</section>
В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега 
Добавьте этот код в конец вашей формы:Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите payment-form.html и живой пример):
Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите Test your skills: Form structure (en-US).
Теперь у вас есть все необходимые знания для того, чтобы правильно структурировать вашу HTML-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.
- A List Apart: Sensible Forms: A Form Usability Checklist
- Назад
- Обзор: Forms
- Далее
- Ваша первая HTML форма
- Как структурировать HTML-формы
- Стандартные виджеты форм
- The HTML5 input types (en-US)
- Other form controls (en-US)
- Стили HTML-форм
- Advanced form styling (en-US)
- UI pseudo-classes (en-US)
- Проверка данных формы
- Отправка данных формы
Дополнительные темы
- Как создавать пользовательские виджеты форм
- Sending forms through JavaScript
- Property compatibility table for form widgets (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Ваша первая форма — Изучите веб-разработку
- Обзор: Формы
- Следующий
В первой статье нашей серии вы узнаете о самом первом опыте создания веб-формы, включая разработку простой формы, ее реализацию с использованием правильных элементов управления формы HTML и других элементов HTML, добавление очень простых стилей с помощью CSS и описание того, как данные отправляется на сервер. Мы рассмотрим каждую из этих подтем более подробно позже в этом модуле.
| Предпосылки: | Базовая компьютерная грамотность и базовое понимание HTML. |
|---|---|
| Цель: | Познакомиться с тем, что такое веб-формы, для чего они используются, как
чтобы подумать об их разработке и основных HTML-элементах, которые вам понадобятся
для простых случаев. |
Веб-формы являются одной из основных точек взаимодействия между пользователем и веб-сайтом или приложением. Формы позволяют пользователям вводить данные, которые обычно отправляются на веб-сервер для обработки и хранения (см. другой элемент в список или показать или скрыть функцию пользовательского интерфейса).
HTML-код веб-формы состоит из одного или нескольких элементов управления формы (иногда называемых виджетами ), а также некоторых дополнительных элементов, помогающих структурировать общую форму — их часто называют HTML-формами .
Элементы управления могут быть однострочными или многострочными текстовыми полями, раскрывающимися списками, кнопками, флажками или переключателями и в основном создаются с использованием элемента , хотя есть и другие элементы, о которых нужно узнать.
Элементы управления формы также можно запрограммировать для принудительного ввода определенных форматов или значений ( проверка формы ) и в сочетании с текстовыми метками, которые описывают их назначение как для зрячих, так и для слабовидящих пользователей.
Прежде чем приступить к программированию, всегда лучше сделать шаг назад и подумать о своей форме. Разработка быстрого макета поможет вам определить правильный набор данных, которые вы хотите попросить пользователя ввести. С точки зрения пользовательского опыта (UX) важно помнить, что чем больше ваша форма, тем больше вы рискуете разочаровать людей и потерять пользователей. Сохраняйте простоту и не отвлекайтесь: запрашивайте только те данные, которые вам абсолютно необходимы.
Разработка форм — важный шаг при создании сайта или приложения. В рамках этой статьи не рассматривается пользовательский интерфейс форм, но если вы хотите углубиться в эту тему, вам следует прочитать следующие статьи:
- В журнале Smashing Magazine есть несколько хороших статей о UX форм, в том числе старая, но все еще актуальная статья Extensive Guide To Usability Web Form.
- UXMatters также является очень вдумчивым ресурсом с полезными советами от основных передовых практик до сложных проблем, таких как многостраничные формы.
В этой статье мы создадим простую контактную форму. Сделаем грубый набросок.
Наша форма будет содержать три текстовых поля и одну кнопку. Мы запрашиваем у пользователя его имя, адрес электронной почты и сообщение, которое он хочет отправить. Нажатие кнопки отправит их данные на веб-сервер.
Хорошо, давайте создадим HTML-код для нашей формы. Мы будем использовать следующие элементы HTML: , , , <текстовое поле> и <кнопка> .
Прежде чем двигаться дальше, сделайте локальную копию нашего простого HTML-шаблона — сюда вы введете HTML-код формы.
Элемент
Все формы начинаются с элемента , например:
кнопка{отступ слева:90px}кнопка{поле слева:0,5em}
