Поможем в ✍️ написании учебной работы

Имя

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

Выберите тип работыЧасть дипломаДипломная работаКурсовая работаКонтрольная работаРешение задачРефератНаучно - исследовательская работаОтчет по практикеОтветы на билетыТест/экзамен onlineМонографияЭссеДокладКомпьютерный набор текстаКомпьютерный чертежРецензияПереводРепетиторБизнес-планКонспектыПроверка качестваЭкзамен на сайтеАспирантский рефератМагистерская работаНаучная статьяНаучный трудТехническая редакция текстаЧертеж от рукиДиаграммы, таблицыПрезентация к защитеТезисный планРечь к дипломуДоработка заказа клиентаОтзыв на дипломПубликация статьи в ВАКПубликация статьи в ScopusДипломная работа MBAПовышение оригинальностиКопирайтингДругое

Нажимая кнопку "Продолжить", я принимаю политику конфиденциальности

Форма является частью HTML-документа, и программный доступ к ее свойствам, методам и событиям осуществляется через Объектную модель документа (DOM), предоставляемую API браузера. API позволяет читать, изменять, удалять и создавать новые элементы формы. Все эти действия выполняются при помощи сценариев, написанных на языке Javascript (или VBScript).

Доступ к форме (объекту form ) осуществляется по индексу в коллекции форм HTML-документа.

var oForm = document.forms[0];//первая форма в документе

Internet Explorer допускает также доступ по имени формы (атрибуту name ), если таковой присутствует. Согласно спецификации HTML 4.01, атрибут name элемента form считается устаревшим и поддерживается только для обратной совместимости.

<form name="Form1" method="get" action="form.php"> ... </form> <script type="text/javascript"> var oForm = document.Form1;//работает в Internet Explorer </script>

Элемент form обладает множеством свойств, общих для большинства HTML-элементов, специфическими являются свойства action, method и enctype, совпадающие по смыслу с одноименными атрибутами; все они доступны по чтению и записи. Метод submit() немедленно отправляет данные формы на сервер. Метод reset() очищает все введенные пользователем данные без отправки на сервер. Важнейшими событиями, связанными с формой, являются onsubmit (пользователь нажал кнопку Submit ) и onreset (пользователь нажал кнопку Reset ). Оба эти события могут быть перехвачены и обработаны.

