Отправляет email-рассылки с помощью сервиса Sendsay

Самоучитель по HTML и CSS

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 50


Дата: 2009-02-27

Архив Рассылки

Самоучитель HTML

Самоучитель CSS

Справочник по CSS

Рецепты HTML и CSS
Самоучитель по HTML и CSS

Блокирование элементов формы

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

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

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

Замечание

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

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

Рис. 1

Рис. 17.1. Вид заблокированных элементов форм

Блокирование элементов форм обычно используется для того, чтобы динамически с помощью скриптов изменять значение поля. Пользователь же не должен в подобном случае иметь доступ к полю, поэтому оно блокируется. В примере 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>

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

Рис. 17.2

Рис. 17.2. Заблокированная кнопка

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

Для блокирования поля используется параметр 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>
Copyright 2007—2009 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
В избранное