Для создания области, в которую можно вводить несколько строк текста, предназначен элемент . В отличие от <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.</p><p>Поле для <a href="/mnogostrochnyi-tekst-tekstovye-polya.html">многострочного текста</a> незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно. Синтаксис создания поля следующий.</p><p> <textarea атрибуты> Текст

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

Допустимые атрибуты перечислены в табл. 1.

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

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

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

Введите ваш отзыв:

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

Рис. 1. Вид текстового поля по умолчанию

При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width ), высоту (height ), границу (border ), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.

Пример 2. Оформление текстового поля

Введите ваш отзыв:

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

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

Все браузеры кроме Internet Explorer поддерживают изменение размера для . Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в <a href="/gde-naiti-kuki-veb-brauzera-kak-vklyuchit-cookies-v-raznyh-brauzerah.html">разных браузерах</a> может несколько различаться, но общая схожесть сохраняется.</p> <p>Данный элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.</p><p>Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.</p><p>Синтаксис создания поля следующий.</p><p> <textarea>

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

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты <tr><th>Атрибут </th><th>Описание </th> </tr><tr><td class="attribute">name </td><td>Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. </td> </tr><tr><td class="attribute">disabled </td><td>Блокирует поле и не отправляет данные на сервер. </td> </tr><tr><td class="attribute">form </td><td>Идентификатор формы для связывания поля с элементом <form> . </td> </tr><tr><td class="attribute">maxlength </td><td>Устанавливает <a href="/kak-ya-mogu-vyrovnyat-parallelnyi-lineinyi-kongruentnyi-generator.html">максимальное число</a> символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. </td> </tr><tr><td class="attribute">readonly </td><td>Блокирует поле для ввода текста. </td> </tr><tr><td class="attribute">autofocus </td><td>Поле получает фокус после загрузки документа. </td> </tr><tr><td class="attribute">required </td><td>Указывает, что поле является обязательным для заполнения. </td> </tr><tr><td class="attribute">placeholder </td><td>Добавляет подсказку, которая исчезает при вводе текста. </td> </tr><tr><td class="attribute">dirname </td><td>Имя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево). </td> </tr><tr><td class="attribute">rows </td><td>Высота поля в строках текста. </td> </tr><tr><td class="attribute">wrap </td><td>Значение soft передаёт на сервер текст одной строкой, а hard учитывает значение cols и автоматически добавляет переносы. </td> </tr><tr><td class="attribute">cols </td><td>Ширина поля в символах. </td> </tr></table><p>Создание поля для многострочного текста показано в примере 1.</p><p>Пример 1. Текстовое поле</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текстовое поле</title> </head> <body> <form action="handler.php"> <p><strong>Введите ваш отзыв:</strong></p> <p><textarea name="comment">

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

Рис. 1. Вид текстового поля по умолчанию

Для действуют те же ограничения, что и для <input> , а именно:</p><ul><li><textarea> нельзя вкладывать внутрь ссылки <a> ;</li><li><textarea> нельзя вкладывать внутрь кнопки <button> ;</li> </ul><p>В <textarea> допустимо вставить произвольный текст и он отобразится внутри текстового поля для редактирования. При этом учитываются все пробелы, в отличие от обычного HTML (пример 2).</p><p>Пример 2. Текстовое поле с текстом</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текстовое поле</title> </head> <body> <form action="handler.php"> <p><strong>Отредактируйте ваш отзыв:</strong></p> <p><textarea name="edit" rows="3" cols="30"> КГ/АМ выпий йаду.

Результат данного примера показан на рис. 2. Обратите внимание, что учитываются все пробелы и переносы строк внутри .</p><p><img src='https://i0.wp.com/webref.ru/assets/images/html5-forms/textarea.png' width="100%" loading=lazy></p><p>Рис. 2. Поле с текстом</p><p>Как правило, размеры <textarea> задаются с помощью стилей, но если одновременно заданы атрибуты rows и cols с шириной и высотой через CSS, то стили имеют преимущество и значение атрибутов игнорируется.</p> <p>Этот элемент формы предназначен для создания области, в которой можно вводить несколько строк текста. В таком текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.</p> <p>Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно.</p> <p>Синтаксис создания поля следующий.</p><p> <textarea атрибуты> Текст

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

Допустимые атрибуты перечислены в табл. 1.

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

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

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

HTML5 IE Cr Op Sa Fx

Введите ваш отзыв:

Результат примера в браузере Chrome показан на рис. 1.

Рис. 1. Вид текстового поля по умолчанию

Дополнительно поле может находиться в двух состояниях - блокированном и только для чтения. Спецификация HTML5 не определяет вид поля и текста в подобных состояниях, поэтому браузеры по-разному его отображают (рис. 2).

Opera

Текст внутри блокированного поля нельзя выделить и добавить, также содержимое такого поля не отправляется формой на сервер. Текст внутри поля для чтения доступен для копирования, но его нельзя отредактировать. В примере 2 показан способ создания поля для чтения.

Пример 2. Поле для чтения

HTML5 IE Cr Op Sa Fx

Скопируйте приведённый текст и вставьте его в поле запроса пароля.

Мухаха

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

Последнее обновление: 08.04.2016

Однострочное текстовое поле создается с помощью элемента input , когда его атрибут type имеет значение text:

С помощью ряда дополнительных атрибутов можно настроить текстовое поле:

dirname : устанавливает направление текста

maxlength : максимально допустимое количество символов в текстовом поле

pattern : определяет шаблон, которому должен соответствовать вводимый текст

placeholder : устанавливает текст, который по умолчанию отображается в текстовом поле

readonly : делает текстовом поле доступным только для чтения

required : указывает, что текстовое поле обязательно должно иметь значение

size : устанавливает ширину текстового поля в видимых символах

value : устанавливает значение по умолчанию в текстовом поле

Применим некоторые атрибуты:

Отправить Отмена

В этом примере во втором текстовом поле сразу устанавливаются атрибуты maxlength и size . При этом size - то есть количество символов, которые помещаются в видимое пространство поля больше, чем допустимое количество символов. Однако все равно ввести символов больше, чем maxlength, мы не сможем.

В данном случае также важно различать атрибуты value и placeholder , хотя оба устанавливают видимый текст в поле. Однако placeholder устанавливает своего рода подсказку или приглашение к вводу, поэтому он обычно отмечается серым цветом. В то время как значение value представляет введенный в поле текст по умолчанию:

Атрибуты readonly и disabled делают текстовое поле недоступным, однако сопровождаются разным визуальным эффектом. В случае с disabled текстовое поле затеняется:

Среди атрибутов текстового поля также следует отметить такой атрибут как list . Он содержит ссылку на элемент datalist , который определяет набор значений, появляющихся в виде подсказки при вводе в текстовое поле. Например:

Отправить

Атрибут list текстового поля указывает на id элемента datalist. Сам элемент datalist с помощью вложенных элементов option определяет элементы списка. И при вводе в текстовое поле этот список отображается в виде подсказки.

Поле поиска

Для создания полей поиска предназначен элемент input с атрибутом type="search" . Формально он представляет собой простое текстовое поле:

Поле ввода пароля

Для ввода пароля используется элемент input с атрибутом type="password" . Его отличительной чертой является то, что вводимые символы маскируются точками: