htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > Формы по шагам > Блокирование элементов формы

Шаг 17. Блокирование элементов формы

Влад Мержевич

У любого элемента формы есть два состояния, которые ограничивают доступ к элементу или ввод данных, — блокирование (disabled) и только для чтения (readonly).

Блокированные поля

Блокирование элемента не позволяет вообще производить с ним каких-либо действий, в том числе выделять содержимое текстового поля, изменять его или активизировать. Заблокированное поле помечается обычно серым цветом

Замечание

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

Далее представлены разные элементы форм в заблокированном режиме.

Текстовое поле Многострочное текстовое поле
Кнопка Флажки
Список Переключатели

Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь же не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 17.1 показано применение скриптов для изменения блокировки кнопки.

Пример 17.1. Использование блокирования поля

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Блокировка поля</title>
  <script type="text/javascript">
   function agreeForm(f) {
    // Если поставлен флажок, снимаем блокирование кнопки
    if (f.agree.checked) f.submit.disabled = 0 // В противном случае вновь блокируем кнопку
    else f.submit.disabled = 1
   }
  </script>
 </head>
 <body>
  <form action="handler.php">
   <p><textarea cols="30" rows="4" readonly>
    Типовой договорОтдаю свою душу, а взамен получаю здоровье и бессмертие. 
   </textarea></p>
   <p><input type="checkbox" name="agree" onClick="agreeForm(this.form)"> 
    Я согласен со всеми условиями</p>
   <p><input type="submit" name="submit" value="Далее" disabled></p>
  </form>
 </body> 
</html>

Результат данного примера показан ниже.

Я согласен со всеми условиями

В данном примере применяется блокирование кнопки, но оно снимается, как только пользователь поставит флажок возле текста «Я согласен со всеми условиями».

Для блокирования поля используется параметр disabled. Добавление этого атрибута разрешает отображать элемент формы, но не позволяет изменять его, как показано в примере 17.1.

Поля только для чтения

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

Для установки режима «только для чтения» используется параметр readonly, он добавляется к тегу <INPUT type="text"> или <TEXTAREA>. На вид элемента формы это никак не влияет, но как было уже замечено, модифицировать значение поля не удастся.

Ниже представлены два поля с многострочным текстом, одно из которых находится в обычном режиме, а второе — «только для чтения».

 

В примере 17.2 показано создание поля для чтения.

Пример 17.2. Использование параметра readonly

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Поле для чтения</title>
 </head>
 <body>
  <form action="">
    <p>
     <textarea name="textarea1" cols="20" rows="10">Обычное текстовое поле</textarea>
     <textarea name="textarea2" cols="20" rows="10" readonly>Поле только для чтения</textarea>
   </p>
  </form>
 </body>
</html>
Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru