Расчетное задание №3 Использование таблиц и фреймов
Цель работы: научиться строить таблицы любой сложности и разбивать рабочую область Web-браузера на независимые друг от друга прямоугольные области.
Добавьте таблицу в созданный ранее сайт (расчетн. задан. №2). Включите в нее информацию, согласующуюся с тематикой сайта.
Используя фреймы, в одну область поместите документ с кнопками навигации, а другую используйте для загрузки необходимой информации.
Составьте отчет о проделанной работе, включив в него:
код HTML-страницы, содержащей таблицу;
общий вид браузера после загрузки HTML-страницы с готовой таблицей;
код HTML-документа, задающего разбивку рабочей области на фреймы;
результат работы HTML-документа с фреймами в окне обозревателя.
Формы (формуляры)
HTML – это не язык программирования, но и он предоставляет возможность для организации полноценного диалога между пользователем и сервером, то есть позволяет организовать ввод некоторой информации и передачу ее на сервер для обработки. Эту функцию берут на себя так называемые формы.
Форма начинается с тэга <form>, а заканчивается - </form>. Этот тэг имеет обязательные атрибуты:
action – указывает действие, которое будет произведено над введенными данными.
method – способ посылки данных серверу.
В атрибуте action чаще всего указывается URL размещенного на сервере т.н. сценария-обработчика получаемых данных (CGI). Такие сценарии обычно пишут на языке Perl опытные программисты. Но с помощью атрибута action можно перенаправить введенные данные на собственный почтовый ящик. Оформить это можно следующим образом:
action=”mailto:электронный адрес”
Атрибут method может принимать два значения:
method=”get”
method=”post”
Предпочтительнее использовать второй вариант, т.к. в этом случае данные будут посланы в скрытом виде.
Далее, тэги для описания элементов формы приведем в табл. 7
Таблица 8
Формы
Тэг |
Атрибуты |
Назначение |
<form> </form> |
|
Задает начало и конец формы |
|
name={Имя} |
Имя формы |
Продолжение табл. 8
|
||
|
action={Обработка} |
Способ обработки посланных серверу данных. Для посылки данных на e-mail этот атрибут должен иметь вид: "mailto:{адрес}" |
|
method={Метод} |
Способ, которым данные посылаются серверу |
<input> |
|
Тэг, описывающий диалоговые элементы формы типа полей ввода и кнопок различного вида |
|
type="{тип}" |
Этот атрибут специфицирует элемент, выводимый тэгом <input> следующим образом: •text — строка ввода •password — строка ввода пароля •radio — кнопка с зависимой фиксацией •checkbox — радиокнопка •submit — кнопка "Выполнить" •reset — кнопка "Восстановить" •hidden — скрытое поле |
|
name="{имя}" |
Имя элемента, по которому он может быть обработан средствами языка JavaScript |
|
value={значение} |
Конкретное значение элемента |
|
size="{ширина}" |
Ширина (в символах) для строк ввода |
|
Maxlength= "{макс. ширина}" |
Максимальное количество символов, которые могут быть введены в данном текстовом поле |
<select> </select> |
|
Задает начало и конец раскрывающегося списка |
|
name="{имя}" |
Имя списка |
|
multiple |
Наличие этого атрибута делает возможным множественный выбор из списка |
<option> </option> |
|
Описывает элемент списка |
|
selected |
Этот необязательный атрибут специфицирует первоначально активный элемент |
Продолжение табл. 8
|
||
<textarea> </textarea> |
|
Описывает поле для ввода большого текстового массива |
|
name="имя" |
Имя элемента |
|
rows=X |
Высота поля (в строках) |
|
cols=X |
Ширина поля (в символах) |
Теперь рассмотрим пример формы (рис.6), которую можно использовать для сбора данных о посетителях сайта (пример 6). После ввода данные посылаются на некий гипотетический адрес yyyy@mail.ru.
Пример 6. Форма, посылающая сообщение на электронный адрес.
<html><head><title> Формы </title></head>
<body bgcolor="#C0C0C0">
<table border="0" bgcolor="pink">
<form action="mailto:yyyy@mail.ru" method="post">
<tr><td align="left" valign="middle">Имя: </td>
<td><input type="text" size="25"></td>
<tr><td align="left" valign="middle">Фамилия: </td>
<td><INPUT type="text" size="25"></td>
<tr><td align="left" valign="middle">Ваш E-mail: </td>
<td><input type="text" size="25"></td>
<tr><td>Пол:</td>
<td><input type="radio" > М <input type="radio" > Ж </td>
<tr><td>Адрес</td>
<td><select name="adress">
<option selected>Абакан
< option >Новосибирск
< option >другой
</select></td>
<tr><td align="left" valign="top">Сообщение:</td>
<td><textarea cols="30" rows="3" >Введите сообщение</textarea></td>
<tr><td align="bottom"><INPUT type="submit" value="Отослать"></td>
<td><input type="reset" value="Сброс"></td>
</form></table>
</body></html>
Рис. 6