16. Формы.

Форма — это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира. Формы применяются для опроса посетителей, покупки чего-либо, отправки электронной почты.

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

Формы размещаются между тегами <FORM></FORM>. HTML-документ может содержать в себе несколько форм, но они не должны находиться одна внутри другой. Тег <FORM> может содержать следующие атрибуты:

ACTION	Обязательный атрибут. Определяет, где находится обработчик формы.
METHOD	Определяет, каким образом данные из формы будут переданы обработчику. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET.
ENCTYPE	Определяет, каким образом данные из формы будут закодированы для передачи обработчику.

Для внесения информации пользователем в форму используется элемент <INPUT> Это и есть поля, в которые пользователь вводит информацию. Каждый элемент <INPUT> включает атрибут NAME=имя, определяющий имя данного поля (идентификатор поля). В таблице представлены основные типы, применяемых элементов <INPUT>:

TYPE=text	Определяет окно для ввода строки текста. Может содержать дополнительные атрибуты SIZE=число (ширина окна ввода в символах) и MAXLENGTH=число (максимально допустимая длина вводимой строки в символах): <INPUT TYPE=text SIZE=20 NAME=User VALUE="LENIN INC"> Определяет окно шириной 20 символов для ввода текста. По умолчанию в окне находится текст LENIN INC, который пользователь может изменить.
TYPE=password	Определяет окно для ввода пароля. Абсолютно аналогичен типу text, только вместо символов вводимого текста показывает на экране звездочки (*): <INPUT TYPE=password NAME=PW SIZE=20 MAXLENGTH=10> Определяет окно шириной 20 символов для ввода пароля. Максимально допустимая длина пароля – 10 символов.
TYPE=radio	Определяет радиокнопку. Может содержать дополнительный атрибут CHECKED (показывает, что кнопка отмечена). В группе радиокнопок с одинаковыми именами может быть только одна помеченная радиокнопка: <INPUT TYPE=radio NAME=Question VALUE="Yes" CHECKED> Да <INPUT TYPE=radio NAME=Question VALUE="No"> Нет <INPUT TYPE=radio NAME=Question VALUE="Possible"> Возможно Да Нет Возможно Определяет группу из трех радиокнопок, подписанных Yes, No и Possible. Первоначально помечена первая из кнопок. Если пользователь не отметит другую кнопку, обработчику будет передана переменная Question со значением Yes. Если пользователь отметит другую кнопку, обработчику будет передана переменная Question со значением No или Possible.
TYPE=checkbox	Определяет квадрат, в котором можно сделать пометку. Может содержать дополнительный атрибут CHECKED (показывает, что квадрат помечен). В отличие от радиокнопок, в группе квадратов с одинаковыми именами может быть несколько помеченных квадратов: <INPUT TYPE=checkbox NAME=Comp VALUE="CPU"> Процессоры <INPUT TYPE=checkbox NAME=Comp VALUE="Video" CHECKED> Видеоадаптеры <INPUT TYPE=checkbox NAME=Comp VALUE="Scan"> Сканеры <INPUT TYPE=checkbox NAME=Comp VALUE="Modem" CHECKED> Модемы Процессоры Видеоадаптеры Сканеры Модемы Определяет группу из четырех квадратов. Первоначально помечены второй и четвертый квадраты. Если пользователь не произведет изменений, обработчику будут переданы две переменные: Comp=Video и Comp=Modem.
TYPE=hidden	Определяет скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений. Такой элемент иногда полезно иметь в форме, которая время от времени подвергается переработке, чтобы обработчик мог знать, с какой версией формы он имеет дело. <INPUT TYPE=hidden NAME=version VALUE="1.1"> Определяет скрытую переменную version, которая передается обработчику со значением 1.1.
TYPE=submit	Определяет кнопку, при нажатии на которую запускается процесс передачи данных из формы обработчику: <INPUT TYPE=submit VALUE="Отправить">
TYPE=reset	Определяет кнопку, при нажатии на которую очищаются поля формы. Поскольку при использовании этой кнопки данные обработчику не передаются, кнопка типа reset может и не иметь атрибута name: <INPUT TYPE=reset VALUE=" Сброс ">

Формы могут содержать поля для ввода большого текста <TEXTAREA>:

<TEXTAREA NAME=address ROWS=5 COLS=50> Наберите здесь сообщение</TEXTAREA>

Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику. Атрибут ROWS устанавливает высоту окна в строках. Атрибут COLS устанавливает ширину окна в символах. Текст, размещенный между тегами <TEXTAREA></TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.

Кроме всего этого формы могут содержать меню выбора, которое начинается открывающимся тегом <SELECT> (содержит обязательный атрибут NAME, определяющий имя меню) и завершается закрывающимся </SELECT>. Между ними находятся теги <OPTION>, определяющие элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Тег <OPTION> может включать атрибут selected, показывающий, что данный элемент выбран/отмечен по умолчанию.

<SELECT NAME="имя">  <OPTION VALUE="option_1" selected>текст 1  <OPTION VALUE="option_2">текст 2  <OPTION VALUE="option_n">текст n  </SELECT>

Тег <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство Обозревателей показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню. Высоту окна в строках можно задать атрибутом SIZE=число.

<SELECT MULTIPLE SIZE=3 NAME="имя">  <OPTION VALUE="option_1" selected>текст 1  <OPTION VALUE="option_2">текст 2  <OPTION VALUE="option_n">текст n  </SELECT>

