Сибирский федеральный университет
Опубликован: 01.09.2010 | Доступ: свободный | Студентов: 4000 / 417 | Оценка: 4.08 / 3.78 | Длительность: 11:06:00
Лекция 12:

HTML-формы

Проверку правильности и полноты ввода данных осуществляет следующий сценарий, помещенный в файл 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. Перечислите основные методы и события элементов формы.
Юрий Шах
Юрий Шах

Профессиональный веб-дизайн: Введение в современные веб-технологии
Самостоятельная работа 4

"3. Создание внешней таблицы.

Теперь создайте таблицу с двумя строками. Во второй строке создайте две ячейки - в первую переместите таблицу цифр, а во вторую - таблицу знаков."

Как в ячейку <td> поместить таблицу? Таблица же сама состоит из ячеек. Исходя из задания следует, что <td> может быть родителем для <td>, но это противоречит правилам HTML?
Если не прав - поправьте.
Также прошу разъяснить, как именно выполнить занное условие - поместить в табличную ячейку таблицу цифр, а в другую ячейку - таблицу знаков? 

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?