JavaScript урок 9. Объектная модель документа (продолжение): идентификация формы

На уроке рассматриваются способы доступа к форме. Разбираются методы формы submit и reset, события формы onsubmit и onreset, а также механизм в javascript отправки данных формы на сервер

Форма: идентификация формы, события

Для идентификации формы и ее элементов через javaScript можно воспользоваться двумя атрибутами: name и id.

  • В случае, когда мы используем javaScript для динамичности и интерактивности веб-страниц, но, при этом отправлять данные с формы на сервер не требуется, то для идентификации используется атрибут id.
  • Атрибут name необходим для того, чтобы отправить форму на сервер.


Все элементы управления обязательно располагаются в форме:

<form action="..." method="..." enctype="..." id="...">
<input type="text" id="...">
...
<input type="submit" id="...">
</form>

Атрибуты формы:

action (англ. «действие»)
Файл на сервере с кодом для отработки отосланных данных
http://labs.org.ru/javascript-1/
enctype (англ. «тип кодировки») text/plain (обычный текст)
application/x-www-dorm-urlencoded (для метода Post отправки формы)
multipart/form-data (для метода Post, если прикрепляются файлы)
method (метод отправки данных) post
get

Пример:

<form name="myForm" action="file.php" method="post" enctype="text/plain">
  • В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
  • Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain, если с формой отсылаются файлы, то следует указать multipart/form-data.
  • Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post.
 

Пример: Создать несколько различных элементов управления формы, данные из формы предполагается отсылать на сервер

<form name="f_name" method="get" action="javascript:void(0);">
 <input name="i_name" size="30" type="text" value="текст">
 <textarea name="mess"></textarea>
 <input type="checkbox" name="chName" id="chId" value="yes" />да
 <input type="radio" name="rName" id="rId" value="yes" />да
 <input type="file" name="fName" id="fId" />
 <input type="password" name="pName" id="pId" />
 <input type="hidden" name="hName" id="hId"  value=“hid"/> 
 <select name="sName" id="sId" multiple="multiple" >
   <option name="opt1Name" id="opt1Id" value="1">text1
   <option name="opt2Name" id="opt2Id" value="2">text2
 </select>
</form>

При щелчке на кнопке submit данные на сервер будут пересылаться в форме переменная=значения в следующем формате:
i_name = текст
mess = ""
chName= yes
rName = yes
fName = путь файла
pName = ""
hName= hid
sName=1 или 2
О том, как правильно располагать элементы управления на форме с точки зрения юзэбилити, можно прочитать статью на сайте tproger по сслыке1 и ссылке2.

Идентификация формы в javaScript

Пример обращения в javaScript к форме:

Пример: Создать форму с двумя элементами типа radio (переключатели) и кнопкой отправки формы на сервер (submit). Получить доступ в скрипте к форме

<form name="f1" id="f">
Ваш пол:<br>
<input type="radio" name="r1" id="id1">м<br>
<input type="radio" name="r1" id="id2">ж<br>
<input type="submit">
</form>
</body>

скрипт:

document.forms[0].
document.getElementById("f1").

Методы формы

Submit() ~ использование кнопки submit
Reset() ~ использование кнопки reset

  
Метод submit() формы применяется для отправки формы из JavaScript-программы
  

Пример того как можно в javascript отправить форму по щелчку на гиперссылке:

Пример: Создать форму с текстовым полем. После формы расположить гиперссылку, по щелчку на которой отсылать данные формы на сервер

<form name="s" method="post" action= 
"javascript:window.alert('данные подтверждены'); void(0);">
	<input type="text" size="1">
</form>
 
<a href="javascript:document.s.submit();">Отослать</a>

void(0) — отмена пересылки данных на сервер
— при нажатии на ссылку происходит переход к выполнению action

Событие javascript onsubmit и onreset

Рассмотрим использование событий на примерах:

Пример: Перед отправкой формы на сервер необходимо отобразить простое сообщение для пользователя с просьбой подтвердить заполнение формы заказа

Скрипт:

function confirmOrder() { 
confirm ('Вы подтверждаете заказ?') ; 
}
<!-- функция confirmOrder() вызывается в качестве значения атрибута onsubmit формы -->
<form action="script.php" method="post" onsubmit="confirmOrder()"> 
<input type="submit" value="ok" />
</form>

В следующем примере происходит регистрация функции-обработчика в качестве свойства элемента:

Пример: При очистке формы (элемент reset) выдавать диалоговое окно для подтверждения очистки. Выполнить в виде скрипта с ссылкой на функцию

<form action="process.cgi" id="f1" method="post">
<input type="text" value="John" />
<input type="reset" value="cancel" /> 
</form>

Скрипт:

document.getElementById("f1").onreset=function()
 {
   confirm ('Вы уверены, что хотите очистить форму?') ;  
 };

В скрипте происходит обращение к форме (f1) и в качестве ее свойства указывается функция-обработчик

Задание js9_1. Создать страницу с текстовым полем и двумя кнопками. При нажатии одной из них происходит передача данных содержимого текстового поля по электронной почте (action="mailto:address@domen.domen"), при нажатии другой – происходит очистка текстового поля

Задание js9_2. По щелчку на кнопке очистки формы устанавливать надпись «Готово!» на этой кнопке (свойство value)

Поделитесь уроком с коллегами и друзьями:
4 комментария

    Аделина

    Задание js9_1. очистка формы срабатывает, а при нажатии на кнопку отправить открывается outlook.Так и должно быть?

      Аделина

      admin

      Так и должно быть именно в этом задании, потому что action=»mailto:address@domen.domen» — означает, что данные с формы собираются и отправляются на указанный адрес: т.е. вместо «address@domen.domen» можно написать любой электронный адрес. Outlook открывается, потому что у вас это почтовый клиент по умолчанию; т.е. у кого-то другого это может быть другая программа для работы с почтой

        Аделина

        ок, спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить