Формы и сенсорные изображения в HTML

Автор работы: Пользователь скрыл имя, 27 Января 2013 в 13:56, контрольная работа

Описание работы

Сенсорное изображение - это рисунок, разделенный на отдельные участки ("горячие области", "hot spots"), каждый из которых, как правило, является гиперссылкой на отдельный документ или связан с какой-либо процедурой.

Содержание работы

1 сенсорные изображения 3
2 Форма в языке HTML 5
2.1 Суть и назначение 5
2.2 Поле для ввода строки текста 7
2.3 Поле для ввода пароля 7
2.4 Выбор одного или нескольких значений из определенных на странице 8
2.5 Выбор одного значения из нескольких 8
2.6 Элемент ввода текста 8
2.7 Скрытые элементы 9
2.8 Организация меню 9
2.9 Выпадающее меню 9
2.10 Выбор файлов для отправки на сервер 10
2.11 Кнопки 11
2.12 Методы работы с формами 12

Файлы: 1 файл

КСР1.docx

— 81.13 Кб (Скачать файл)

</FORM>

В рассмотренном примере  атрибут size как раз и устанавливает  форму элемента, как выпадающего  списка (значение этого атрибута равно 1). Внутри тегов <OPTION> задаются возможные  значения для выбора. Если тег <OPTION> содержит атрибут selected, то это значение будет установлено по умолчанию. При отсутствии атрибута name, в качестве выбранного значения, на сервер отправляется текст между открывающим и  закрывающим тегами <OPTION>. 

    1. Выбор файлов для отправки на сервер

PHP позволяет передавать  на сервер файлы. HTML-форма, предназначенная  для передачи файла, должна  содержать аргумент enctype="multipart/form-data".

Кроме того в форме перед  полем для копирования файла  должно находиться скрытое поле с  именем max_file_size. В это скрытое  поле должен быть записан максимальный размер передаваемого файла (обычно не больше 2 Мбайт).

Само поле для передачи файла - обычный элемент INPUT с аргументом type="file".

Например 10.1:

<form enctype="multipart/form-data"

action="<?echo $PHP_SELF?>" method="post">

<input type="hidden" name="max_file_size" value="51200">

<input type="file" name="myfile"><br>

<input type="submit" value="ВВОД">

</form>

После того, как файл передан  на сервер, он получает уникальное имя  и сохраняется в каталоге для  временных файлов. Полный путь к  файлу записывается в глобальную переменную, имя которой совпадает  с именем поля для передачи этого  файла. Кроме этого PHP сохраняет еще  некоторую дополнительную информацию о переданном файле в других глобальных переменных:

 

 

Переменная

Описание

$myfile

Путь к временному файлу

$myfile_name

Имя переданного файла

$myfile_size

Размер переданного файла

$myfile_type

Тип переданного файла в системе MIME


 

 Пример 10.2:

<html>

<head>

<title>Обработка переданного  файла</title>

</head>

<?php

if ( ! isset( $myfile ) )

  {

   echo "путь: $myfile<br>";

   echo "имя: $myfile_name<br>";

   echo "размер: $myfile_size<br>";

   echo "тип: $myfile_type<br>";

  }

?>

<body>

<form enctype="multipart/form-data"

action="<?echo $PHP_SELF?>" method="post">

<input type="hidden" name="max_file_size" value="51200">

<input type="file" name="myfile"><br>

<input type="submit" value="ВВОД">

</form>

</body>

</html>

    1. Кнопки

Кроме уже отмеченных стандартных  кнопок Submit и Reset, существует возможность  использовать на Web-странице и другие кнопки. Однако, для того чтобы при  нажатии на кнопку совершалось определенное действие, необходимо использовать скрипты.

В качестве управляющих кнопок формы, можно использовать графические  картинки, загружаемые из определенных файлов.

Заменим стандартную кнопку submit на изображение из файла (листинг 11.1).

Листинг 11.1 Использование картинок вместо стандартных кнопок 

<BUTTON name="submit" value="Submit" type="submit">

Отправить<IMG src="filename.gif" value="Отправить"></ВUТТON>

Как видим, в приведенном  примере вместо тега <INPUT> использовался  тег <BUTTON>. Это более общее описание кнопок и при указании значения атрибута type равным submit или reset описанные кнопки могут использоваться вместо стандартных  для отправки и/или сброса содержимого  формы.

    1. Методы работы с формами

Задумаемся на минуту, что  же происходит, когда мы набираем в  браузере строку somestring и нажимаем <Enter>. Браузер посылает серверу запрос somestring? Нет, конечно. Все немного сложнее. Он анализирует строку, выделяет из нее имя сервера и порт (а также имя протокола, но нам это сейчас не интересно), устанавливает соединение с Web-сервером по адресу сервер:порт и посылает ему что-то вроде следующего:

