Согласие на обработку персональных данных.

09.07.2020
Новые видео и статья Операторы != и == против операторов !== и ===.

04.07.2020
Новый выпуск журнала Автоматизация и Программирование.

15.06.2020
Новые видео и статья JavaScript и CSS.

10.06.2020
Новые видео и статья Как в С++ получить от пользователя строку с пробелами.

08.06.2020
Новый выпуск журнала Автоматизация и Программирование.



Раздел: Сайтостроение / JavaScript /

Формы ввода данных в JavaScript

Что такое JavaScript Что такое JavaScript

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

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

Ну а если хотите всё и сразу, то вам сюда:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

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

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

Объект Form

Объект Form в JavaScript представляет HTML-форму. Формы доступны в виде элементов массива forms[], который является свойством объекта Document.

Формы расположены в этом массиве в том же порядке, что и в документе. То есть элемент document.forms[0] ссылается на самую первую форму документа. На последнюю форму документа можно сослаться, например, так:

document.forms[document.forms.length - 1]

Программисту будет весьма полезно свойство объекта Form – массив elements[], который содержит объекты JavaScript различных типов, представляющие различные элементы ввода формы. Элементы этого массива также располагаются в той же последовательности, в которой они расположены в документе. Например, на второй элемент третьей формы документа в текущем окне можно сослаться так:

document.forms[2].elements[1]

Определение элементов формы

Элементы HTML-формы позволяют создавать простые пользовательские интерфейсы для JavaScript-программ.

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

Объект HTML-тег Свойство “type” Событие Описание
Button <input type="button"> или <button type="button"> "button" onclick Кнопка
Checkbox <input type="checkbox"> "checkbox" onclick Флажок
File <input type="file"> "file" onchange Поле для ввода имени файла, загружаемого на веб-сервер
Hidden <input type="hidden"> "hidden" Нет Данные, сохраняемые вместе с формой, но невидимые пользователю
Option <option> Нет Обработчики событий подключаются к объекту Select, а не к отдельным объектам Option Один элемент объекта Select
Password <input type="password"> "password" onchange Поле для ввода пароля (набранные символы невидимы)
Radio <input type="radio"> "radio" onclick Переключатель. Одновременно может быть установлен только один.
Reset <input type="reset"> или <button type="reset"> "reset" onclick Кнопка, очищающая значения формы
Select <Select> "select-one" onchange Список или выпадающее меню, в котором может быть выбран один элемент (см. также объект Option)
Select <select multiple> "select-multiple" onchange Список, в котором может быть выбрано несколько элементов (см. также объект Option).
Submit <input type="submit"> или <button type="submit"> "submit" onclick Кнопка для передачи данных формы
Text <input type="text"> "text" onchange Однострочное поле ввода
Textarea <textarea> "textarea" onchange Многострочное поле ввода

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

Ну а теперь ещё простой пример использования форм ввода-вывода и на этом первое знакомство закончим.

<form name="myform"> 

<table cellpadding="10">
<tr>
  <td>
  Пользователь: <input type="text" name="username" size="15">
  </td>
  <td>
  Пароль: <input type="password" name="password" size="15">
  </td>
</tr>
<tr>
  <td>
  <input type="reset" name="btnClear" value=" Очистить ">
  </td>
  <td>
  <input type="button" name="btnPsw" 
         value=" Показать пароль " 
         onClick="ShowPassword()">
  </td>
</tr>
</table>

</form>

<script language="JavaScript">
<!--
document.write(document.forms[0].elements[2].value);
function ShowPassword()
{ 
  alert("Пароль: " + myform.password.value);
}
// -->
</script>

Здесь у нас форма с четырьмя элементами: поле ввода текста (text), поле ввода пароля (password), кнопка очистки полей ввода (reset) и просто кнопка (button).

Для обычной кнопки имеется обработчик ShowPassword() события onClick, который выводит окно с паролем (знаки, введённые в поле password, невидимы пользователю).

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

Ну а в начале сценария мы использовали способ доступа к элементам формы через массивы форм и элементов:

document.write(document.forms[0].elements[2].value);

Этот код выведет слово “Очистить”, поскольку третьим элементом формы является кнопка с надписью “Очистить”.

А вот так примерно всё это будет выглядеть:

Ввод данных в JavaScript

Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика