Практическое задание.

1. Измените ваш сайт таким образом, чтобы на всех страницах постоянно отображался заголовок и главное меню.

2. Отделите заголовок и главное меню от остальной части сайта утопленной линией. Такое же оформление используйте для разделов страницы.

3. Страница должна быть поделена на разделы, внутри которых будут отображаться сведения о запрашиваемом товаре, загружаясь соответственно выбранному пункту главного меню.

Контрольные вопросы.

1. Что такое фреймы и контейнеры?

2. Как открыть новое окно в браузере с помощью JavaScript?

3. Обращение к свойствам и событиям окна.

4. Каким образом загрузить на одну страницу содержимое сразу нескольких страниц?

5. Свойства фреймов и контейнеров.

6. Способы управления окнами в браузере с помощью JavaScript.

Дисциплина «Программное обеспечение компьютерных сетей» Специальность 230105

Лабораторная работа №5.

«Введение данных в формы».

Теоретическая часть.

Формы: метод и событие "submit’’

JavaScript может делать с формами почти всё, что угодно. Единственное, что он не может — это самостоятельно заполнять поля <input type="file">, без инициативы пользователя.

Наиболее частое применение — это валидация (проверка) формы перед отправкой. Для неё существует событие submit.

Событие submit

Чтобы отправить форму на сервер, у посетителя есть два способа:

1. Первый — это нажать кнопку <input type="submit"> или <input type="image">.

2. Второй — нажать Enter на поле, когда оно в фокусе.

В обоих случаях будет сгенерировано событие submit. Если отменить в нём действие браузера, то форма не отправится на сервер.

Как правило, это используется для проверки данных в форме. Если что-то не так — выводится ошибка и отправка отменяется.

Посмотрим это на живом примере. Оба способа выдадут сообщение, форма не будет отправлена:

1	<form onsubmit="alert('submit!');return false">

2	Первый: Enter в текстовом поле <input type="text" value="Текст"><br>

3	Второй: Нажать на "Отправить": <input type="submit" value="Отправить">

4

</form>

5

6

</button>

Ожидаемое поведение:

1. Перейдите в текстовое поле и нажмите Enter, будет событие, но форма не отправится на сервер благодаря return false в обработчике.

2. То же самое произойдет при клике на <input type="submit">.

Взаимосвязь событий submit и click

При отправки формы путём нажатия Enter на текстовом поле, на элементе <input type="submit"> везде, кроме IE<9, генерируется событие click.

Это довольно забавно, учитывая что клика-то и не было.

1	<form onsubmit="alert('submit');return false">

2	<input type="text" size="30" value="Нажми здесь Enter">

3	<input type="submit" value="Submit" onclick="alert('click')">

4

</form>

В IE<9 событие submit не всплывает. Впрочем, если вешать обработчик submit на сам элемент формы, без использования делегирования, то это не создаёт проблем.