Работа с формами











Чтобы предать Вашему сайту элементы интерактивности надо применять формы. Обратная связь с посетителями - это важнейшая область в развитии и эффективности вашего сайта. Формы можно условно разделить на четыре категории:

  1. Для опроса посетителей . Дает возможность отвечать на заранее подготовленные вопросы с вариантами ответов на них или свободными текстовыми полями, которые заполняются ими самостоятельно. С их помощью Вы в реальном времени получите нужную Вам информацию.
  2. Форма для отзывов . Сюда можно отнести например популярную "гостевую книгу". Она даёт возможность посетителям высказывать своё мнение, писать о своих проблемах и вопросах, вносить предложения и замечания или приносить благодарности.
  3. Для сбора данных . Служат в основном элементом при регистрации посетителя сайта. Имеет вид обычной анкеты.
  4. Различные поля ввода (поиск, ввод пароля и т. д).

Все данные указанные в форме обрабатываются и передаются посредством сценариев, написанный на языках программировании Perl (расширение файла .cgi) и PHP (с расширением .php).

Для размещения формы на веб-странице применяется тег <FORM> с атрибутами:

  • ACTION - активирует применяемый к форме файл сценария.
  • NAME - идентифицирует форму.
  • METHOD - метод передачи данных формы. Значения: "post" (отправка на e-mail) и get (на домен).

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

Поля ввода

Предназначены для ввода небольшого текста или символов (ввод пароля). Они представляют собой выделенные рамкой участки страницы, по высоте ограниченные размером шрифта и рядом написанным информационным приложением. В техническом плане это осуществляется следующем образом. Берётся универсальный при составлении форм тег <INPUT> ,к которому затем присваиваются атрибуты:

  • TYPE - указывает на тип вводимой информации. Значения: text (текст), password (звездочки) и hidder (информация не будет показана).
  • NAME - присваивает имя полю.
  • SIZE - длина поля. (значение указывается в количестве символов)
  • MAXLENGHT - ограничение на количество вводимых символов.
  • VALUE - используется в тех случаях, когда нужно заполнить поля для ввода какой-либо информацией на момент загрузки страницы.

Примечание: Информационное приложение к полю можно записывать в коде, как до, так и после тэга <INPUT>. Пример создания поля для ввода пароля:

<INPUT TYPE="text" NAME="login" SIZE="12" VALUE="ваш логин">Логин

Пароль <INPUT TYPE= "password" NAME="pass" SIZE="25" MAXLENGHT="24" VALUE"Максимум 24 символа">

После составления данного кода Вы увидите в браузере форму, но не найдёте в ней привычных кнопок. Речь об них пойдёт далее.

Текстовые поля

Такие поля отличаются от полей ввода тем, что вних можно вводить неограниченно текст. Поэтому они снабжены полосой прокрутки. Для размещения текстовых полей на странице в языке HTML предназначен тег <TEXTAREA>, которому могут быть присвоены следующие атрибуты:

  • COLS - ширина окна (в количестве символов).
  • ROWS - высота окна (в количестве символов).
  • NAME - информация для идентификации.
  • VALUE - информация в окне на момент загрузки.

Поля для передачи файлов

Служат для отправки какого-либо файла вместе с данными введенных в форму. Для того, чтобы это осуществить нужно создать саму форму с помощью тэга <INPUT> и атрибута TYPE со значением "file". Затем производим активацию файла сценария посредством атрибута ACTION и всё готово.

Кнопки

Кнопки в основном предназначены для отправки данных, записанных в форму, либо для сброса информации в форме. В первом случае в атрибуте TYPE тэга <INPUT> указывается значение submit , во втором - reset. Для отображения кнопок на странице нужно к тэгу <INPUT> еще добавить уже Вам хорошо знакомые атрибуты VALUE И NAME . В формах также применяются и другие более сложные и "навороченные" кнопки, которые работают уже непосредственно со сценариями JavaScript.

Переключатели и флажки

В этой области они находят применение для опроса посетителей сайта, посредством выбора заранее подготовленных вариантов. При помещении переключателей на страницу, применяется все те же тег <INPUT> и атррибут TYPE, значение у которого будут:

  • radio - обозначение переключателя в языке HTML.
  • name - идентификатор переключателя. (для всех переключателей одной группы должны быть обязательно присвоены одинаковые значения).
  • value - идентификатор переключателя, который был выбран посетителем. (значения для каждого переключателя в одной группе должны быть указаны разные значения.
  • selected cheked - показывает, какой переключатель будет включен в момент загрузки.

Флажки, по принципу действия отличаются от переключателей тем, что при помощи них можно выделить как один элемент из списка, так и все или не одного. В атрибуте TYPE они обозначаются значением checkbox. Кроме вышеуказанного атрибута в тэге <INPUT> атрибуты NAME и CHECKED . В первом назначают имя элемента. Второй ставится по желанию, он будет определять, какой из элементов будет отмечен флажком по умолчанию.

Раскрывающиеся списки

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

Составляются раскрывающиеся списки в HTML-коде следующем образом. В контейнер <SELECT> вставляются контейнеры <OPTION>, где каждый контейнер <OPTION> будет являться одним элементом из списка. При этом к тэгу <SELECT> присваиваются знакомые Вам атрибуты NAM E и SIZE, а к тэгу <OPTION> - VALUE и SELECTED (выбор элемента списка по умолчанию).

Все вышеперечисленные формы на практике находят применения в основном совместно со сценариями JavaScript, о котором браузеру нужно сообщить в контейнере <HEAD>.

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

Наш опрос
Оцените мой сайт
Всего ответов: 274
Поиск
Календарь
«  Июнь 2018  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Друзья сайта
  • Создать сайт
  • Все для веб-мастера
  • Программы для всех
  • Гороскоп
  • Всё для родителей!
  • Кулинарные рецепты