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

Шаг 18. Изменение ширины поля

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

Обычно ширина текстового поля регулируется параметром size тега <INPUT>, но в большинстве случаев это не удобно, поскольку на размер в таком случае влияет выбор браузера, его параметры, настройки операционной системы и т.д. Чтобы установить заданную ширину поля лучше использовать стили, в частности, ширина изменяется с помощью атрибута width.

Ширина однострочного текстового поля

Для изменения ширины однострочного текстового поля используется следующий синтаксис.

<input type="text" style="width: значение">

В качестве значений могут использоваться любые единицы принятые в CSS, например, пикселы, проценты, дюймы и т.д. Не обязательно ширину устанавливать внутри тега <INPUT>, так, в примере 18.1 показано, как это делать другим способом, через таблицу глобальных стилей.

Пример 18.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>
  <style type="text/css">
   .search {
    width: 200px; /* Ширина в пикселах */
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
   <p>Поиск: <input type="text" class="search"></p>
  </form>
 </body>
</html>

В данном примере ширина текстового поля устанавливается равной 200 пикселов (рис. 18.1).

Рис. 18.1

Рис. 18.1. Ширина текстового поля в пикселах

Замечание

Если ширина одновременно задается с помощью параметра size и стилей, то значение size будет проигнорировано и ширина примет значение, указанное через стили.

Ширина и высота многострочного текстового поля

Кроме ширины можно задавать и высоту поля через стилевой атрибут height. Для многострочного поля синтаксис изменения размеров будет следующий.

<textarea style="height: высота; width: ширина">
...
</textarea>

В примере 18.2 показано, как устанавливать размеры для этого поля.

Пример 18.2. Размеры многострочного текста

<!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>
  <style type="text/css">
   TEXTAREA {
    width: 100%; /* Ширина в процентах */
    height: 100px; /* Высота в пикселах */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
    <p><textarea cols="10" rows="10"></textarea></p>
  </form>
 </body>
</html>

В данном примере ширина многострочного текстового поля установлена как 100%, и занимает всю отведенную область, а высота равна 100 пикселов (рис. 18.2).

Рис. 18.2

Рис. 18.2. Размеры многострочного текстового поля

Ширина кнопок

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

Синтаксис изменения размеров кнопки следующий.

<input type="button" style="width: ширина; height: высота">

В примере 18.3 показано, как изменить ширину кнопки.

Пример 18.3. Ширина кнопок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ширина кнопки</title>
  <style type="text/css">
  .agree {
   width: 80%; /* Ширина в процентах */
  }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><input type="button" value="Я согласен со всеми условиями" class="agree"></p>
  </form>
 </body>
</html>

Результат данного примера показан ниже (рис. 18.3). Заметим, что вид кнопок в разных браузерах может различаться между собой, при равной их ширине.

Рис. 18.3

Рис. 18.3. Кнопка, шириной 80% от ширины окна браузера

Замечание

Если заданная ширина кнопки меньше текста надписи, тогда текст будет обрезан с правого края.

Ширина списка

Исходно ширина списка определяется самым широким текстом, входящим в список. С помощью стилей можно установить требуемую ширину списка, несмотря на указанную особенность.

Синтаксис изменения ширины списка следующий.

<select style="width: ширина">
  <option>...</option>
</select>

В примере 18.4 показано, как изменить ширину списка.

Пример 18.4. Ширина списка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Ширина кнопки</title>
  <style type="text/css">
   SELECT {
    width: 200px; /* Ширина списка в пикселах */
   }
  </style>
 </head>
 <body> 
  <form action="handler.php">
    <p><b>Выберите блюдо</b></p>
    <p><select>
     <option>Мчади</option>
     <option>Када на мацони</option>
     <option>Пахлава</option>
     <option>Чурчхелла</option>
     <option>Кчуч</option>
     <option>Лилибдж</option>
    </select></p>
   </form>
 </body>
</html>

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

Рис. 18.4

Рис. 18.4. Ширина списка

Статья опубликована: 12.08.2005 Последнее обновление: 12.11.2008
Формы по шагам
Примеры из статьи

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