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

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

<input type="text">

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

<input>

Если вы создаёте реальную форму, то, конечно же, к полю следует добавить атрибуты. Допустимые атрибуты текстового поля перечислены в табл. 1.

Табл. 1. Атрибуты однострочного текстового поля
АтрибутОписание
nameИмя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
disabledБлокирует поле для ввода текста и не отправляет данные на сервер.
formИдентификатор формы для связывания текстового поля с элементом <form>.
typeДля текстового поля мы указываем значение text или вообще не пишем этот атрибут.
maxlengthУстанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если данный атрибут опустить, то можно вводить строку длинее самого поля.
readonlyБлокирует поле для ввода текста.
sizeШирина текстового поля, которая определяется числом символов моноширинного шрифта. Обычно не указывают, потому что через стили задать желаемые размеры проще и точнее.
valueНачальный текст, отображаемый в поле.
autocompleteВведённый ранее текст запоминается браузером и подставляется при следующем вводе.
autofocusПоле получает фокус после загрузки документа.
listЗначение атрибута id элемента <datalist>, для связи с этим элементом.
patternШаблон ввода текста.
requiredУказывает, что поле является обязательным для заполнения.
placeholderДобавляет подсказку, которая исчезает при вводе текста.
dirnameИмя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево).

Большинство атрибутов являются типовыми и применяются к другим элементам формы. Некоторые атрибуты мы подробнее рассмотрим в следующих уроках.

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

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

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

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

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

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

Для элемента <input> есть простые правила, которые следует соблюдать:

  • <input> нельзя вкладывать внутрь ссылки <a>;
  • <input> нельзя вкладывать внутрь кнопки <button>;
  • атрибут list должен ссылаться на элемент <datalist>.

Элемент <datalist> позволяет создать список подсказок, который появляется при наборе текста. Подобное можно наблюдать в поисковой системе Яндекс или Гугл, когда вы вводите поисковый запрос.

<datalist> пишется обычно за пределами формы, каждый пункт при этом создаётся элементом <option>, а затем полученный список связывается с текстовым полем с помощью атрибута list, значением которого выступает значение id у <datalist> (пример 2).

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Подсказки</title>
 </head>
 <body>
  <form>
   <p><strong>Введите ваш город</strong></p>
   <p><input name="city" list="city"></p>
  </form> 
  <datalist id="city">
   <option>Волгоград</option>
   <option>Воронеж</option>
   <option>Екатеринбург</option>
   <option>Казань</option>
   <option>Красноярск</option>
   <option>Москва</option>
   <option>Нижний Новгород</option>
   <option>Новосибирск</option>
   <option>Омск</option>
   <option>Пермь</option>
   <option>Ростов-на-Дону</option>
   <option>Самара</option>
   <option>Санкт-Петербург</option>
   <option>Уфа</option>
   <option>Челябинск</option>
  </datalist>
 </body>
</html>

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

Вид текстового поля с подсказками

Рис. 2. Вид текстового поля с подсказками

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

Перейти к заданиям

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 26.07.2016
Редакторы: Влад Мержевич