HTML язык – это просто язык разметки гипертекста, который не предоставляет посетителю сайта возможности управлять внешним видом документа и взаимодействовать с разработчиком тем или иным способом. Для решения задач интерактивности требуется применение более сложных языков программирования. Наиболее распространёнными языками программирования для web являются PHP, Perl и Java Script.

Скрипты PHP и Perl выполняются на стороне сервера, то есть для своей работы требуют соответствующей конфигурации сервера и наличие интерпретаторов скриптов. Скрипты PHP и Perl выполняются на сервере, а браузер клиента получает в этом случае готовый результат обработки скрипта интерпретатором. Сценарии Java Script выполняются на стороне клиента встроенным в браузер интерпретатором языка Java Script. Это не требует совершенно никакого участия сервера.

Возможности скриптов PHP, Perl и сценариев Java Script

Скрипты PHP

PHP имеет грамматику схожую с грамматикой языка C, однако он включает так же возможности других языков программирования (Perl, Java и C++). Скрипты PHP могут работать с базами данных, управлять динамическим содержанием HTML документов, обрабатывать результаты отправки форм с вашего сайта, обеспечивать функционирование форумов (большинство форумов в сети выполнены средствами PHP). Широкие возможности языка позволяют создавать скрипты PHP для решения практически любых задач в области программирования для web. При создании скриптов PHP вы ограничены только вашей фантазией.

Скрипты Perl

Мощные возможности языка Perl по обработке текстов делают его хорошо приспособленным для разработки CGI-скриптов. Другие причины и пользования разработчиками языка Perl для написания CGI-скриптов заключаются в том, что Perl обеспечивает широкую поддержку взаимодействия с базами данных, обладает переносимостью и обеспечивает безопасность при работе в сетях. Используя регулярные выражения в скриптах Perl можно легко проверить целостность входных данных.

Java Script

Как уже говорилось, Java Script работает на стороне клиента, поэтому сценарии Java Script выполняются даже при открытии страницы с жёсткого диска. Это делает отладку сценариев гораздо проще, поскольку нет необходимости в дополнительной установке интерпретатора. Интерпретатор Java Script интегрирован практически во все браузеры. С помощью Java Script вы можете улучшить пользовательский интерфейс сайта, создавать бегущие строки, добавлять в html документ рисунки и анимацию, определить тип браузера посетителя вашего сайта, изменять формы и организовать их автоматическое заполнение, управлять строкой состояния и ещё многое другое. Один минус – многие браузеры позволяют пользователям отключить выполнение скриптов Java Script, что сделает вашу программу бесполезной в этом случае. Однако по статистике порядка 98% браузеров исполняют скрипты Java Script.

Советы по оформлению сайта

Содержание вашего сайта это самый важный фактор определяющий его популярность. Уж если вы решили создать сайт, то постарайтесь, чтобы информация размещённая на нём была полезна и интересна. Если при создании сайта вы используете информацию, полученную с других сайтов, то обязательно переработайте её, постарайтесь изложить более ясно, красиво и доходчиво. Используйте свой стиль изложения. Создание сайта - это творческий процесс. Простое копирование информации с других web ресурсов может привести к тому, что ваш сайт просто никто не нейдёт, по крайней мере через поисковые машины. Чаще обновляйте содержание вашего сайта, следите за тем, чтобы оно было актуальным.

Оформление сайта – очень важный аспект web дизайна. Постарайтесь сделать сайт оригинальным, узнаваемым из сотни других сайтов. Только не перестарайтесь, не злоупотребляйте графикой. Во-первых, многие пользователи в целях экономии времени и трафика отключают загрузку графики. Лучше ещё на стадии создания сайта подумать о том, как будут выглядеть ваши документы в случае если графика в них не загружается. Во-вторых, наличие на ваших страницах вашего сайта рисунками огромного размера значительно увеличивает их объём и заставляет посетителя долго ожидать окончания загрузки. Поверьте, не все дождутся.

Применяйте в изображениях теги height, width и alt. И помните о том, что одно большое изображение грузится дольше чем несколько небольших такого же суммарного объёма. При создании сайта для изображений фотографического характера со множеством цветов рекомендуется использовать формат JPEG, который обеспечивает меньший размер подобных изображений. В случае применения монотонных рисунков и рисунков содержащих текст используйте формат GIF, поскольку JPEG в этом случае смазывает текст и пачкает цвета.

Ответственно отнеситесь к выбору цветовой схемы и шрифтов при создании сайта. Все страницы сайта должны быть выполнены в одной цветовой схеме, в противном случае сайт будет смотреться несвязно. При выборе цветовой схемы необходимо обеспечить хорошую читаемость текста. Если ссылки будут слишком контрастными, они будут отвлекать посетителя от основного текста, но в то же время пользователь должен видеть, что это ссылка. При создании сайта старайтесь использовать стандартные шрифты (Arial, Times New Roman, Verdana, Gevena, Courier New и др.). Некоторые браузеры не загружают сторонних шрифтов и отображают документ только с помощью шрифтов, установленных в системе.

Хорошенько продумайте какие методы реализации задуманного дизайна вы будете использовать при создании сайта, обязательно проверьте как будут выглядеть страницы сайта в различных браузерах при различных значениях разрешения экрана. Некоторые браузеры, к примеру, некорректно отображают слои, или не отображают их вовсе. Хотя слои и дают больше возможностей, предпочтительнее использовать при создании сайта таблицы с невидимыми границами. Это поможет избежать проблем и позиционированием элементов на страницах сайта относительно друг друга.

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