HTML-формы

Элемент button

Элемент button является альтернативой кнопкам input type=submit, reset и button. Элемент имеет атрибуты name (для отправки данных на сервер), type со значениями submit, reset и button и value (отправляемое на сервер значение). Между открывающим и закрывающим тэгами элемента button находится HTML-содержимое, которое отображается на кнопке.

<button type="submit" name="MyButton" value="button1">
  <b>Отправить запрос</b>
</button>

Элемент select

Этот элемент отображается как список опций или как раскрывающийся список, в зависимости от значения атрибута size. Внутри элемента располагаются опции и/или группы опций.

<select name="fruits">
    <option selected>-Выберите любимый фрукт-</option>
    <option value="1">Яблоко</option>
    <option value="2">Груша</option>
    <option value="3">Банан</option>
  </select>

  <!-- size опущен или равен 1: раскрывающийся список. 
   Опция с атрибутом selected выбрана по умолчанию -->
  <!-- список из 6 видимых строк с прокруткой для остальных. 
   Выбирать можно только option. Группы (optgroup) создаются только для у
   добства пользователя.  -->
  <select size="6" name="chemistry">
    <optgroup label="Щелочные металлы">
      <option>Литий (Li)</option>
      <option>Натрий (Na)</option>
      <option>Калий (K)</option>
    </optgroup>
    <optgroup label="Галогены">
      <option>Фтор (F)</option>
      <option>Хлор (Cl)</option>
      <option>Бром (Br)</option>
    </optgroup>
  </select>

Пользователь может выбрать только одну опцию из раскрывающего списка. Значение ( value ) этой опции будет отправлено на сервер. Если атрибут value отсутствует, передается текст опции. Список опций допускает множественный выбор, если к элементу select добавлен атрибут multiple. Атрибут multiple не требует значения (в XHTML значение, как обычно в таких случаях, совпадает с именем атрибута) и автоматически превращает элемент select в список опций независимо от наличия или значения атрибута size. Пользователь делает множественный выбор, удерживая клавишу Shift (опции подряд) или Ctrl (опции вразбивку).

Выберите продукты для салата
  <select name="salad" multiple>
    <option>Лук</option>
    <option>Морковь</option>
    <option>Зелень</option>
    <option>Сметана</option>
    <option>Майонез</option>
    <option>Горчица</option>
  </select>

Элемент textarea

Элемент textarea отображается в браузере как поле для многострочного текстового ввода. Атрибуты cols и rows задают ширину (число символов) и высоту (число строк) элемента. Добавление атрибута readonly делает текст в поле доступным только для чтения. У элемента textarea нет атрибута maxlength или аналогичного, ограничивающего длину вводимого текста. Если ограничение необходимо, это следует делать программными средствами (см. ниже). В отличие от других элементов управления, нажатие клавиши Enter в textarea добавляет новую строку (в остальных случаях отправляет данные формы на сервер).

<textarea name="message" cols="60" rows="7">
  Введите Ваше сообщение
</textarea>

Вспомогательный элемент label

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

<input type="checkbox" name="agree" id="chkAgree">
  <label for="chkAgree">
    Я согласен с условиями</label>

Щелчок по метке равноценен щелчку по элементу управления. Атрибут for элемента label связан с id (не name ) элемента управления.

Программный доступ к форме и ее элементам

Форма является частью 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() тем, что не только помещает фокус ввода в элемент, но и, в случае текстовых полей, выделяет содержимое.

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

Следует помнить, что 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). Это поможет обезопасить данные ваших пользователей.

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

Вопросы