HTML / 9. Формы

Простой пример формы

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

<form method=POST action="http://www.kumquat.com/demo">
Name:
<input type=text name=name size=32 maxlength=80>
<p>
Sex:<input type=radio name=sex value="M"> Male
<input type=radio name=sex value="F"> Female
<p>
Annual Income:
<select name=income size=1>
<option>Under $25,000
<option>$25,001 to $50,000
<option>$50,001 and higher
</select>
<p>
<input type=submit>
</form>

Первая строка в примере начинает форму и указывает, что мы применяем метод POST передачи данных. Элементы пользовательского ввода следуют далее, каждый из них определяется тегом <input> и атрибутом type. В нашем примере есть три элемента ввода, каждый из которых содержится в своем абзаце.

Первый элемент – это традиционное поле для ввода текста, разрешающее пользователю ввести до 80 символов, но показывающее одновременно только 32. Второй – это переключатель, позволяющий выбрать одну из двух радиокнопок. Третий – это раскрывающееся меню для выбора одного из трех вариантов. Последний элемент – простая кнопка отправки, которая запускает обработку формы, если предварительно была нажата пользователем.

Статьи по HTML на эту тему:

Атрибуты формы общего назначения
Группировка элементов формы и обеспечение их надписями
Многострочные области ввода текста
Получение данных из форм при помощи электронной почты
Программирование форм

Вернуться в раздел: HTML / 9. Формы