ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 19.10.2024
Просмотров: 77
Скачиваний: 0
Изображения
Чтобы "вставить" картинку в документ, используется тэг <img>.
Его основные атрибуты:
|
Src |
Источник(source) изображения, т.е. адрес графического файла. |
|
width, height |
Ширинаивысотаизображения. Эти атрибуты можно не указывать, тогда рисунок будет выглядеть "как есть", но лучше задавать их явно, чтобы браузер зарезервировал соответствующий объем памяти. |
|
Alt |
Текст, появляющийся на экране вместо рисунка, если тот по какой-либо причине не может быть загружен. "Всплывает" при наведении мыши на рисунок. |
|
Border |
Толщина рамкивокруг рисунка. |
Таблицы
"Скелет" таблицы выглядит следующим образом:
-
<table>
<tr>
<td>Содержимое ячейки</td>
<td>Содержимое ячейки</td>
...
</tr>
<tr>
<td>Содержимое ячейки</td>
<td>Содержимое ячейки</td>
...
</tr>
...
</table>
Здесь контейнер <tr>...</tr> определяет строку таблицы, контейнер <td>...</td> - ячейку в строке, контейнер <table>...</table> - собственно таблицу. Некоторые из атрибутов тэга <table> применимы к отдельным строкам или ячейкам таблицы. Так, например, можно задать свой цвет или фоновый рисунок для отдельных ячеек.
Атрибут align, заданный для отдельной ячейки, определяет горизонтальное положение текста внутри нее, атрибут valign, заданный для ячейки, определяет вертикальное положение ее содержимого (top, middle или bottom).
Формы
Одним из важнейших свойств web-документов является возможность получения данных от клиентов и отправки их на сервер. Эта возможность обеспечивается с помощью так называемых ФОРМ (FORMS).
Вот один из простейших примеров:
|
Начало формы Анкета кандидата в члены EMICS Звездочкой ( *) отмечены обязательные поля Конец формы |
||
|
1. |
Фамилия * |
|
|
2. |
Имя, отчество * |
|
|
3. |
Место работы * |
|
|
4. |
Должность * |
|
|
5. |
Рабочий адрес * |
|
|
6. |
Рабочий телефон * |
|
|
7. |
Факс |
|
|
8. |
E-mail * |
|
|
9. |
Адрес личной web-страницы |
|
|
10. |
Ученая степень |
|
|
11. |
Ученое звание |
|
|
12. |
Область научных интересов * |
1.
|
|
|
||
2.
3.
4.
5.
6.
Это очень простая форма. Она содержит лишь текстовые поля и две кнопки. Первая кнопка (RESET) позволяет "сбросить" все введенные пользователем данные, вторая (SUBMIT)- непосредственно отсылает данные на сервер. Ясно, что если забыть разместить в форме кнопку SUBMIT, то данные на сервер не будут отправлены.
Этот контейнер можно уподобить обычному бумажному почтовому конверту - на последнем обязательно присутствует адрес назначения и фамилия адресата, в тэге <form>...</form> непременно указывается адрес серверного сценария, который получит и обработает введенные клиентом данные. Для этого используется атрибут action.
Элементы форм
Все элементы форм создаются тэгами, имеющими начало: <input type="...", где значения атрибута type и определяют тип элемента. Рассмотрим возможные значения этого атрибута.
Текстовое поле (text field):
Текстовое поле определяет код:
|
<input type="Text" name="имя поля" value="начальный текст" align="LEFT" size="число символов" maxlength="максимальное число символов"> |
Здесь:
name - имя поля (впоследствии мы узнаем, как к элементам форм можно обращаться просто по имени);
value - то, что будет записано в текстовое поле "по умолчанию", как только документ появится в окне браузера;
align - этот атрибут "отвечает" за расположение текстового поля; он не является специфическим для элементов форм и (как и в других тэгах) может принимать значения: left, right, center;
size - длина поля в символах;
maxlength - максимальное число символов, которое можно ввести в поле. Если этот атрибут не указывать, ограничений на ввод не будет.
Текстовая область (text area):
Текстовые области удобно использовать для ввода большого количества текстовой информации.
Код текстовой области выглядит следующим образом:
|
<textarea name="имя" cols="число столбцов" rows="число строк" wrap="способ переноса строк"> ТЕКСТ, РАЗМЕЩЕННЫЙ В ТЕКСТОВОЙ ОБЛАСТИ </textarea> |
Здесь атрибут "wrap" указывает на способ разрыва строки: если присвоить ему значение off, вводимый текст будет "уходить" за пределы области, в противном случае (on, soft или даже просто wrap без присвоения) текст автоматически переносится на новую строку.
Список:
Списки позволяют сделать единственный или множественный выбор из набора предлагаемых опций (options).
Наряду с кнопками submit и reset используются и "простые" кнопки, с которыми обычно связывается то или иное действие. "Простая кнопка" создается с помощью кода:
|
<input type="button" name="имя кнопки" value="то, что на этой кнопке написано" onclick="действие, связанное с кнопкой"> |
Обратите внимание на атрибут onclick. Он представляет собой обработчик события - нажатия на кнопку. Для обработки этого события (и множества других событий) используются клиентские сценарии, написанные на языке JavaScript или VBScript. (Язык JavaScript мы вскоре будем изучать.) Как правило, эти сценарии оформляются в виде функций, вызов которых является значением обработчика события onclick.
|
Например: |
|
<input type="button" value="Показать сегодняшнее число" onclick="alert(Date());"> |
|
Результат: |
|
Забегая вперед, скажем, что здесь вызывается встроенный JavaScript'овский метод alert(), который создает системное окно для размещения в нем той или иной информации (значения его аргумента). В нашем случае аргументом метода alert() является встроенный JavaScript'овский объект Date(), содержащий информацию о текущей дате и времени. Об этом объекте мы впоследствии поговорим более подробно. |
Поле для ввода пароля (password):
Поле для ввода пароля отличается от обычного текстового поля тем, что вводимое в него значение отображается с помощью звездочек. Синтаксис такого поля имеет вид:
|
<input type="password" value="значение по умолчанию" size="длина поля (в символах)" maxlength="максимально допустимое число вводимых символов"> |
Например:
|
Код:
<input type="password" value="123456" size="6" maxlength="8"> |
|
Результат:
|
Прикрепление файлов:
Использование форм позволяет пользователю прикрепить файл и отправить его на сервер вместе с содержимым текстовых полей и других элементов формы. Например, многие сайты, где предусмотрена регистрация пользователей (скажем, агентства по трудоустройству) предусматривают отсылку фото, текстовых файлов с резюме, архивных файлов с текстами статей и пр. Для поиска файла на компьютере клиента (или в сетевом окружении, если клиентский компьютер находится в локальной сети) служит элемент:
|
<input type="file" name="имя элемента" size="длина адресного поля в символах" accept="допустимый тип файла"> |
В следующем примере мы ограничиваем выбор прикрепляемого файла форматами: txt, html, avi (видео), bmp (графика)
|
<input type="file" size="50" accept="text/plain,text/html,video/x-msvideo,image/x-portablebitmap"> |
ВАЖНО! Форма, содержащая поле типа FILE (для прикрепления файлов), должна иметь атрибут enctype="multipart/form-data". "Ответственным" за сохранение файла на сервере является, конечно же, серверный сценарий. Он будет использовать атрибут name как временное имя файла.
Итак, мы рассмотрели все элементы форм и знаем принцип связи документа, содержащего форму, с серверным сценарием, "принимающим эстафету" от него (его адрес указывается в качестве значения атрибута action). Однако атрибут action является не единственным атрибутом формы. Забегая вперед, назовем еще два важных атрибута.