Использование JavaScript и форм

У Javascript много шляп. Вы можете использовать JavaScript для создания специальных эффектов. Вы можете использовать JavaScript, чтобы сделать свои HTML-страницы «умнее», используя его возможности принятия решений. И вы можете использовать JavaScript для улучшения HTML-форм. Последнее приложение имеет особое значение. Из всего, что может носить JavaScript, его функции обработки форм являются одними из самых востребованных и используемых.

Ничто не вызывает большего страха в сердце веб-издателя, чем эти три буквы: CGI. CGI (что означает общий интерфейс шлюза) - это механизм для безопасной передачи данных от клиента (браузера) на сервер. Обычно он используется для передачи данных из HTML-формы на сервер.

Используя JavaScript на вашей стороне, вы можете обрабатывать простые формы без вызова сервера. А когда отправка формы в программу CGI необходима, вы можете настроить JavaScript для выполнения всех предварительных требований, таких как проверка ввода, чтобы убедиться, что пользователь расставил точки над каждым i. В этом столбце мы внимательно рассмотрим соединение JavaScript-формы, в том числе как использовать объект формы JavaScript, как читать и устанавливать содержимое формы и как запускать события JavaScript, манипулируя элементами управления формы. Мы также рассмотрим, как использовать JavaScript для проверки ввода формы и передачи формы программе CGI.

Изучение JavaScript

Эта статья является частью архива технического контента JavaWorld. Вы можете много узнать о программировании на JavaScript, прочитав статьи из серии JavaScript , но имейте в виду, что некоторая информация, вероятно, устарела. См. Разделы «Использование встроенных объектов JavaScript» и «Отладка программ JavaScript» для получения дополнительной информации о программировании с помощью JavaScript.

Создание формы

Есть несколько различий между простой формой HTML и формой с расширенным JavaScript. Основной из них заключается в том, что форма JavaScript полагается на один или несколько обработчиков событий, таких как onClick или onSubmit. Они вызывают действие JavaScript, когда пользователь что-то делает в форме, например, нажимает кнопку. Обработчики событий, которые размещаются вместе с остальными атрибутами в тегах HTML-форм, невидимы для браузера, не поддерживающего JavaScript. Из-за этой особенности вы часто можете использовать одну форму как для JavaScript, так и для браузеров без JavaScript.

Типичные объекты управления формой, также называемые «виджетами», включают следующее:

  • Текстовое поле для ввода строки текста
  • Кнопка выбора действия
  • Радиокнопки для выбора одной из группы опций
  • Флажки для выбора или отмены выбора одного независимого параметра

Я не буду утруждать себя перечислением всех атрибутов этих элементов управления (виджетов) и способов их использования в HTML. Практически любая ссылка на HTML предоставит вам подробную информацию. При использовании с JavaScript вы всегда должны не забывать указывать имя для самой формы и каждого используемого элемента управления. Имена позволяют ссылаться на объект на вашей странице с расширенным JavaScript.

Типичная форма выглядит так. Обратите внимание, что я предоставил атрибуты NAME = для всех элементов управления формы, включая саму форму:

 Enter something in the box:

  • FORM NAME = "myform" определяет и дает имя форме. В другом месте JavaScript вы можете ссылаться на эту форму, используя имя myform . Имя, которое вы даете своей форме, зависит от вас, но оно должно соответствовать стандартным правилам именования переменных / функций JavaScript (без пробелов, никаких странных символов, кроме подчеркивания и т. Д.).
  • ACTION = "" определяет, как вы хотите, чтобы браузер обрабатывал форму, когда она отправляется программе CGI, запущенной на сервере. Поскольку этот пример не предназначен для отправки чего-либо, URL-адрес программы CGI опущен.
  • METHOD = "GET" определяет данные метода, передаваемые на сервер при отправке формы. В этом случае atttibute является пустым, поскольку форма примера ничего не отправляет.
  • INPUT TYPE = "text" определяет объект текстового поля. Это стандартная разметка HTML.
  • INPUT TYPE = "button" определяет объект кнопки. Это стандартная разметка HTML, за исключением обработчика onClick.
  • onClick = "testResults (this.form)" - это обработчик события - он обрабатывает событие, в данном случае нажав кнопку. При нажатии кнопки JavaScript выполняет выражение в кавычках. Выражение требует вызвать функцию testResults в другом месте страницы и передать ей текущий объект формы.

Получение значения из объекта формы

Поэкспериментируем с получением значений из объектов формы. Загрузите страницу, затем введите что-нибудь в текстовое поле. Нажмите кнопку, и то, что вы ввели, отображается в поле предупреждения.

Листинг 1. testform.html

  Test Input  function testResults (form) { var TestVar = form.inputbox.value; alert ("You typed: " + TestVar); }    Enter something in the box:

Вот как работает сценарий. JavaScript вызывает функцию testResults, когда вы нажимаете кнопку в форме. Функция testResults передается объекту формы с использованием синтаксиса this.form (ключевое слово this ссылается на элемент управления button; form является свойством элемента управления button и представляет объект формы). Я дал объекту формы имя form внутри функции testResult, но вы можете указать любое имя, какое захотите.

