Быстрая передача фокуса элементам формы
Задание
1. Постройте таблицы в html-документе (можно через блокнот) следующего вида:
а) 
б)  | |
в)  |
г) создать таблицу, соответствующую заданной структуре web-страницы
2. Оформить следующую форму:
а) Фамилия – текстовое поле, имя – fam
б) Имя – текстовое поле, имя – name
в) Отчество – текстовое поле, имя – otch
г) Пароль – текстовое поле для ввода пароля, имя – password
д) Число – меню, имя – chislo, каждый элемент имеет значение, равное соответствующему числу, отображающемуся в меню, например, <optionvalue="2">2</option>. Первый элемент должен быть выбран. Элементы должны определять все возможные дни в месяце (от 1 до 31).
е) Месяц – меню, имя – month, каждый месяц оформить следующим образом: <optionvalue="2">февраль</option>, то есть значение равно номеру месяца. Первый элемент должен быть выбран. Элементы должны определять все возможные месяцы (от января до декабря).
ж) Год – меню, имя – year, каждый элемент оформить так: <optionvalue="1976">1976</option>. Первый элемент должен быть выбран. Элементы должны определять все возможные года в диапазоне от 1976 до 1986.
з) Ваш пол – меню, имя – sex, значение первого элемента – man, второго – woman. Первый элемент должен быть выбран.
и) Нравится ли Вам программирование – радиокнопки, имя для всех элементов – inf, значение первого элемента – yes, второго – no, третьего – notsure. Первый элемент должен быть выбран.
к) Что входит в Ваши интересы – checkbox, имя для всех элементов – like, значение первого элемента – kino, второго – theatre, третьего – music, четвертого – sport. Последний элемент помечен.
л) Внизу две кнопки – Очистить (type = reset) . Отправить (type=submit).
м) Значение Method установить Post.
Сохранить документ под именем forms.html и проверить работу формы (открыть ее в браузере, заполнить форму и отправить содержимое скрипту).
н) Поменять значение Method на Get.
Сохранить документ и проверить работу формы. Проанализируйте состояние адресной строки браузера. Так как никакой обработчик форме не назначен, то при нажатии кнопки подтверждения будет вызвана та же страница, которой будут переданы значения полей формы. Эти значения добавляются после знака вопроса в адрес страницы. В URL можно использовать только очень ограниченное число символов (в основном латинские буквы, цифры и некоторые знаки). Когда в форме содержится информация на кириллице, то при ее добавлении в URL браузер выполняет перекодирование. Все неразрешенные символы пересылаются в виде числовых кодов в формате %код_символа. Например, пробелы пересылаются в виде %20 (шестнадцатеричное представление кода 32).
о) В документе main.html добавить абзац «Посетите мою гостевую книгу», которую сделать гиперссылкой на документ forms.html.
п) В нижней части документа forms.html расположить надпись «Назад» – переход на главную страницу.
3.Добавить в элементы формы атрибуты tabindex, меняющие стандартный порядок просмотра и убедиться, что перемещение по элементам с помощью Tab происходит по описанной нестандартной схеме. Назначить элементами формы клавиши для быстрого доступа (атрибуты accesskey). Проверить работу "горячих" клавиш в разных браузерах.
Методические указания
Таблицы
Создание таблиц в HTML – тег <ТАВLЕ>…</ТАВLЕ>.
Создание строки таблицы — тег <ТR>…</TR> Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами <ТR></ТR>.
Определение ячеек таблицы - тег <ТD>…</TD> Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD>. Число тегов <ТD></ТD> в строке определяет число ячеек
<TABLE>
<TR>
<TD COLSPAN=3>Если в таблице два тега TR, то в ней две строки.</TD>
</TR>
<TR>
<TD>Если в строке три тега TD,</TD>
<TD>то в ней</TD>
<TD>три столбца.</TD>
</TR>
</TABLE>
Заголовки столбцов таблицы — тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
Использование заголовков таблицы — тег <САРТIОN>
Тег <CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.
Таблица 1. Описание тегов организации таблицы
| Функция | Тег | Атрибут | Значение |
| Организация таблицы | <table>… </table> | Align | Выравнивание таблицы по горизонтали. Обычно таблица отображается на левом краю страницы. ALIGN = LEFT‑ выравнивание таблицы по левому краю. ALIGN = RIGHT‑ выравнивание таблицы по правому краю. ALIGN = CENTER‑ выравнивание таблицы по центру. |
| Bgcolor | Задает цвет фона таблицы. Фон таблицы соответствует фону всего HTML-документа. | ||
| Border | Задает толщину границ ячеек таблицы. Значение n определяет ширину рамки таблицы в пикселях <TABLEBORDER=1>. При отсутствии атрибута BORDER или равному нулю, рамка у таблицы не отображается, но пустое место для нее будет отведено. | ||
| Bordercolor | Задает цвет границ таблицы и ее ячеек <TABLEBORDERCOLOR=ЦВЕТ>. | ||
| Width | Задает ширину таблицы в процентах от ширины окна браузера или в пикселях (100% - полная ширина окна) <TABLE WIDTH=50%>или<TABLE WIDTH=200>. | ||
| Height | Задает высоту таблицы в пикселях или в процентах от высоты окна браузера. | ||
| Организация строки таблицы | <tr>...</tr> | Align | Задает выравнивание всех элементов строки. Каждая ячейка имеет собственное выравнивание. Оно подавляет выравнивание, заданное Align‑ атрибутом строки. ALIGN=LEFT- выравнивание по левому краю. ALIGN=CENTER- выравнивание по центру. ALIGN=RIGHT– выравнивание по правому краю. |
| Bgcolor | Задает для каждой строки собственный фоновый цвет | ||
| Bordercolor | Задает цвет рамки для строки | ||
| Valign | Задает выравнивание по вертикали для содержимого элементов строки таблицы. По умолчанию элементы центрируются по вертикали. VALIGN=TOP‑выравнивание верхнему краю. VALIGN=CENTER‑ центрирует по вертикали. VALIGN=BOTTOM‑ выравнивание по нижнему краю. VALIGN=BASELINE‑ выравнивание по самой верхней текстовой строке. | ||
| Организация ячейки таблицы | <th></th> | Ячейка заголовка (содержимое горизонтально центрируется и выделяется полужирным шрифтом) | |
| <td>..</td> | Ячейка данных | ||
| Align | Выравнивание данных в ячейке по горизонтали. ALIGN=LEFT–выравнивание по левому краю. ALIGN=CENTER‑ выравнивание по центру. ALIGN=RIGHT‑ выравнивание по правому краю. | ||
| Bgcolor | Цвет фона ячейки | ||
| Bordercolor | Цвет рамки ячейки | ||
| Colspan | Ширина ячейки, выраженную в столбцах. COLSPAN=N, где N определяет, сколько табличных столбцов займет данная ячейка в пределах строки. | ||
| Rowspan | Высота ячейки, выраженную в строках. ROWSPAN=N определяет, сколько табличных строк займет данная ячейка. | ||
| Nowrap | Выключает разрыв строки. Содержимое ячейки таблицы форматируется как текст в окне, то есть в нужных местах вставляются разрывы строк <br> и <p>. Задание атрибута NOWRAP отменяет верстку строк и отображает все содержимое ячейки в одну строку. | ||
| Valign | Выравнивание данных в ячейке по вертикали VALIGN=TOP – выравнивание по верхнему краю VALIGN=BOTTOM – выравнивание по нижнему краю VALIGN=CENTER – выравнивание по центру VALIGN=BASELINE – по самой верхней текстовой строке всех находящихся в данной строке данных. | ||
| Width | Ширина ячейки таблицы в пикселях или в процентах от ширины таблицы. Если же ячейка в действительности шире (то есть ее содержимое требует для размещения больше места, чем задано этим атрибутом), WIDTH игнорируется. | ||
| Height | Задание высоты ячейки в пикселях. | ||
| Организация заголовка таблицы | <caption>… </caption> | Align | Выравнивание названия по горизонтали относительно ширины таблицы. ALIGN=LEFT– по левому краю таблицы. ALIGN=CENTER‑ по центру таблицы. ALIGN=RIGHT‑ по правому краю таблицы. |
| Valign | VALIGN=TOP – название размещается над таблицей. VALIGN= BOTTOM – название размещается под таблицей. |
Формы
Форма – это раздел документа, содержащий обычные данные, разметку, специальные элементы, называемые "элементы управления" (переключатель, radio-кнопка, меню и т.д.), и подписи для этих элементов управления. С помощью формы пользователь может послать некоторую информацию на web-сервер.
Формы передают информацию программам-обработчикам в виде пар
[имя переменной]=[значение переменной]
Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Форма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.
Элемент-форма <FORM>
Описание: определяет элемент-форму.
Начальный тег: необходим.
Конечный тег: необходим.
Определения атрибутов:
name = “строка” – задает имя формы;
action = “ссылка” – определяет обработчик формы (имя программы-скрипта);
method = “get|post” – определяет, какой метод HTTP используется для отправки набора данных формы. Возможные (нечувствительные к регистру) значения - "get" (по умолчанию) и "post":
· методом "get" набор данных формы присоединяется к URI, определённому атрибутом action (со знаком "?" в качестве разделителя), и этот новый URI высылается программе-обработчику;
· методом "post" набор данных формы включается в тело формы и высылается программе-обработчику;
enctype= “строка” – Определяет способ кодирования данных формы при их отправке на сервер. Значением по умолчанию этого атрибута является "application/x-www-form-urlencoded".
Значения:
· application/x-www-form-urlencoded - Вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями (например, %D0%90%D0%BD%D1%8F вместо Аня);
· multipart/form-data Данные не кодируются. Это значение применяется при отправке файлов;
· text/plain Пробелы заменяются знаком +, буквы и другие символы не кодируются.
Пример:
| <FORM name=”form1” action=”http://www.cspu.ru/script.php” method=”post” enctype=”application/x-www-form-urlencoded”> описание элементов формы… </FORM> | Пример описания формы, отправляющей содержимое методом POST скрипту script.php. |
Элементы управления формы
Элемент <INPUT>
Описание: определяет элемент формы.
Начальный тег: необходим.
Конечный тег: запрещен.
Определения атрибутов:
type = “text|password|checkbox|radio|submit|reset|button|hidden” – определяет тип создаваемого элемента (по умолчанию "text"):
· text – однострочный элемент для ввода текста;
· password – как "text", но вводимый текст изображается так, чтобы скрыть вводимые символы (напр., серией "звёздочек");
· checkbox– переключатель;
· radio– как “checkbox”, за исключением того, что, при использовании одного и того же имени элемента, они действуют взаимоисключающе: если одна выбрана "включено", все остальные с тем же именем "выключены";
· file- gоле для ввода имени файла, который пересылается на сервер
· submit,reset,button– кнопка:
o submit: при нажатии кнопка отправляет форму. Форма может содержать несколько кнопок submit;
o reset: при нажатии кнопка устанавливает все элементы формы в их начальные значения;
o button: кнопка не имеет предопределённых функций. Каждая кнопка push может иметь клиентский сценарий (выполняемый на стороне клиента), ассоциированный с атрибутом event (событие). При возникновении события (напр., пользователь нажал кнопку, отпустил её и т.д.), включается ассоциированный сценарий (скрипт);
· hidden– невидимый элемент, значения которого отправляется вместе с формой.
name = “строка” – задает имя элемента управления, необходимое для идентификации при передаче содержимого формы;
value = “строка” – значение элемента (не обязательно, если только атрибут type не имеет значение "radio" или "checkbox");
size = “число” – ширина элемента в пикселях, за исключениемслучаев, когда атрибут type имеет значение "text" или "password" (в этом случае значение атрибута целое число символов);
maxlength =“число” – если атрибут typeимеет значение "text" или "password", этот атрибут определяет максимальное количество символов, которое может ввести пользователь. Это число может оказаться больше установленного размера (size). В этом случае ПА должен предоставить возможность прокрутки. По умолчанию значением этого атрибута является неограниченное количество;
checked – если атрибут type имеет значение "radio" или "checkbox", данный булев атрибут определяет, что элемент выбран (установлен флажок или переключатель);
Примеры:
| <INPUT type=”text” size=”100” value=”Введите текст” name=”mytext”> | Описание текстового поля mytext разметом 100 пикселей и содержащем надпись «Введите текст» |
| <INPUT type=”checkbox” value=”Отметьте меня” name=”mycheckbox” checked> | Описание переключателя mycheckbox, содержащий надпись «Отметьте меня» и с отмеченной галочкой |
| <INPUT type=”submit” value=”Отправка формы”> | Описание кнопки для отправки формы |
| <INPUT type=”hidden” value=”1.1” name=”version” checked> | Описание скрытого поля, содержащего версию странички |
Элемент <SELECT>
Описание: создаёт меню (меню дает возможность выбора из списка значений). Каждая опция выбора представляется элементом <OPTION> (см. ниже). Элемент <SELECT> должен содержать не менее одного элемента <OPTION>.
Начальный тег: необходим.
Конечный тег: необходим.
Определения атрибутов:
name = “строка” – задает имя элемента управления, необходимое для идентификации при передаче содержимого формы;
size = “число” – если элемент <SELECT> представлен в виде прокручиваемого списка, этот атрибут определяет количество видимых одновременно рядов в списке;
multiple – при установке это булев атрибут разрешает множественный выбор. Если не установлен, элемент <SELECT> допускает выбор только одной позиции;
Элемент <OPTION>
Описание: определяет опцию выбора в меню (при рассмотрении выбора опции меню браузер должен использовать значение атрибута label в качестве выбора).
Начальный тег: необходим.
Конечный тег: не обязателен.
Определения атрибутов:
selected– если установлен, этот булев атрибут определяет, какая из опций выбрана;
value = “строка” – определяет значение элемента управления. Если не установлен, значение установлено на содержимое элемента <OPTION>.
Примеры:
| <SELECT name=”myselect”> | Описание меню |
| <OPTION value=”Курс 1” selected>первый курс</OPTION> | Описание первой опции меню, которая по умолчанию будет выбранной |
| <OPTION value=”Курс 2” selected>второй курс</OPTION> | Описание второй опции меню |
| <OPTION value=”Курс 3” selected>третий курс</OPTION></SELECT> | Описание третьей опции меню |
Элемент <TEXTAREA>
Описание: создаёт многострочный элемент управления для ввода текста.
Начальный тег: необходим.
Конечный тег: необходим.
Определения атрибутов:
name = “строка” – задает имя элемента управления, необходимое для идентификации при передаче содержимого формы;
rows = “число” – задает количество видимых строк;
cols = “число” – определяет видимую ширину, измеряемую в символах средней ширины.
Примеры:
| <TEXTAREA name=”text” rows=”20” cols=”80”>Введите текст</TEXTAREA> | Описание элемента для ввода текста, состоящего из 20 строк по 80 символов в каждой. Элемент содержит строку «Введите текст» |
Элементы управления web-форм приведены в таблице:
| Название элемента | Внешний вид элемента |
| Текстовое поле Text |  |
| Поле ввода пароля Password |  |
| Многострочное поле ввода Textarea |  |
| Скрытое текстовое поле Hidden | |
| Выпадающий список Select |  |
| Переключатель выбора Chekbox |  |
| Переключатель выбора Radio Button |  |
| Кнопка отправки формы Submit |  |
| Кнопка сброса формы Reset |  |
Быстрая передача фокуса элементам формы
В каждый момент времени в форме может быть активным только один элемент. Говорят, что этому элементу передан фокус.
Самый простой способ переключения между элементами формы (передачи фокуса) обеспечивает мышь. Но, если пользователю нужно ввести информацию в несколько текстовых полей подряд, то для перехода в следующее поле ему неудобно бросать клавиатуру, браться за мышку, а потом вновь возвращаться к клавиатуре для ввода.