<form method="post" action="login.php" onsubmit="return Validate(this)"> <!-- При нажатии на кнопку Submit будет вызвана функция Validate,   которая должна выполнить предварительную проверку формы.   Слово this в этом контексте указывает на форму. Если функция возвращает true,    данные формы отправляются на сервер, если false, отправка отменяется. --> ... </form> <script type="text/javascript"> function Validate(oForm) { //выполнить проверку данных формы return true; } </script>

Доступ к элементам управления формы осуществляется по их именам (атрибутам name ). Возможен также поиск элементов управления (как и любых других HTML-элементов) по их id. Все элементы управления имеют свойства name, id, style, class (CSS) и некоторые другие, доступные по чтению и, в большинстве случаев, по записи (изменению). Свойство value (значение) есть у всех элементов управления, кроме input type="image". Именно это значение передается на сервер (при наличии атрибута name ) при отправке данных формы.

Общим для всех элементов управления является метод focus(), который передает фокус ввода элементу (и вызывает событие onfocus ). Метод select() отличается от метода focus() тем, что не только помещает фокус ввода в элемент, но и, в случае текстовых полей, выделяет содержимое.

Все элементы управления генерируют многочисленные события, которые могут быть перехвачены и обработаны программно.

• Событие onfocus происходит, когда элемент управления получает фокус ввода, например, пользователь щелкает кнопкой мыши в текстовом поле или перемещается к элементу управления при помощи клавиши Tab на клавиатуре. В любой момент времени не более чем один элемент может иметь фокус ввода.
• Событие onblur происходит, когда элемент управления теряет фокус ввода, независимо, изменен элемент или нет. При переходе от одного элемента управления к другому сначала происходит событие onblur первого элемента, затем событие onfocus второго элемента.
• Событие onchange происходит, когда текстовое поле (элементы input type=text или password или textarea ) или список опций (элемент select ) были изменены пользователем и теряют фокус ввода. Это событие происходит до события onblur. Если изменений не было или они сделаны программно, событие не происходит. Событие onchange не происходит также, пока пользователь продолжает набирать текст или перемещаться по списку опций.
• Событие onclick генерируется, когда пользователь щелкает кнопкой мыши по элементу или нажимает клавишу Enter или пробел на кнопке, имеющей фокус ввода.
• Событие onkeypress генерируется, когда пользователь нажимает и отпускает клавишу, производящую символ, на клавиатуре. Это событие может быть разделено на два отдельных события, onkeydown (пользователь нажимает клавишу) и onkeyup (пользователь отпускает клавишу). Определить нажатую клавишу можно через объект event (событие), который генерируется Internet Explorer при возникновении события.

Следует помнить, что DOM модели, предоставляемые различными браузерами, различаются, и различия максимальны именно в обработке событий. Mozilla Firefox, Safari и Google Chrome отправляют в функцию – обработчик события аргумент – объект event> (событие). Internet Explorer не отправляет аргументы, но делает объект window.event доступным внутри функции – обработчика.

Пример: проверка данных формы

Рассмотрим обращение к объектной модели HTML-формы на примере проверки полноты введенных данных в регистрационную форму.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Регистрация</title> <link href="form.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="form.js"></script></head><body> <!-- Сюда будем выводить сообщения об ошибках --> <ul id="errors></ul> <form method="post" action="form.php" onsubmit="return Validate()"> <!-- Элементы формы удобно размещать в таблице --> <table>   <caption>Регистрация пользователя</caption>   <tr>       <td>Имя пользователя: </td>       <td>           <input type="text" name="username" maxlength="12">           <!-- даем элементу span id, лекго вычисляющийся из name            предыдущего элемента.            Здесь будем подсчитывать введенные символы-->           <span id="spanusername" class="Counter"></span>       </td>   </tr>   <tr>       <td>Пароль: </td>       <td>           <input type="password" name="pwd" maxlength="10">           <span id="spanpwd" class="Counter"></span>       </td>   </tr>     <tr>       <td>Подтвердите пароль:</td>       <td>           <!-- Этот элемент не отправляет данные на сервер                     и используется только для проверки правильности ввода -->           <input type="password" id="pwd1" maxlength="10">           <span id="spanpwd1" class="Counter"></span>       </td>   </tr>   <tr>   <td>Пол:</td>   <td> <!-- атрибут name у группы переключателей имеет одинаковое значение -->   <input type="radio" name="gender" value="m" id="genderM" >   <label for="genderM">Мужской</label>   <input type="radio" name="gender" value="f" id="genderF" >   <label for="genderF">Женский</label>   </td>   </tr>   <tr>       <td colspan="2">        <input type="checkbox" id="chkAgree" name="agree" value="yes">        <label for="chkAgree">Я согласен с условиями</label>       </td>   </tr>   <tr>       <td>           <button type="submit"><b>Зарегистрировать</b></button>       </td>       <td>           <button type="reset"><i>Очистить форму</i></button>       </td>   </tr> </table> </form></body></html>

Стилевое оформление страницы можно поместить в отдельный файл (здесь form.css ). Содержимое каскадной таблицы стилей может выглядеть, например, так:

input[type="text"], input[type="password"]{ border: solid 1px #ccc; width: 150px;}/* Использование псевдо-класса :focus - хорошая альтернатива обработке события onfocus */input[type="text"]:focus, input[type="password"]:focus, input:focus+label /* Элемент label, следующий сказу за элементом, получившим фокус ввода */{   background:#cff;}/* Первая ячейка таблицы в строке */td:first-child {text-align: right;} .Counter{   position:absolute;   display:none;   font-size:small;   background:#dfd;}table {border:solid 1px #ccc;} #errors {color:Red;}

Проверку правильности и полноты ввода данных осуществляет следующий сценарий, помещенный в файл form.js и подключенный к форме при помощи элемента script в элементе head.

/*Объявляем переменную для формы. В этот момент мы не можем связать ее с объектом, поскольку документ еще не до конца загружен*/var oForm = null;/*Объявляем функцию, которая будет вызываться при попытке отправить данные на сервер (пользователь нажал кнопку submit)*/function Validate() { // Очищаем результаты предыдущей проверки //Функция ClearErrors определена ниже ClearErrors(); var result = true; // результат проверки формы // Находим элемент, в который будут записываться ошибки var oErrors = document.getElementById('errors'); // и очищаем его содержимое oErrors.innerHTML = ''; //Проверяем Имя пользователя if (!oForm.username.value) {// В поле username ничего не введено   // проверка не прошла   result = false;   //добавляем описание ошибки   oErrors.innerHTML += '<li>Введите имя пользователя</li>';   // помечаем элемент   oForm.username.style.borderColor = 'red';   //поместить фокус ввода в поле ввода и выделить все содержимое   oForm.username.select(); } // в противном случае не делать ничего //Проверяем пароль if (!oForm.pwd.value) {   oErrors.innerHTML += '<li>Введите пароль</li>';   oForm.pwd.style.borderColor = 'red';   if (result) {// элемент с ошибкой не был до этого найден       oForm.pwd.select();   }   result = false; } // Проверяем совпадение введенных паролей // Поле подтверждения пароля не имеет атрибута name, // поэтому мы не можем получить его через oForm.pwd1 // Используем поиск в документе по атрибуту id var oPwd1 = document.getElementById('pwd1'); if (!oPwd1.value) {// поле пусто   oErrors.innerHTML += '<li>Подтвердите пароль</li>';   oPwd1.style.borderColor = 'red';   if (result) {       oPwd1.select();   }   result = false; } else // поле не пусто   if (oPwd1.value != oForm.pwd.value) {// пароли не совпадают   oErrors.innerHTML += '<li>Пароли должны совпадать</li>';   oPwd1.style.borderColor = 'red';   if (result) {       oPwd1.select();   }   result = false; } // Группа переключателей представляет собой массив элементов. // Мы должны проверить каждый var genderSelected = false; for (var i = 0, n = oForm.gender.length; i < n; i++) {   if (oForm.gender[i].checked) {// найден выбранный элемент       genderSelected = true;       // нет необходимости продолжать       break;// выход из цикла   } } if (!genderSelected) {// ни один из переключателей не выбран   oErrors.innerHTML += '<li>Укажите пол</li>';   if (result) {       // элемент input type=radio не имеет метода select()       // помещаем фокус ввода в первый элемент группы       oForm.gender[0].focus();   }   result = false; } if (!oForm.agree.checked) {   oErrors.innerHTML += '<li>Вы должны согласиться с условиями</li>';   if (result) {       // элемент input type=checkbox не имеет метода select()       // помещаем фокус ввода в этот элемент       oForm.agree.focus();   }   result = false; } // Проверка закончена.     // Если result == false, отправка данных отменяется return result;}// function Validate //вспомогательная функция очистки формыfunction ClearErrors() { // Находим элемент, в который записываются ошибки var oErrors = document.getElementById('errors'); // и очищаем его содержимое oErrors.innerHTML = ''; oForm.username.style.borderColor = ''; oForm.pwd.style.borderColor = ''; document.getElementById('pwd1').style.borderColor = '';} // Функция, которая автоматически вызывается// по окончании загрузки документа в окно браузераwindow.onload = function() { // документ загружен, и мы можем найти внем форму. oForm = document.forms[0]; // Событие onkeyup происходит, когда пользователь // отпускает клавишу в поле текстового ввода oForm.username.onkeyup = oForm.pwd.onkeyup = document.getElementById('pwd1').onkeyup = function() {// футкция обрабатывает событие любого из трех элементов   // this является ссылкой на элемент, который вызвал событие   // id вспомогательных элементов сделаны так, чтобы легко вычислись   // из имени элемента-источника события   //если атрибут name отсутствует или пуст,         //будет использован id (this.name || this.id)   var elem = document.getElementById('span' + (this.name || this.id));   elem.innerHTML = this.value.length + ' из ' + this.maxLength;   elem.style.display = 'inline'; }; // onkeyup // Событие onblur происходит, когда элемент теряет фокус ввода oForm.username.onblur = oForm.pwd.onblur = document.getElementById('pwd1').onblur = function() {   var elem = document.getElementById('span' + (this.name || this.id));   // Скрываем вспомогательный элемент   elem.style.display = ''; }; // onblur // Событие onreset происходит, когда пользователь // нажимает кнопку Reset (Очистить форму) oForm.onreset = function() {   // Производим дополнительную очистку.         // Содержимое полей очищается автоматически   ClearErrors();   oForm.username.focus(); }; // onreset // активируем ввод в поле Имя пользователя oForm.username.focus();} // window.onload

Подобную проверку рекомендуется производить во всех случаях, когда ожидается ввод со стороны пользователя, однако она не заменяет и не отменяет необходимости выполнить еще одну проверку на стороне сервера. Фактически, проверка данных в браузере делается лишь для удобства пользователя (убедиться, что необходимые данные введены и отвечают формальным требованиям) и уменьшения сетевого трафика (заведомо ошибочные данные не будут отправлены на сервер). Ни в коем случае нельзя проверять в браузере имя пользователя и его пароль – только наличие таких данных.

Безопасность форм

Неправильное использование HTML-форм может существенно повредить безопасности веб-приложения. Данные формы, передаваемые через HTTP протокол, не шифруются и могут быть перехвачены и изменены при передаче. Для передачи конфиденциальных данных, таких как имена пользователей, пароли, номера кредитных карточек и т.д., следует использовать HTTPS (Secure Hypertext Transfer Protocol). Это поможет обезопасить данные ваших пользователей.

С другой стороны, недобросовестный пользователь может пытаться использовать вашу форму для нарушения работы веб-приложения или кражи информации с сервера. Фактически, веб-страницы доступны неопределенно большому числу лиц, и наиболее безопасно рассматривать каждый запрос к серверу как потенциальное покушение на его безопасность (пусть даже это противоречит презумпции невиновности). С практической точки зрения, следует

1. ограничивать и проверять длину данных, вводимых в текстовые поля ( input type="text", input type="password", textarea ).
2. ограничивать пользовательский ввод только допустимыми символами (например, буквами и цифрами), не допуская тэгов и специальных символов.
3. иметь в виду, что проверка данных на стороне клиента (в браузере) служит лишь для удобства пользователя и может быть достаточно легко отключена.

Вопросы

1. Что такое HTML-форма? Для чего она предназначена?
2. Какие специфические атрибуты имеет форма?
3. Данные каких элементов управления отправляются на сервер?
4. Перечислите и охарактеризуйте элементы управления формы.
5. Перечислите и охарактеризуйте атрибуты элемента текстового ввода.
6. Как получить программный доступ к объекту form?
7. Перечислите основные методы и события объекта form.
8. Перечислите основные методы и события элементов формы.

См. лаб. работу №6

 

Лекция 19: