 |
Упражнение 3. Использование полей для ввода многострочной информации.
|
|
|
|
Преобразуем поле ввода - места жительства, т.о. чтобы в нем можно было указывать полный адрес. Очевидно, что для этих целей использование однострочного поля не логично. Для подобных целей используется контейнер, используемый в создаваемых формах: TextArea. Этот контейнер описывает поле, состоящее из нескольких строк.
Заменим тэг места жительства INPUT в предыдущем упражнении на следующий:
<textarea rows=5 cols=20 name="Address">
Г. Уфа
</textarea>
1) Проверьте работоспособность HTML документа. Внимание!!! Имя объекта осталось прежним.
2) Объединим используемые нами формы в одну; Исправим созданную нами функцию process.
<html><head>
<title> Форма с текстовыми полями </title>
<script language=javascript>
function process(nForm){
var result;
if(nForm==1) {
str=document.FirstForm.FirstName.value+" " +
document.FirstForm.LastName.value+"\n"+"Место жительства: "+document.FirstForm.Address.value;
if (document.FirstForm.Password1.value == document.FirstForm.Password2.value) {
alert(str);
result=confirm("Войти в систему?");
}
else{
alert("Пароль набран не правильно!!");
result=0;
}
if (result==1) alert("Регистрация в системе прошла успешно!!")
else alert("Регистрация не прошла)");
}
}
</script>
</head>
<body>
<form name="FirstForm">
<P>
Имя: <input type=text size=20 name="FirstName"><br>
Фамилия: <input type=text size=20 name="LastName"><br>
Место жительства:
<textarea rows=5 cols=20 name="Address">
г. Уфа
</textarea><br>
Укажите пароль: <br> <input type=password size=20 name="Password1">
<br><input type=password size=20 name="Password2"><br>
<P><input type=submit onClick="process(1)">
</body></html>
3) С помощью тэгов таблицы проведите выравнивание полей формы относительно друг друга (border=0). Для всех текстовых полей укажите одинаковую величину, описывающую количество символов в строке.
|
|
|
4) Используя дополнительный параметр тэга INPUT – maxlength установить максимально возможное количество символов: для имени – 15, для фамилии 20, для пароля 10.
Упражнение 4. Использование флажков.
Добавить в форму анкету, состоящую из 5-7 простых вопросов. Изменить процедуру обработки т.о. чтобы выводилось сообщение о количестве включенных и выключенных флажках. (Например: Включено – 3, Выключено – 4).
Теория.
Для добавления флажка в форму используется уже знакомый тэг INPUT. В этом случае параметр TYPE должен иметь значение checkbox, параметр CHECKED может принимать значение true(1) или false(0), в зависимости от начального положения флажка.
Пример:
<input type=checkbox checked=1 name="check1">
! Для обращения к любой форме в документе можно использовать не только имя, но и номер в массиве форм (далее в коде выделено). Все формы в документе получают свой порядковый номер (который начинается с нуля).
Аналогичный метод существует и для элементов форм. Каждый объект в форме получает свой порядковый номер, и доступ к нему может быть осуществлен через массив элементов формы elements.
Например: document.forms[0].elements[4].value.length
В данном случае необходимо получить длину строки пятого элемента первой формы текущего документа.
Выполнение задания:
1) Добавить в имеющуюся форму 5 вопросов в левую часть таблицы (добавить 5 строк таблицы);
2) Добавить в левую часть таблицы 5 флажков. Каждый флажок должен по умолчанию иметь значение наиболее вероятного ответа. (Должны присутствовать различные начальные состояния); Какое значение используется по умолчанию?
3) Изменить функцию process т.о. чтобы в случае успешного входа в систему подводился итог количества положительных и отрицательных ответов. Для этого необходимо произвести подсчет, например, так:
Если объекты флажков имеют имена check1, check2 и т.д.
v=0;n=0;
If (document.FirstForm.check1.checked=1) v++
else n++;
If (document.FirstForm.check2.checked=1) v++
|
|
|
else n++;
И т.д.
4) Добавить проверку на недопустимость паролей длиной менее 4 символов; (Для этого можно воспользоваться свойством length объекта строки); Пример:
document.FirstForm.Password1.value.length
Текст функции process:
function process(nForm)
{
var result,v,n;
str=document.FirstForm.FirstName.value+" " +
document.FirstForm.LastName.value+"\n"+"Место жительства: "+document.FirstForm.Address.value;
if ((document.FirstForm.Password1.value == document.FirstForm.Password2.value)
&& (document.FirstForm.Password2.value.length>3))
{
alert(str);
result=confirm("Войти в систему?");
}
else
{
alert("Пароль набран не правильно!!");
result=0;
}
if (result==1)
{
alert("Регистрация в системе прошла успешно!!");
v=0;n=0;
if (document. forms[0]. check1.checked==1) v++
else n++;
if (document. forms[0]. check2.checked==1) v++
else n++;
if (document. forms[0]. check3.checked==1) v++
else n++;
if (document. forms[0]. check4.checked==1) v++
else n++;
if (document. forms[0]. check5.checked==1) v++
else n++;
alert("Ответов ДА-"+v+" Ответов НЕТ-"+n);
}
else alert("Регистрация не прошла");
}
5) Изменить подсчет количества положительных и отрицательных ответов на цикл, осуществляя просмотр соответствующих элементов (по номерам). Пример:
v=0;n=0;
for(i=5;i<12;i++)
if (document.forms[0]. elements[i]. checked==1) v++
else n++;
alert("Ответов ДА-"+v+" Ответов НЕТ-"+n);
Упражнение 5. Использование переключателей.
В данном задании необходимо создать новую форму, содержащую переключатели (2 группы по 3-5 переключателей в каждой) и кнопку SUBMIT. Кроме того, необходимо написать новую функцию для обработки информации от данной формы – она должна выводить сообщение о номере выбранного элемента в первой и второй группе.
Теория.
Для выполнения данного задания будем использовать файл, сформированный нами в 4-ом упражнении. Построение переключателей проходит в той же последовательности, что и создание флажков. В качестве параметра TYPE выступает значение radio. Возникает вопрос как определить к какой группе относится переключатель. Решение состоит в том, что у каждого переключателя поле NAME совпадает с именем группы (и наоборот имя группы совпадает с именем любого из переключателей входящих в группу). Т.о. для создания группы переключателя необходимо создать хотя бы один переключатель и задать в нем поле NAME. Построим две группы переключателей с именами групп соответственно: group1 и group2. Обратите внимание, что значения по умолчанию устанавливаются так же как и у флажков через параметр CHECKED, но значение истина (1) может быть только у одного члена группы.
|
|
|
<form name="SecondForm">
<input type=radio name="group1">
<input type=radio name="group1">
<input type=radio name="group1" checked=1>
<input type=radio name="group1">
<input type=radio name="group2">
<input type=radio name="group2" checked=1>
<input type=radio name="group2">
<input type=submit onClick="">
</form>
1) Протестируйте данный пример. Определите какие переключатели относятся к первой, а какие ко второй группе. Попробуйте переставить строки местами, убедитесь, что принадлежность группе определяется полем NAME.
2) Добавим новую функцию (newprocess), обрабатывающую значения из второй формы. Для обращения к форме и к ее элементам будем использовать соответствующие массивы (см. переключатели). Не забудьте отредактировать пункт onClick кнопки submit.
function newprocess()
{
var str1,str2;
str1="";
str2="";
for (i=0;i<4;i++) str1+=document.forms[1].elements[i].checked+" ";
for (;i<7;i++) str2+=document.forms[1].elements[i].checked+" ";
alert(str1+"/"+str2);
}
Объясните почему значение индекса forms равно 1. Если вы внимательно выполняли задание, то, наверное, заметили, что пример приведенный выше не выполняет тех действий, которые даны в задании. В данном примере выводиться состояние всех переключателей первой и второй группы, разделенные косой чертой. Но эта информация избыточна, т.к. достаточно знать какой переключатель в каждой из форм является истинным, чтобы сделать вывод о ложности всех остальных. Модифицируйте функцию таким образом, чтобы она сообщала о номерах включенных переключателях (причем мы будем нумеровать их, начиная с 1).
3) Добавьте форматирование, т.о. чтобы переключатели располагались друг под другом в двух столбцах (в каждом столбце по группе).
4) В приведенном примере мы обращались к значениям переключателей через elements, но можно аналогично обращаться к этим же параметрам используя имя группы, пример:
document.forms[1].group1[1].checked
|
|
|
