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

Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.

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

Текстовые поля

Для получения этих данных разместим в форме два однострочных текстовых поля для ввода информации.

Текстовые поля создаются с помощью тэга <input /> со значением атрибута TYPE="text". Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах. Чтобы добавить подсказу для ввода (фоновый текст в поле), нужно использовать атрибут placeholder.

<input type="text" name="username" size="300" placeholder="username" />

Результат:

Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки <br/>.

Переключатели

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

Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга INPUT со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".

Еще одним обязательным атрибутом является VALUE, которому присвоим значения «учащийся», «студент» и «учитель». Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно оно передается серверу.

<input type="radio" name="group" /> Ученик <br/>
<input type="radio" name="group" /> Студент <br/>
<input type="radio" name="group" /> Учитель

Результат:

Ученик
Студент
Учитель

Флажки

Далее, мы хотим узнать, какими сервисами Интернета наш посетитель пользуется наиболее часто. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками.

Флажки создаются с помощью тэга INPUT со значением атрибута TYPE="checkbox". Флажки, объединенные в группу, могут иметь различные значения атрибута NAME. Например, NAME="box1", NAME="box2" и т. д.

Еще одним обязательным атрибутом является VALUE, которому присвоим значения «WWW», «e-mail» и «FTP». Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно оно передается серверу.

<input type="checkbox" name="services" value="WWW" /> WWW <br/>
<input type="checkbox" name="services" value="email" /> Email<br/>
<input type="checkbox" name="services" value="FTP" /> FTP

Результат:

WWW
Email
FTP

Поля списков

Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант.

Для реализации раскрывающегося списка используется контейнер <select>…</select>, в котором каждый элемент списка определяется тэгом <option>…</option>.

В переключателях, флажках и списках выбранный по умолчанию элемент задается с помощью атрибута selected.

<form>
  <select name="browser">
    <option value="safari">Safari</option>
    <option value="firefox">Firefox</option>
    <option value="google_chrome">Google Chrome</option>
  </select>
</form>

Результат:

Текстовая область

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

Создается текстовая область с помощью тэга <textarea /> с обязательными атрибутами: NAME, задающим имя области, ROWS, определяющим число строк, и COLS — число столбцов области.

<textarea name="feedback" cols="100" rows="5" placeholder="Обратная связь"></textarea>

Результат:

Отправка данных из формы

Отправка введенной в форму информации осуществляется с помощью щелчка по кнопке.

Кнопка создается с помощью тэга input. Атрибуту TYPE необходимо присвоить значение "submit", а атрибуту VALUE, который задает надпись на кнопке, присвоить значение "Отправить".

<input type="submit" value="Отправить" />

Результат:

Щелчком по кнопке “Отправить” можно отправить данные из формы на определенный адрес электронной почты. Для этого атрибуту ACTION контейнера FORM надо присвоить значение адреса электронной почты. Кроме того, в атрибутах METOD и ENCTYPE необходимо указать метод и форму передачи данных:

<form action="mailto:username@server.ru" method="post" enctype="text/plain">
  …
</form>

Контрольные вопросы

  1. Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей?
  2. Какие значения необходимо присвоить атрибутам тэга
    для отправки введенной в форму информации?