GET somestring HTTP/1.0\n
...другая информация...
\n\n

Здесь \n означает символ перевода строки, а \n\n — два обязательных символа новой строки, которые  являются маркером окончания запроса (точнее, окончания заголовков запроса). Пока мы не пошлем этот маркер, сервер не будет обрабатывать наш запрос.

Как видим, после GET-строки могут следовать и другие строки с информацией, разделенные символом перевода строки. Их обычно формирует браузер. Такие строки называются заголовками (headers), и их может быть сколько угодно. Протокол HTTP как раз и задает правила формирования и интерпретации этих заголовков. Вот мы и начинаем знакомство с протоколом HTTP. Как видите, он представляет собой ни что иное, как просто набор заголовков, которыми обмениваются сервер и браузер, и еще пару соглашений насчет метода POST, которые мы вскоре рассмотрим.
Не все заголовки обрабатываются сервером — некоторые просто пересылаются запускаемому сценарию с помощью переменных окружения.

Переменные окружения  представляют собой именованные  значения параметров, которые операционная система (точнее, процесс-родитель) передает запущенной программе. Программа может  с помощью специальных функций  получить значение любой установленной  переменной окружения, указав ее имя. Именно так и должен поступать  CGI-сценарий, когда захочет узнать значение того или иного заголовка запроса. К сожалению, набор передаваемых сценарию заголовков ограничен стандартами, и некоторые заголовки нельзя получить из сценария никаким способом (ему просто недоступна соответствующая переменная окружения).

Ниже приводятся некоторые  заголовки запросов с их описаниями, а также имена переменных окружения, которые использует сервер для передачи их CGI-сценарию.

Метод запроса GET

Формат запроса: GET сценарий?параметры HTTP/1.0

Переменные окружения: REQUEST_URI; в переменной QUERY_STRING сохраняется значение и параметры, в переменной REQUEST_METHOD — ключевое слово GET.

Этот заголовок является обязательным (если только не применяется  метод POST) и определяет адрес запрашиваемого документа на сервере. Также задаются параметры, которые пересылаются сценарию (если сценарию ничего не передается, или  же это обычная статическая страница, то все символы после знака  вопроса и сам знак опускаются). Вместо строки HTTP/1.0 может быть указан и другой протокол - например, HTTP/1.1. Именно его соглашения и будут  учитываться сервером при обработке  данных, поступивших от пользователя, и других заголовков.

Строка сценарий?параметры задается в том же самом формате, в котором она входит в URL. Неплохо было бы назвать эту строку как-нибудь более реалистично, чтобы учесть возможность присутствия в ней командных параметров. Такое название действительно существует и звучит как URI (Universal Resource Identifier - Универсальный идентификатор ресурса). Очень часто его смешивают с понятием URL (вплоть до того, что это происходит даже в официальной документации по стандартам HTTP). Под словом URL мы понимаем полный путь к некоторой Web-странице вместе с параметрами, а URI - это его часть, расположенная после имени (или IP-адреса) хоста и номера порта.

Метод запроса POST

Формат запроса: POST сценарий?параметры HTTP/1.0

Переменная окружения: REQUEST_URI; в переменной QUERY_STRING сохраняется  значение и параметры, в переменной REQUEST_METHOD — слово POST.

Настал момент рассмотреть  метод POST. Приведем сразу практический пример метода запроса POST:


POST /script.cgi HTTP/1.0\n
Content-length: 6\n
\n
Hello!

Сервер начнет обработку  запроса, не дожидаясь передачи данных после маркера конца заголовков. Иными словами, сценарий запустится сразу же после отправки \n\n, а  уж ждать или не ждать, пока придет строка Hello! длиной 6 байт - его дело. Последнее означает, что сервер никак  не интерпретирует POST-данные (точно  так же, как он не интерпретирует некоторые заголовки), а пересылает их непосредственно сценарию. Но как  же сценарий узнает, когда данные кончаются, т. е. когда ему прекращать чтение информации, поступившей от браузера? В этом ему поможет переменная окружения Content-Length, и именно на нее  следует ориентироваться.

Зачем нужен метод POST? В  основном для того, чтобы передавать большие объемы данных. Например, при  загрузке файлов через Web или при обработке больших форм, об этом мы поговорим далее. Кроме того, метод POST часто используют для эстетических целей: дело в том, что при применении GET, как вы, наверное, уже заметили, URL сценария становится довольно длинным и неизящным. Переданные сценарию параметры не отображаются в окне браузера, POST-запрос оставляет URL без изменения.




Информация о работе Формы и сенсорные изображения в HTML