Веб-формы — Работа с пользовательскими данными

Поля ввода текста

Текстовые поля — это самые основные виджеты формы. Это очень удобный способ позволить пользователю вводить любые данные, и мы уже видели несколько простых примеров.
Примечание. Текстовые поля формы HTML представляют собой простые элементы управления для ввода обычного текста. Это означает, что вы не можете использовать их для редактирования форматированного текста (жирный шрифт, курсив и т. д.). Все редакторы форматированного текста, с которыми вы столкнетесь, представляют собой настраиваемые виджеты, созданные с помощью HTML, CSS и JavaScript.
Все основные текстовые элементы управления имеют некоторые общие черты поведения:

• 
  Они могут быть помечены как readonly (пользователь не может изменить входное значение, но оно все еще отправляется с остальными данными формы) или disabled (входное значение не может быть изменено и никогда не отправляется с остальными данными формы).
  
• 
  Они могут иметь placeholder; это текст, который появляется внутри поля ввода текста, который следует использовать для краткого описания назначения поля.
  
• 
  Они могут быть ограничены size (физический размер поля) и maxlength (максимальное количество символов, которые можно ввести в поле).
  
• 
  Им может быть полезна проверка орфографии (с использованием spellcheck атрибута), если браузер поддерживает ее.
  

Примечание. Этот элемент уникален среди HTML-элементов, поскольку может принимать различные формы в зависимости от type значения его атрибута. Он используется для создания большинства типов виджетов форм, включая однострочные текстовые поля, элементы управления временем и датой, элементы управления без ввода текста, такие как флажки, переключатели, палитры цветов и кнопки.

Однострочные текстовые поля

Однострочное текстовое поле создается с использованием элемента, для которого type установлено значение атрибута text, или путем type полного исключения атрибута ( textзначение по умолчанию). Значение textэтого атрибута также является резервным значением, если значение, указанное для type атрибута, неизвестно браузеру (например, если вы указали, type="color"а браузер не поддерживает собственные средства выбора цвета).
Примечание. Вы можете найти примеры всех типов однострочных текстовых полей на GitHub по адресу single-line-text-fields.html ( см. также вживую ).
Вот пример базового однострочного текстового поля:

Скопировать в буфер обмена
Однострочные текстовые поля имеют только одно истинное ограничение: если вы вводите текст с разрывами строк, браузер удаляет эти разрывы строк перед отправкой данных на сервер.
На следующем снимке экрана показаны типы ввода текста по умолчанию, сфокусированные и отключенные в Firefox 71 и Safari в macOS, а также в Chrome 79 и Edge 18 в Windows 10.