Веб-термины

Тема

Технологии веб-дизайна. Компоненты форм

В технологиях веб-дизайна используется много различных типов форм (в том числе и скрытых). Здесь мы рассмотрим варианты создания нескольких типов, наиболее широко распространённых. В принципе, мнемоника (синтаксис записи) любой из них весьма похожи на другие — в чём вы сейчас наглядно убедитесь.
 

TYPE="TEXT"

Текстовое поле в одну строку (см. ниже), длину которого можно определить использованием атрибута SIZE, а введённую по умолчанию строку — с помощью атрибута VALUE. Может использоваться в двух вариантах: с аргументом "TEXT" (обычные условия ввода данных) или с аргументом "PASSWORD" (вместо символов ввода в поле высвечиваются скрытые символы):

Синтаксис:

<INPUT TYPE="TEXT" SIZE="30" NAME="user_name" VALUE="Ваше имя">


Компонент формы TEXT

<INPUT TYPE="PASSWORD" SIZE="30" NAME="user_name" VALUE="Ваше имя">


Компонент формы PASSWORD


TYPE="CHECKBOX"

Компонент — один из вариантов форм выбора, принимающий одно из двух устойчивых положений: «выбрано» или «не выбрано». Каждый из компонентов формы типа CHECKBOX создаёт логическую пару: «имя элемента / его состояние». Для установки значения по умолчанию (отмечен либо нет) используют атрибуты так, как указано ниже.

Синтаксис:

<INPUT TYPE="CHECKBOX" CHECKED NAME="C01" VALUE="yes"> Вы любите театр?

Вы любите театр?

Компонент формы CHECKBOX

TYPE="RADIO"

Компонент RADIO (или так называемая «радиокнопка») очень похож на предыдущий, но переменная может принимать лишь одно значение из представленного множества.

Веб-дизайн | Технологии

Все элементы компонента RADIO одной формы, обозначаются единым атрибутом NAME (см. пример использования). кроме того, технология требует явного указания значений атрибута VALUE, одна из кнопок должна быть обязательно выделена атрибутом CHECKED.

Синтаксис (пример использования):

<Р>Ваша профессия?

<Р><INPUT TYPE="RADIO" NAME= "user-proof" VALUE="Студент">

<Р><INPUT TYPE="RADIO" NAME= "user-proof" VALUE="Водолаз">

<Р><INPUT TYPE="RADIO" NAME= "user-proof" VALUE="Космонавт">

<Р><INPUT TYPE="RADIO" NAME= "user-proof" VALUE="Ассенизатор">

<Р><INPUT TYPE="RADIO" NAME= "user-proof" VALUE="Президент" CHECKED>

Вид в браузере:

Ваша профессия?

Студент

Водолаз

Космонавт

Ассенизатор

Президент


TYPE="BUTTON"

Компонент — кнопка, клик на которой приводит к запрограммированному в обработчике (скрипт на сервере) действию. С помощью атрибута NAME компоненту присваивается уникальное имя, атрибут VALUE определяет надпись на кнопке:

Синтаксис:

<INPUT TYPE="BUTTON" VALUE="Button" NAME="B1">

Вид в браузере:


TYPE="SUBMIT"

Компонент — кнопка, клик на которой приводит к передаче данных формы обработчику. Надпись на кнопке задаётся атрибутом VALUE.

Синтаксис:

<INPUT TYPE="SUBMIT" VALUE="Отправить!">

Вид в браузере:
 

очистить форму

TYPE="RESET"

Компонент — кнопка, клик на которой приводит к очистке заполненных полей. Синтаксис исключительно прост, а действие имеет локальный характер (то есть просто очищаются все поля формы, а на сервер не передаётся никакой информации).

Синтаксис:

<INPUT TYPE="RESET" VALUE="Очистить форму">

Вид в браузере:

Очистить форму

Разумеется, приведённая выше строка кода является полной «пустышкой» — точно так же, как и все вышеприведённые примеры. Для того, чтобы компоненты форм любого из типов стали бы работоспособны, необходимо начать с тега <FORM> (см. предыдущий материал) и определить значения атрибутов ACTION и МЕТНОD и так далее. Поскольку сейчас мы уже располагаем определёнными знаниями о технологии веб-дизайна по созданию форм, давайте попробуем соорудить нечто, потенциально готовое к работе.

Пишем HTML-код формы, со всеми необходимыми тегами разметки и т.д.:

<FORM ACTION="/post/forma.php?id=4" ENCTYPE="multipart/form-data" METHOD=POST>

<P>Ваше имя:

<P><INPUT TYPE="text" MAXLENGTH="30" NAME="12">

<P>Ваш e-mail адрес:

<P><INPUT TYPE="text" MAXLENGTH="50" NAME="13">

<P><INPUT TYPE="SUBMIT" NAME="sub" VALUE="Отправить">

<INPUT TYPE="RESET" VALUE="Сброс" NAME="B1">

</FORM>

  На главную