Форма. Использование объекта form. Свойства объекта form.

18.11.2022 18:50

Создание форм в документах HTML

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

    В наиболее общем виде оператор <FORM> выглядит следующим образом:

<FORM

 NAME="Имя_формы"

 TARGET="Имя_окна"

 ACTION="Адрес_URL_CGI-приложения"

 METHOD="GET" или "POST"

 ENCTYPE="Кодировка_данных"

 onSubmit="Обработчик_события_Submit">

 . . .

 определение полей и органов управления

 . . .

</FORM>

    Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта document, которое удобно использовать для обращения к данным форм из сценариев JavaScript.

    Назначение параметра TARGET аналогично назначению этого же параметра в операторе <A>. Когда форма используется для передачи запроса CGI-приложению, ответ, полученный от сервера, отображается в окне. Имя  этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.

    С помощью параметра ACTION указывается адрес URL загрузочного файла CGI-приложения, а также передаваемые ему параметры. В том случае, когда форма предназначена для передачи данных приложению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр значения не имеет.

    Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием  JavaScript локально, параметр METHOD задавать не нужно.

    Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается.

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

 

Доступ к формам из сценариев JavaScript

    Сценарии JavaScript могут получить доступ к формам как к свойствам объекта document. Как указано выше, к этим свойствам удобно обращаться по их названиям, которые определяются параметром NAME включенной в документ формы. Каждое такое свойство, в свою очередь, также является объектом класса form и содержит свои свойства – вложенные объекты.

    Объект класса form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств практически полностью определяется параметрами тега <FORM> и приведен ниже.

    Свойство и его описание:

  • action - Содержит значение параметра ACTION
  • elements  - Массив всех элементов (полей и органов управления), определенных в форме
  • encoding  - Содержит значение параметра ENCTYPE
  • length - Размер массива elements
  • method  - Содержит значение параметра METHOD
  • target - Содержит значение параметра TARGET

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

 

Основные поля и органы управления форм

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

Кнопки:

  • Button -  «Обычная» кнопка с надписью
  • Submit - Кнопка для посылки данных из заполненной формы расширению сервера Web. Внешним видом не отличается от кнопки button
  • reset  - Кнопка, с помощью которой пользователь может сбросить содержимое полей ввода и состояние переключателей в их исходное состояние. Внешним видом не отличается от кнопки button

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

  • Text - Однострочное текстовое поле
  • password - Текстовое поле для ввода паролей. Набранный в этом полетекст не отображается на экране
  • textarea  - Многострочное текстовое поле

Переключатели и списки выбора

  • Checkbox -  Переключатель типа «флажок». Может использоваться в составе набора независимых друг от друга переключателей или отдельно
  • radio - Переключатель для группы зависимых друг от друга переключателей. Используется для выбора одного значения из нескольких возможных
  • select - Список выбора произвольных текстовых строк. Обычно используется как выпадающий список

Например, рассмотрим использование кнопки button. 

    Кнопки submit и reset предназначены в основном для создания форм, работающих «в паре» с серверными приложениями и нами использоваться не будут. Кроме того, существует возможность использования графических кнопок и кнопок с изображениями. 

    В общем виде кнопка класса button определяется в форме с помощью оператора <INPUT> следующим образом:

<INPUT TYPE="button"

 NAME="Имя_кнопки"

 VALUE="Надпись_на_кнопке"

 onClick="Обработчик_события">

    Параметр TYPE оператора <INPUT> должен иметь значение button, как это показано выше (для кнопок submit и reset – соответственно submit и reset). С помощью параметра NAME задается имя объекта, соответствующего кнопке (а не надпись на кнопке). Это имя используется как имя свойства-объекта в составе формы. Надпись на кнопке указывается с помощью параметра VALUE. От длины надписи зависит и размер кнопки. Определив обработчик события onClick, можно задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.

Свойства объекта button

Объект button имеет два свойства, отражающие значения соответствующих параметров оператора <INPUT>:

Свойство  и описание:

  • name - Значение параметра NAME
  • value - Значение параметра VALUE

Методы объекта button

    Для объекта button определен всего один метод, не имеющий параметров – метод click(). Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке.

    В качестве примера приведен сценарий, выполняющий обработку щелчка по кнопке с надписью «Нажми меня». Если нажать на эту кнопку, сценарий отображает в окне браузера сообщение с благодарностью.

<HTML>

 <HEAD>

 <TITLE>Пример использования кнопки button</TITLE>

 <SCRIPT LANGUAGE="JavaScript">

 <!--

 function btnClick()

 {

 var szTxt="";

 szTxt=document.frm.btn.value;

 document.write("<b>Спасибо!</b><br>");

 document.write("Вы нажали кнопку: <b>&quot;" +

 szTxt + "&quot;</b>");

 }

</SCRIPT>

 </HEAD>

 <BODY>

 <b>Страница с кнопкой</b>

 <FORM NAME="frm">

 <P><INPUT TYPE="button" NAME="btn"

 VALUE="Нажми меня!" onClick="btnClick();">

 </FORM>

 </BODY>

</HTML>

    Для создания кнопки, в теле документа HTML определена форма с именем frm. Эта форма содержит всего один элемент – кнопку button с именем btn и надписью «Нажми меня!»:

 <FORM NAME="frm">

 <P><INPUT TYPE="button" NAME="btn"

 VALUE="Нажми меня!" onClick="btnClick();">

 </FORM>

    Для кнопки назначен обработчик события onClick. Обработчик – это функция btnClick(). Функция написана на языке JavaScript и определена в заголовке документа в соответствии с правилами включения кода JavaScript в страницы HTML:

 <SCRIPT LANGUAGE="JavaScript">

 <!--

 function btnClick()

 {

 var szTxt="";

 szTxt=document.frm.btn.value;

 document.write("<b>Спасибо!</b><br>");

 document.write("Вы нажали кнопку: <b>&quot;" + szTxt + "&quot;</b>");

 }

</SCRIPT>

    Функция btnClick() выводит в окно документа две строки, содержащие текст и теги HTML:

 document.write("<b>Спасибо!</b><br>");

 document.write("Вы нажали кнопку: <b>&quot;" + szTxt + "&quot;</b>");

    

    Результатом работы функции btnClick() будет сообщение на экране:  

«Спасибо! Вы нажали кнопку «Нажми меня!»».

Назад