Лабораторная работа 1 Программирование на языках высокого уровня 10

Лабораторная 1. Работа с таблицами и работа с формами html

Цель: Изучить основы организации таблиц в HTML, которые используются для разметки страницы. Научиться использовать теги HTML для создания форм.

Задание

1. Постройте таблицы в html-документе (можно через блокнот) следующего вида:

а)

б)
в)

г) создать таблицу, соответствующую заданной структуре web-страницы

2. Оформить следующую форму:

1. Фамилия – текстовое поле, имя – fam

2. Имя – текстовое поле, имя – name

3. Отчество – текстовое поле, имя – otch

4. Пароль – текстовое поле для ввода пароля, имя – password

5. Число – меню, имя – chislo, каждый элемент имеет значение, равное соответствующему числу, отображающемуся в меню, например, <optionvalue="2">2</option>. Первый элемент должен быть выбран. Элементы должны определять все возможные дни в месяце (от 1 до 31).

6. Месяц – меню, имя – month, каждый месяц оформить следующим образом: <optionvalue="2">февраль</option>, то есть значение равно номеру месяца. Первый элемент должен быть выбран. Элементы должны определять все возможные месяцы (от января до декабря).

7. Год – меню, имя – year, каждый элемент оформить так: <optionvalue="1976">1976</option>. Первый элемент должен быть выбран. Элементы должны определять все возможные года в диапазоне от 1976 до 1986.

8. Ваш пол – меню, имя – sex, значение первого элемента – man, второго – woman. Первый элемент должен быть выбран.

9. Нравится ли Вам программирование – радиокнопки, имя для всех элементов – inf, значение первого элемента – yes, второго – no, третьего – notsure. Первый элемент должен быть выбран.

10. Что входит в Ваши интересы – checkbox, имя для всех элементов – like, значение первого элемента – kino, второго – theatre, третьего – music, четвертого – sport. Последний элемент помечен.

11. Внизу две кнопки – Очистить (type = reset) . Отправить (type=submit).

12. Значение Method установить Post.

Сохранить документ под именем forms.html и проверить работу формы (открыть ее в браузере, заполнить форму и отправить содержимое скрипту).

13. Поменять значение Method на Get.

Сохранить документ и проверить работу формы. Проанализируйте состояние адресной строки браузера. Так как никакой обработчик форме не назначен, то при нажатии кнопки подтверждения будет вызвана та же страница, которой будут переданы значения полей формы. Эти значения добавляются после знака вопроса в адрес страницы. В URL можно использовать только очень ограниченное число символов (в основном латинские буквы, цифры и некоторые знаки). Когда в форме содержится информация на кириллице, то при ее добавлении в URL браузер выполняет перекодирование. Все неразрешенные символы пересылаются в виде числовых кодов в формате %код_символа. Например, пробелы пересылаются в виде %20 (шестнадцатеричное представление кода 32).

14. В документе main.html добавить абзац «Посетите мою гостевую книгу», которую сделать гиперссылкой на документ forms.html.

15. В нижней части документа forms.html расположить надпись «Назад» – переход на главную страницу.

3. Добавить в элементы формы атрибуты tabindex, меняющие стандартный порядок просмотра и убедиться, что перемещение по элементам с помощью Tab происходит по описанной нестандартной схеме. Назначить элементами формы клавиши для быстрого доступа (атрибуты accesskey). Проверить работу "горячих" клавиш в разных браузерах.