Задание 7. Построение Web-форм

Цель работы: Научиться конструировать и обрабатывать Web-формы, а также применять различные типы элементов форм: поля для ввода данных, кнопки и т.п.

Формы позволяют сделать сайт интерактивным – организовать Ваше взаимодействие с пользователями (отсылку электронной почты, голосование, навигацию между страницами и т.п.).

Все формы в HTML создаются с помощью тэгов <form>:

<form method="xxxx" action="xxxx">

(поля формы)

</form>

Атрибут method указывает каким образом информацию из полей формы посылать на сервер. Значения этого атрибута следующие:

Get

Посылает данные формы, как часть URL (например, script.cgi?name=Alex&email=alex@mail.ru). Такой тип пересылки эффективен для небольших объемов данных.

Post

Посылает данные формы, как поток данных HTTP. Рекомендуется для большинства типов форм. Позволяет переслать большие объемы данных.

Атрибут action указывает на обработчик формы на сервере. Например,

http://www.yoursite.ru/cgi-bin/feedback.cgi or http://www.yoursite.ru/poll.asp.

Поля формы представляют собой такие элементы, как текстовые поля для водда данный, кнопки, выпадающие списки и т.п. Каждое поле имеет имя (атрибут name) и значение (атрибут value). Имя используется для идентификации поля, а значение вводится пользователем.

1. Поля для ввода текстовых данный создаются с помощью следующего тэга:

<input type="text" name="xxxx" value="xxxx" size="xxxx"

maxlength="xxxx">

Атрибут size указывает ширину поля в символах. Атрибут maxlength позволяет ограницить количество вводимых символов.

Создайте текстовае поле:

Адрес e-mail: <input type="text" name="email_address"

value="" size="30" maxlength="50">

2. Поля-"флажки" имеют только два значения (включен и выключен). Формат тэга для создания такого поля следующий:

<input type="checkbox" name="xxxx" value="xxxx" checked>

Атрибут checked (если указан) определяет, что поле-"флажок" включено.

Создайте такое поле:

Хотите ли Вы быть включенным в список рассылки?

<input type="checkbox" name="mailing_list" value="yes"

checked> Да

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

<input type="radio" name="xxxx" value="xxxx" checked>

Значение атрибута name для всех переключателей в группе должно быть одинаковым.

Создайте группу полей-переключателей:

Какой Ваш любимый цвет?

<input type="radio" name="colour" value="red" checked>

Красный

<input type="radio" name="colour" value="orange">

Оранжевый

<input type="radio" name="colour" value="green"> Зелёный

4. Поля-списки позволяют выбирать один или более элементов. Они имеют следующий формат:

<select name="xxxx" size="xxxx" multiple>

<option value="xxxx" selected>Выводимый текст</option>

<option value="xxxx">Выводимый текст</option>

...

</select>

Тэги <select></select> определяют список.

Атрибут size определяет количество видимых элементов в списке. Если это значение равно 1, то список будет создан, как выпадающий.

Атрибут multiple позволяет выбирать более, чем одно значение из списка.

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

4.1. Создайте выпадающий список:

Какой Ваш любимый вид спорта?

<select name="favourite_sport" size="1">

<option value="all" selected>Мне нравятся все виды!</option>

<option value="chess">Шахматы</option>

<option value="football">Футбол</option>

<option value="ice_hockey">Хоккей</option>

</select>

4.2. Создайте список из трех видимых строк:

Какой Ваш любимый вид спорта?<br>

<select name="favourite_sport" size="3">

<option value="all" selected>Мне нравятся все виды!</option>

<option value="chess">Шахматы</option>

<option value="football">Футбол</option>

<option value="ice_hockey">Хоккей</option>

</select>

5. Область для ввода и просмотра большого объема текста создается следующим образом:

<textarea name="xxxx" rows="xxxx" cols="xxxx"

wrap="xxxx">

(текст, выводимый по умолчанию)

</textarea>

Атрибут rows определяет высоту области в строках, а атрибут cols определяет ширину области в символах.

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

off

Текст не будет переноситься на следующую строку и будет послан на сервер так, как введен.

soft

Текст будет переноситься на следующую строку, но будет послан на сервер так, как введен.

hard

Текст будет переноситься на следующую строку и будет послан на сервер с символами-разделителями строк.

Создайте область для ввода текстовых данных:

Введите Ваши комментарии:<br>

<textarea name="comments" rows="5" cols="50" wrap="soft">

Мне нравится этот сайт!

</textarea>

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

<input type="hidden" name="cart_id" value="1234">

7. Если на странице необходимол ввести пароль, то для этого используется поле типа password. Это поле аналогично полю для ввода текстовы данных, однако вводимый текст отображается звездочками. Создайте на старнице такое поле:

Пароль: <input type="password" name="password" size="20">

8. Поля типа file используются для пересылки файла на сервер вместе с HTML-формой. Это поле включает поле для ввода имени файла и кнопку для тог, чтобы пользователь мог сам найти нужный файл для пересылки.

Создайте такое поле:

Пошлите нам свою фотографию:

<input type="file" name="photo">

9. Кнопки типа submit используются для пересылки данных формы на сервер. Эти данные должны быть обработаны: компонентом сайта, указанным как значение атрибута action тэга form.

Создайте на вашей странице кнопку типа submit:

<input type="submit" value="Послать данные">

10. Кнопки типа image также используются для пересылки данных формы на сервер. Однако они имеют вид не стандартных кнопок, а представляются как изображение (файл с изображением должен быть подготовлен Вами).

Другое отличие заключается в том, что на сервер пересылаются координаты точки, куда пользователь "кликнул" мышью (эти координаты формируются как значения полей name.x и name.y). Тэг для данного типа кнопки имеет следующий формат:

<input type="image" name="xxxx" src="xxxx" width="xxxx"

height="xxxx" border="xxxx" align="xxxx" hspace="xxxx"

vspace="xxxx" alt="xxxx">

Атрибуnы src, width, height, border, align, hspace, vspace и alt имеют тот же смысл, как и соответствующие атрибуты тэга <img>.

Создайте на Вашей странице кнопку типа image, использовав доступный Вам файл с изображением:

<input type="image" name="img_button" value="Кнопка-изображение"

src="images/mypicture.gif" width="170" height="23"

alt="Кнопка-изображение">

11. Кнопка типа reset используется для установки первоначальных значений полей формы (то есть тех значений, которые были установлены при загрузке страницы).

Создайте такую кнопку:

<input type="reset" value="Очистка данных формы">

12. Имеется возможность создать кнопку, которая не будет делать ничего до тех пор, пока Вы не напишете какого либо кода (например, обработчик событий onClick на языке JavaScript).

Создайте такую кнопку:

<input type="button" name="mybutton" value="Нажми меня!"

onclick="javascript:onClick()">

<br>

<script language="JavaScript">

function onClick() {

alert("Кнопка нажата! ");

}

</script>

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