 |
Создание и обработка форм в электронных документах, их назначение.
|
|
|
|
Рекомендации к составлению форм:
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.
|
|
|
