Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам, на страницах сайта размещают интерактивные формы. Формы включают в себя элементы управления различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и т. д.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер <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
Результат:
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>
Контрольные вопросы
- Какие тэги используются для создания на форме текстовых полей? Переключателей? Флажков? Раскрывающихся списков? Текстовых областей?
- Какие значения необходимо присвоить атрибутам тэга