Элемент textarea

Элемент textarea HTML — это поле для ввода текста, состоящего из нескольких строк, и его редактирования. Он используется для ввода и редактирования длинных фрагментов текста.

Содержимое этого элемента представляет его исходное значение. Оно отображается в текстовом поле после загрузки документа или после нажатия кнопки сброса в форме.

Примеры

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

В отличие от поля для ввода однострочного текста элемент textarea использует начальное значение в качестве содержимого ( вместо атрибута value ):

Ширина HTML input textarea вычисляется относительно ширины символа используемого шрифта. Так как символы не всегда имеют одинаковую ширину, то браузеры могут использовать различные методы, чтобы округлить это значение:

Соответствие minlength проверяется только при отправке данных формы, а в maxlength браузеры проверяют, чтобы пользователь не ввел больше символов, чем указано через этот атрибут.

Атрибут maxlength элемента textarea HTML хорошо поддерживается браузерами, а minlength – нет:

Поддержка браузерами атрибута является неполной. Чтобы обеспечить этот функционал во всех браузерах, придется использовать скрипты.

Атрибуты

Специальные атрибуты

autocomplete

Указывает браузеру, должен ли он автоматически предлагать варианты при вводе данных для этого элемента управления, пытаясь угадать, что пользователь печатает. Для данного атрибута элемента HTML textarea допустимы два значения, они не чувствительны к регистру:

• on: браузер должен предлагать варианты автоматически. Это значение по умолчанию;
• off: браузер не должен предлагать варианты автоматически.

autofocus

Логическое значение, указывающее браузеру установить фокус ввода на элементе управления после завершения загрузки документа или при открытии диалогового окна, в котором отображается элемент управления. Если атрибут имеет значение « autofocus «, пустую строку ( » « ), то элемент управления будет находиться в фокусе ввода сразу после загрузки страницы или диалогового окна.

Ширина элемента управления, задаваемая через количество символов исходя из ширины литер текущего шрифта. Так как символы не всегда имеют одинаковую ширину, браузеры могут использовать различные методы, чтобы округлить это значение.

Значение, указанное в этом атрибуте тега textarea в HTML должно быть целым числом больше нуля. Если значение отсутствует или имеет некорректный формат, атрибуту будет присвоено значение по умолчанию — 20 .

dirname

Название нового поля, предназначенного для передачи направления ввода текста. Этот атрибут, введенный в HTML5 , позволяет авторам корректно обрабатывать значения, вводимые на языках с различным направлением письма. Для этого добавляется отдельное поле, заполняемое вместе с формой. Название поля будет выступать в качестве значения атрибута.

Так как этот атрибут textarea HTML является относительно новым, он не полностью поддерживается браузерами. Разработчики должны проверять поддержку браузерами при получении данных на стороне сервера.

disabled

Логическое значение, указывающее отключен ли данный элемент управления или нет. Если атрибут принимает значение « disabled » или пустую строку ( «» ), то элемент управления отключен.

Отключенные элементы управления при отображении формы неактивны, блокируются от взаимодействия с пользователем и их значения ( если таковые имеются ) не передаются при отправке данных формы.

Значение атрибута идентификатора формы, с которой HTML input textarea связан.

Этот атрибут является новым и был введен в HTML5 . Он помогает определить принадлежность элементов управления во вложенных или разделенных формах.

inputmode

Указывает, какой способ ввода является наиболее приемлемым для пользователей. Существует двенадцать возможных значений, не чувствительных к регистру:

• verbatim : алфавитно-цифровой ввод на латинице текста, такого как имена пользователей, пароли, коды товаров и т.д.;
• latin : ввод на латинице на предпочтительном для пользователя языке с подключением вспомогательных средств, таких как автоматическое заполнение. Предназначен для передачи данных от пользователей компьютеру. Например, через форму поиска;
• latin-name : ввод на латинице на предпочтительном для пользователя языке, с подключением некоторых вспомогательных средств. Таких, как автоматическое заполнение предлагаемых имен из списка контактов и автоматическая установка регистра;
• latin-prose : ввод для передачи данных от человека человеку с автоматическим заполнением предлагаемого текста и автоматической расстановкой заглавных букв в начале предложений;
• full-width-latin : ввод на латинице на втором языке пользователя, с подключением вспомогательных средств для ввода символов в полном размере и передачи данных от человека человеку, таких как автоматическое заполнение предлагаемого текста и расстановка заглавных букв в начале предложений;
• kana : ввод на кана или ромадзи, стандартный ввод на хирагана, использующий ввод символов в полном размере с поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
• kana-name : то же самое, что и « kana «, но с подключением вспомогательных средств для ввода человеческих имен из списка контактов;
• katakana : ввод на катакана с использованием символов и поддержкой преобразования в кандзи. Предназначен для ввода текста на японском языке;
• numeric : ввод цифр, включая клавиши для цифр от 0 до 9 , с использованием указанного символа, разделяющего тысячи и символа для отрицательных чисел. Рекомендуется для элемента ввода цифр;
• tel : ввод номеров телефонов, включая клавиши цифр от 0 до 9 , символа « # » и символа « * «. В некоторых локальных зонах это значение атрибута HTML textarea может включать буквенные мнемонические метки. Рекомендуется для элемента ввода номера телефона;
• email : ввод текста в локали пользователя с использованием клавиш для ввода адреса электронной почты. Например, символов « @ » и « . «. Рекомендуется для элемента ввода адреса электронной почты;
• url : ввод текста в локали пользователя с использованием клавиш для ввода адресов. Например, символов « / » и « . «, а также для быстрого ввода частей доменных имен, таких как « www .» или « .co.uk «. Рекомендуется для элемента управления ввода URL-адреса .

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

maxlength

Целое число, указывающее максимальное количество символов, которое может содержать значение элемента управления.

Разработчики не должны полагаться на атрибут textarea HTML maxlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

minlength

Целое число, указывающее минимальное количество символов, которое может содержать значение элемента управления.

Разработчики не должны полагаться на атрибут minlength . Пользователи могут отправить данные формы через браузер, не поддерживающий эту функцию.

Поддержка браузерами атрибута minlength является крайне слабой. Лучше не полагаться на этот атрибут, пока его поддержка не улучшится.

Имя тега textarea в HTML . Оно будет отправлено браузером обработчику, связанному с содержимым элемента. Они вместе будут соответствовать паре имя-значение, которая используется для обработки данных формы.

placeholder

Текст подсказки, как должно быть заполнено поле ( пример или краткое описание ). Браузеры могут отображать содержимое атрибута в элементе управления, хотя он не имеет никакого значения. Когда пользователь начинает вводить собственный текст, подсказка должна удаляться из элемента управления.

readonly

Логическое значение, указывающее браузеру запретить пользователю изменять значение элемента управления. Если атрибут имеет значение « readonly » или пустую строку ( «» ), то пользователю запрещено изменять значение в элементе управления.

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

required

Логическое значение, указывающее на то, может ли данный элемент управления оставаться незаполненным. Если атрибут имеет значение « required » или пустую строку ( «» ), то пользователь должен заполнить элемент управления, чтобы отправить данные формы.

Если HTML input textarea с атрибутом required не заполнен, то при попытке пользователя отправить данные формы, браузер выдаст ошибку и отменит отправку данных.

Поддержка браузеров для атрибута required является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить данный функционал во всех браузерах.

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

Значение, указанное в этом атрибуте тега textarea в HTML , должно быть целым числом больше нуля. Если значение отсутствует или имеет неправильный формат, то для атрибута будет назначено значение по умолчанию — 2 .

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

• soft : текст не будет переноситься при отправке данных формы, но он может переноситься при отображении. Это значение по умолчанию;
• hard : текст будет переноситься при отправке данных формы с помощью добавления новых строк. Таким образом длина текста не превысит ширину фрейма.

Это относительно новый атрибут textarea HTML , его поддержка является неполной. Разработчикам придется полагаться на скрипты, чтобы обеспечить этот функционал во всех браузерах.

HTML.Textarea Values in MVC Razor View

It is hard for me to clearly state the problem I am having. I am trying to understand how to retain values in form fields created in a loop after validation fails. I have a more complicated real world form that has a bunch of elements created in the loop and validation. I have reduced it to a simple example included below.

When validation fails I would like the textareas named «Comment» that have been created in the loop to retain the values that are shown in the Pre-Submit image below.

When I debug the form submission, the values from each of the fields are successfully connected to the IList variable named Comment found in the Model. This is what I want so I can loop through and locate them based on index.

After submitting, each textarea produced by the loop shows the comma separated representation of the IList variable Comment in the Model. It appears that the field in the view and in the model are connecting because they share a name. They connect properly on the way in but not on the way out. I would like the view to only show the value associated with the Comment[i] instead of the entire list so that the values remain constant between form submissions.

Screenshots and Sample Code Below
First Load:

Pre-Submit Form Changes:

Form as seen after first submit:

Form as seen after second submit:

Model Code

View Code

Controller Code