Упражнение 3. Использование полей для ввода многострочной информации.
Лабораторная работа № 5 JavaScript
Создание и обработка форм в электронных документах, их назначение.
Рекомендации к составлению форм:
1) Используйте тэг перевода строки <br>, в контейнере формы;
2) Если вы работаете с длинным полем ввода, или с полем TEXTAREA, целесообразно разместить поясняющий текст над полем, а не рядом с ним;
3) Можно воспользоваться тэгом предварительного форматирования <pre>, для выравнивания полей, но данным советом лучше не пользоваться;
4) Пользуйтесь таблицами для выравнивания полей форм. Данный метод предпочтительнее предварительного форматирования, т.к. позволяет включить в форму не только форматирование и текст, но и другие объекты HTML, например рисунки.
5) Используйте тэг абзаца <p>, для разделения формы на логические части;
6) Иногда для желаемой компоновки формы оказывается недостаточным применение тэгов перевода строки и абзаца. Попробуйте воспользоваться тэгами списка. Они особенно хорошо подходят для организации нужного отступа и нумерации полей;
7) Существует три основных способа расположения опций на странице: горизонтальный (в одной строке), вертикальный (списком) и смешанный (таблицей);
8) Допускается комбинирование нескольких способов компоновки в одной форме;
9) Разрабатывая форму, старайтесь не выходить за рамки одной страницы;
10) Кнопку отправки располагайте внизу формы;
11) Располагайте поля формы в логическом порядке;
12) Хорошо продумайте вашу форму еще до начала их разработки.
Упражнение 1. Простейшая форма.
Создать форму, которая содержит текст "Моя первая форма!" и кнопку подтверждения (ниже строки текста). При нажатии кнопки появляется окно сообщения с текстом "Принято".
Теория.
Кнопку подтверждения вставляют с помощью элемента INPUT (не имеет закрывающего тега), который в простейшем варианте может быть сформирован следующим образом
<INPUT TYPE=SUBMIT OnClick=метод_обработчик >
Небольшой метод, выполняющий обработку, может быть записан прямо в элементе INPUT.
В общем случае здесь записывается вызов функции-обработчика (заключается в кавычки).
Выполнение упражнения.
1) Наберите текст, приведенной HTML-страницы и убедитесь, что форма функционирует в соответствии с заданием.
<html>
<head>
<title> First Form</title>
</head>
<body>
<form>
Моя первая форма!
<P>
<input type="submit" onClick="alert('Передано!')">
</form>
</body>
</html>
После проверки работы программы вставьте теги для выравнивания кнопки подтверждения по центру строки и обновите файл.
2) Создайте в разделе HEAD функцию - обработчик process (скрипт), которая выводит окно с требуемым сообщением. Текст сообщения определяется в функции process с помощью переменной str. Замените вызов функции alert на вызов process.
3) Удалите текст. Измените функцию process так, чтобы она имела один аргумент — текст сообщения. В определении обработчика onClick измените вызов функции process, добавив в качестве аргумента текст 'Новый вариант' (в апострофах, так как кавычки уже использованы).
4) Добавьте на страницу вторую форму, в которой выводится текст "Это вторая форма" и используется та же функция-обработчик process. На экране разделите формы горизонтальной линией. При нажатии кнопки из первой форме должен выводиться текст "Первая форма", а на второй — "Вторая форма".
Упражнение 2. Запрос строк текста.
В первую форму добавить два окна для ввода имени и фамилии. При нажатии кнопки подтверждения появляется окно, в котором выводятся объединенные в одну строку имя и фамилия. Функция-обработчик process принимает один аргумент — номер вызвавшей его формы. Далее, следуя инструкциям необходимо ввести новую форму для ввода пароля.
Теория.
! Для адресации к конкретному элементу конкретной формы с помощью атрибута name элементам и формам присваиваются имена (в тексте упражнения они выделены).
Текст, введенный пользователем в созданное окно, определяется значением свойства value (при использовании этого свойства для обработки в скрипте использовать для записи только строчные буквы).
Выполнение задания
1) Наберите текст, приведенной HTML-страницы и убедитесь, что форма функционирует в соответствии с заданием.
<html><head>
<title> Форма с текстовыми полями</title>
<script language=javascript>
function process(nForm){
if(nForm==1){
str=document.FirstForm.FirstName.value+" " +
document.FirstForm.LastName.value;
alert(str) }
}
</script></head>
<body>
<form name="FirstForm">
Моя первая форма!
<P>
Имя: <input type=text size=20 name="FirstName">
Фамилия: <input type=text size=20 name="LastName">
<P><input type=submit onClick="process(1)">
</form>
<hr>
<form> Это вторая форма!
<P><input type=submit onClick="alert('Пусто!')">
</form>
</body></html>
В обработчике обратите внимание на метод обращение к значению поля, который фактически описывает "путь" выбора от наиболее общего понятия (document) к собственно значению элемента value. Запись (читается слева направо):
document.FirstForm.FirstName.value
означает: в документе выбрать форму FirstForm, в которой выбрать элемент FirstName, у которого получить свойство value.
2) Добавить во вторую форму поле "Место жительства". Добавить в process обработку информации из второй формы (не забудьте дать имена элементам документа).
При нажатии кнопки во второй форме выводится строка, объединяющая текст "Место жительства: « и название взятого из формы населенного пункта.
3) Добавить третью форму для ввода пароля регистрации пользователя в системе. Для этого необходимо использовать уже знакомый тэг INPUT с параметром TYPE=”password”. В этом случае все вводимые символы будут заменяться звездочками.
4) Создать два поля для ввода пароля. Затем изменить функцию process, для того чтобы она могла обрабатывать информацию поступающую от третьей формы следующим образом:
· Если пароль в первом и втором поле указан правильно (совпадает) выводиться сообщение “Войти в систему?” и двумя клавишами OK и Cancel. (Для выполнения этого задания можно воспользоваться функцией confirm(строка)). Пример: result=confirm(“Войти в систему?”). В случае нажатия на кнопку OK переменная result получит значение TRUE, иначе FALSE.
· Если пароль указан неправильно (не совпадает в первом и во втором поле) выводится сообщение “Пароль набран не правильно!!” с единственной клавишей OK. Переменная result в этом случае положить значение FALSE.
· Если значение переменной result TRUE (истина) вывести сообщение “Регистрация в системе прошла успешно”, иначе “Регистрация не прошла”.
Рекомендации: Для проверки на равенство двух строк можно воспользоваться операторами языка JavaScript = = (проверка на равенство), или != (проверка на неравенство).
Пример: Str= =FirstForm.Lastname.value.
Упражнение 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);