Функция testResults проста - она ​​просто копирует содержимое текстового поля в переменную с именем TestVar. Обратите внимание на ссылку на содержимое текстового поля. Я определил объект формы, который я хотел использовать (названный формой ), объект внутри формы, который я хотел (названный inputbox ), и свойство этого объекта, которое я хотел ( свойство value ).

Больше от JavaWorld

Хотите больше уроков по программированию и новостей? Получите информационный бюллетень JavaWorld Enterprise Java на свой почтовый ящик.

Установка значения в объекте формы

Свойство value поля ввода, показанное в приведенном выше примере, доступно для чтения и записи. То есть вы можете читать все, что введено в поле, и можете записывать данные обратно в него. Процесс установки значения в объекте формы прямо противоположен его чтению. Вот короткий пример, демонстрирующий установку значения в текстовом поле формы. Процесс аналогичен предыдущему примеру, за исключением того, что на этот раз есть две кнопки. Нажмите кнопку «Читать», и сценарий прочитает то, что вы ввели в текстовое поле. Нажмите кнопку «Написать», и сценарий запишет в текстовое поле особенно мрачную фразу.

Листинг 2. set_formval.html

Test Input function readText (form) { TestVar =form.inputbox.value; alert ("You typed: " + TestVar); }

function writeText (form) { form.inputbox.value = "Have a nice day!" } Enter something in the box:

  • Когда вы нажимаете кнопку «Читать», JavaScript вызывает функцию readText, которая считывает и отображает значение, введенное вами в текстовое поле.
  • Когда вы нажимаете кнопку «Написать», JavaScript вызывает функцию writeText, которая пишет: «Хорошего дня!» в текстовом поле.

Чтение других значений объекта формы

Текстовое поле - это, пожалуй, самый распространенный объект формы, который вы читаете (или пишете) с помощью JavaScript. Однако вы можете использовать JavaScript для чтения и записи значений из большинства других объектов (обратите внимание, что в настоящее время JavaScript не может использоваться для чтения или записи данных с использованием текстового поля пароля). В дополнение к текстовым полям JavaScript можно использовать с:

  • Скрытое текстовое поле (TYPE = "hidden").
  • Радиокнопка (TYPE = "радио")
  • Флажок (TYPE = "checkbox")
  • Текстовая область ()
  • Списки ()

Использование скрытых текстовых полей

From a JavaScript standpoint, hidden text boxes behave just like regular text boxes, sharing the same properties and methods. From a user standpoint, hidden text boxes "don't exist" because they do not appear in the form. Rather, hidden text boxes are the means by which special information can be passed between server and client. They can also be used to hold temporary data that you might want to use later. Because hidden text boxes are used like standard text boxes a separate example won't be provided here.

Using Radio Buttons

Radio buttons are used to allow the user to select one, and only one, item from a group of options. Radio buttons are always used in multiples; there is no logical sense in having just one radio button on a form, because once you click on it, you can't unclick it. If you want a simple click/unclick choice use a check box instead (see below).

To define radio buttons for JavaScript, provide each object with the same name. JavaScript will create an array using the name you've provided; you then reference the buttons using the array indexes. The first button in the series is numbered 0, the second is numbered 1, and so forth. Note that the VALUE attribute is optional for JavaScript-only forms. You'll want to provide a value if you submit the form to a CGI program running on the server, however.

Following is an example of testing which button is selected. The for loop in the testButton function cycles through all of the buttons in the "rad" group. When it finds the button that's selected, it breaks out of the loop and displays the button number (remember: starting from 0).

LIsting 3. form_radio.html

  Radio Button Test  function testButton (form){ for (Count = 0; Count < 3; Count++) { if (form.rad[Count].checked) break; } alert ("Button " + Count + " is selected"); }

Setting a radio button selection with HTML market is simple. If you want the form to initially appear with a given radio button selected, add the CHECKED attribute to the HTML markup for that button:

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the index of the radio button array you want to checked.

form.rad[0].checked = true; // sets to first button in the rad group

Using Check Boxes

Check boxes are stand-alone elements; that is, they don't interact with neighboring elements like radio buttons do. Therefore they are a bit easier to use. Using JavaScript you can test if a check box is checked using the checked property, as shown here. Likewise, you can set the checked property to add or remove the checkmark from a check box. In this example an alert message tells you if the first check box is checked. The value is true if the box is checked; false if it is not.

Listing 4. form_check.html

  Checkbox Test  function testButton (form){ alert (form.check1.checked); }

Checkbox 1

Checkbox 2

Checkbox 3

As with the radio button object, add a CHECKED attribute to the HTML markup for that check box you wish to be initially check when the form is first loaded.

Checkbox 1>

You can also set the button selection programmatically with JavaScript, using the checked property. Specify the name of the checkbox you want to check, as in

form.check1.checked = true;

Using Text Areas

Текстовые области используются для ввода многострочного текста. По умолчанию размер текстового поля составляет 1 строку по 20 символов. Вы можете изменить размер с помощью атрибутов COLS и ROWS. Вот типичный пример текстовой области с текстовым полем шириной 40 символов на 7 строк:

Вы можете использовать JavaScript для чтения содержимого поля текстовой области. Это делается с помощью свойства value. Вот пример: