<< Пред. стр.

стр. 42
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

document.formname.fieldname.select();
return false;


Инструментарий Проверка соответствия полей паролей
Добавьте данный блок кода в сценарий проверки на достовер-
ность, чтобы проконтролировать соответствие полей паролей,
заполняемых посетителем. Общеизвестна процедура: в одном
поле вводится пароль, а в следующем поле посетитель должен
ввести пароль повторно. Этот сценарий работает также с текс-
товыми полями и текстовыми областями.
var password = new String(document.formname.pass-
wordname.value);
var retype = new String(document.formname.retype-
name.value);
/ * Приведенный выше код создает новые переменные
для значений поля пароля и поля повторного ввода
Строим Web-сайты
392

пароля. Замените переменную formname именем формы,
переменную passwordname замените именем поля паро-
ля и переменную retypename - именем поля, в кото-
ром посетитель повторно вводит пароль. */
if (password.valueOf() != retype.valueOf()) {
alert("Поля паролей не совпадают.");
document.formname.retypename.value =""j
document.formname.passwordname.select ();
return false;


/* Приведенный выше блок кода if/then реализует
сравнение значения пароля со значением, набраниЗм
повторно. Если эти значения не совпадают, брау;;-
ром выводится сообщение об ошибке, очищается пс:пе
повторного ввода пароля, выделяется поле пароля и
останавливается передача формы. */

Проверка установки флажка «I Agree» (Я согласен)
Инструментарий
Добавьте данный блок кода в сценарий проверки на достовер-
ность, чтобы проконтролировать состояние флажка «I Agree»
(Я согласен), который посетитель устанавливает, когда согла-
шается с условиями предоставления услуг, политикой конфи-
денциальности или с любыми другими предварительными тре-
бованиями.
if (document.formname.checkboxname.checked ==
false) {
alert("Необходимо подтвердить принятие условий,
прежде чем продолжить.")
return false;


/* Приведенный выше блок кода if/then проверяет ус-
тановку флажка. Если флажок не установлен, браузе-
ром выводится сообщение об ошибке и передача формы
прекращается. Замените переменную formname именем
формы, а переменную checkboxname замените именем
флажка "I agree" (Я согласен). */
ГЛАВА 71.
Навигация с помощью клавиши Tab
Не все путешествуют по Интернету с помощью мыши. Некоторые люди не могут это
делать по причине инвалидности. Другие просто предпочитают пользоваться клави-
атурой. Как вы, возможно, знаете, перемещаться по интерактивным элементам на
странице, таким как ссылки и элементы управления формой, можно, нажимая кла-
вишу Tab.



Совет
Атрибут tabindex можно также использовать в тегах-анкерах
ссылок.



По умолчанию браузер осуществляет переходы, выполняемые с помощью клавиши
Tab, в порядке расположения соответствующих тегов в HTML-коде. Однако когда
форма скомпонована в виде таблицы, последовательность переходов браузера по эле-
ментам управления может нарушаться, поскольку теги элементов управления не всег-
да располагаются в коде в том логическом порядке, в котором выполняются перехо-
ды на экране.
Чтобы переходы по элементам управления формы, осуществляемые посетителем пос-
редством нажатия клавиши Tab, выполнялись в естественном и логичном порядке,
можно задать точную очередность элементов управления с помощью атрибутов
tabindex.
Возьмем форму на рисунке 71.1, В коде ее элементов управления не используются ат-
рибуты tabindex, и порядок перемещения по элементам управления определяется
самим браузером.


Совет
Если атрибут tabindex установлен для одного тега, установите дан-
ный атрибут для всех элементов управления и ссылок на Web-страни-
це. В противном случае при нажатии клавиши Tab браузером могут
выполняться переходы в ненадлежащем порядке.
394 Строим Web-сайты




You Your Spouse
Name Name
Email address : Email address
May we contact you? <> Tes О No
• May we contact your spouse? 0 Yes О No




Puc. 71.1. В коде элементов управления этой формы
не используется атрибут tabindex. Порядок переходов
при нажатии клавиши Tab определяется самим браузером

Листинг 71.1. Исходный код страницы, вид которой в браузере
показан на рисунке 71.1
<form>
<table>
<tr>
<td colspan="2"><strong>You</strongx/td>
<td width="50" rowspan="4">&nbsp;</td>
<td colspan="2"xstrong>Your Spouse</strongx/td>
. </tr>
<tr>
<td>Name</td>
•ctdxinput type="text" name="yourName"</td>
<td>Name</td>
<tdxinput type="text" name="spouseName"</td>
</tr>
<tr>
<td>Email•address</td>
<td><input type="text" name="yourEmail"</td>
<td>Email address</td>
<td><input type="text" name="spouseEmail"</td>
</tr>
<tr>
<td>May we contact you?</td>
<tdxinput type="radio" name="contactYou" value="yes" checked>
Yes
ГЛАВА 71. Навигация с помощью клавиши Tab 395

<input type="radio" name="contactYou" value="no">
No</td>
<td>May we contact your spouse?</td>
<tdxinput type="radio" name="contactSpouse" value="yes"
checked>
Yes
<input type="radio" name="contactSpouse" value="no">
No</td>
</tr>
</table> J
</form>

Если порядок Tab-переходов по форме определяется браузером, он проходит по
HTML-коду сверху вниз. Таким образом, браузером сначала выбирается поле
yourName, затем - поле spouseName, далее - поле yourEmail, после этого - поле
spouseEmail и так далее. Но данный порядок не является оптимальным для формы.
Было бы лучше, если бы посетитель мог заполнить сначала свои личные сведения,
прежде чем перейти на поля, соответствующие сведениям о супруге (Spouse).
Введите в код атрибут t a b index:
<form>
<table>
<tr>
<td colspan="2"xstrong>You</strongx/td>
<td width="50" rowspan="4">&nbsp;</td>
<td colspan="2"xstrong>Your Spouse</strongx/td>
</tr>
<tr>
<td>Name</td>
<tdxinput type="text" name = "yourName" tabindex="l"x/td>
<td>Name</td>
<tdxinput type="text" name="spouseName" tabindex="5"x/td>
</tr>
<tr>
<td>Email address</td>
<tdxinput type="text" name= "yourEmail" tabindex="2"x/td>
<td>Email address</td>
<tdxinput type="text" name="spouseEmail" tabindex="6"x/td>
</tr>
396 Строим Web-сайты

<tr>
<td>May we contact you?</td>
<td><input type="radio" name="contactYou" value="yes" checked
tabindex="3">
Yes
<input type="radio" name="contactYou" value="nc"
tabindex="4">
No</td>
<td>May we contact your spouse?</td>
<tdxinput type="radio" name="contactSpouse" value="y€:s"
checked tabindex="7">
Yes
<input type="radio" name="contactSpouse" value="r::O"
tabindex="8">
No</td>
</tr>
</table>
</form>


Совет
Если на одной и той же странице расположено несколько форм, не
возвращайтесь обратно к tabindex="l " для первого элемента на
следующей форме. Продолжайте нумерацию с того места, на кото-
ром она закончилась для предыдущей формы.


Обратите внимание, что каждый элемент управления получает атрибут t a b i n d e x .
Значение этого атрибута определяет место в последовательности Tab-переходов, от
наименьшего к наибольшему значению. Таким образом, последовательно принимая
значения t a b i n d e x , в браузере выполняется логичный переход от поля yourName к
полю yourEmail. далее к полю contactYou yes, затем к полю contactYou no и только пос-
ле этого совершается переход на столбец сведений о супруге (spouse) и продолжается
перемещение по соответствующим полям в том же порядке.


Часто задаваемые вопросы
ЧТО происходит, если в двух или более тегах значения атрибутов
tabindex одинаковы?
Браузер упорядочивает их в соответствии с положением тегов в
HTML-коде: те, которые ближе к верху кода, встречаются раньше в
последовательности Tab-переходов.
ГЛАВА 72.
Работа с наборами полей
Набор полей - это группа логически связанных элементов управления. Компоненты
набора полей не обязательно должны быть элементами управления одного типа.
В действительности каждый элемент управления может отличаться от других. До тех
пор, пока элементы управления отображаются рядом друг с другом в HTML-списке, их
можно группировать вместе в виде набора полей, как в примере на рисунке 72.1.



Определение
Набор полей (fieldset) - это группа логически связанных элементов
управления.




File ?dit ^iew Favorites loots fc



Pick the days to receive them:
Choose your newsletters:

Q Sunday
Q News
D Monday
D Sports
G Tuesday
• Weather
• Wednesday
D Entertainment
П Thursday
Q Editorial
a Friday
• Arts
П Style • Saturday




Puc. 72.1. Ha данной форме представлено два логических раздела или набора полей


Листинг 72.1. Исходный код страницы, вид которой в браузере
показан на рисунке 72.1
<form>
<table cellpadding="10">
<tr valign="top">
<td width="50%">
<pxstrong>Choose you newsletters :</strongx/p>


<!-- Начало первого набора полей -->


<fieldset>
<table>
Строим Web-сайты
398

<tr>
<td>
<input name="news" type="checkbox" value="yes">
News
</td>
</tr>
<tr>
<td>
<input name="sports" type="checkbox" value="yes">
Sports
</td>
</tr>
<tr>
<td>
<input name="weather" type="checkbox" value="yes">
Weather
</td>
</tr>
<tr>
<td>
<input name="ent" type="checkbox" value="yes">
Entertainment
</td>
</tr>
<tr>
<td> ..
<input name="ed" type="checkbox" value="yes">
Editorial
</td>
</tr>
<tr>
<td>
<input name="arts" type="checkbox" value="yes">
Arts
</td>
</tr>
ГЛАВА 72. Работа с наборами полей 399

<tr>
<td>
<input name="style" type="checkbox" value="yes">
Style
</td>
</tr>
</table> ',•
</fieldset>


<!-- Конец первого набора полей -->


</td>
<td width="50%">
<pxstrong>Pick the days to receive them:</strongx/p>


<!-- Начало второго набора полей --> ..


<fieldset>
<table> i •
<tr>
<td>
<input name="sun" type="checkbox" value="yes">
Sunday
</td>
</tr>
<tr>
<td>
<input name="mon" type="checkbox" value="yes">
Monday
</td>
</tr>
<tr>
<td>
<input name="tues" type="checkbox" value="yes">
Tuesday
</td>
Строим Web-сайты
400

</tr>
<tr>
<td>
<input name="wed" type="checkbox" value="yes">
Wednesday
</td>
</tr> ;
<tr>
<td>
<input name="thurs" type="checkbox" value="yes">
Thursday
</td>
</tr>
, <tr>
<td>
<input name="fri" type="checkbox" value="yes">
Friday
</td>
</tr>
<tr>
<td>
<input name="sat" type="checkbox" value="yes">
Saturday
</td> .
</tr> . -
</table>
</fieldset>


<!-- Конец второго набора полей -->


</td>
<tr>
</table>
</form>
401
ГЛАВА 72. Работа с наборами полей

Как можно видеть, браузер рисует тонкую, прямоугольную рамку вокруг элементов уп-
равления в наборе полей. С помощью тега <legend> можно даже вставить короткую
строк)' текста в рамку, как на рисунке 72.2.


Fte ?dit Wew Favorites Tools Help

<< Пред. стр.

стр. 42
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>