Текстовое поле

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

<input атрибуты>

Значение атрибута type для элемента <input> по умолчанию определено как text, поэтому его можно не указывать явно. Атрибуты текстового поля перечислены в табл. 1.

Табл. 1. Атрибуты однострочного текстового поля
Атрибут	Описание
size	Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля.
name	Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Начальный текст отображаемый в поле.

Создание текстового поля показано в примере 1.

Пример 1. Текстовое поле

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Как вас зовут?</strong></p>
   <p><input maxlength="25" size="40" value="Вася"></p>
  </form>
 </body>
</html>

В результате получим следующее (рис. 1).

Вид текстового поля в браузере Chrome

Рис. 1. Вид текстового поля

Ширина текстового поля — величина нестабильная и в разных браузерах может меняться в небольших пределах. Для формы, которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. Так что лучше вообще отказаться от использования атрибута size и задать параметры поля через стили. К тому же CSS позволяет изменять цвет фона, тип шрифта и рамки вокруг поля, как показано в примере 2.

Пример 2. Изменение вида текстового поля

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Текстовое поле</title>
  <style>
   .textField {
    width: 100%; /* Ширина поля */
    padding: 10px; /* Поля */
    box-sizing: border-box; /* Алгоритм расчёта ширины */
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */
    border: 1px solid #ccc; /* Параметры рамки */
    color: #ff6d37; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <form action="handler.php">
   <p><strong>Как вас зовут?</strong></p>
   <p><input maxlength="25" value="Вася" class="textField"></p>
  </form>
 </body>
</html>

Поскольку общая ширина элемента суммируется из значений width, padding и border, то мы получим поле, которое будет выходить за пределы окна браузера. Чтобы этого не произошло, добавлено свойство box-sizing со значением border-box, оно изменяет алгоритм расчёта ширины и ширина поля будет равна 100% независимо от значений других свойств. В результате получим поле следующего вида (рис. 2).

Вид текстового поля после применения стилей