Html многострочное поле ввода

Html многострочное поле ввода

273 Beginner [2011-06-07 11:23:00]

У меня есть этот ввод текста в форме:

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

Как сделать ввод больше похожим на текстовое поле?

5 ответов

465 Решение Ólafur Waage [2011-06-07 11:28:00]

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

50 Sté [2013-12-04 16:30:00]

Можно сделать многострочную текстовую вводную строку, присвоив ей атрибут word-break: break-word; . (Проверено только в Chrome)

Вы не можете. Единственный элемент HTML-формы, который был многострочным,

не оставляйте пробелов между открывающими и закрывающими тегами. Или Else. Это оставит несколько пустых строк или пробелов.

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

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

Синтаксис создания поля следующий.

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

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

Табл. 1. Атрибуты тега

Атрибут Описание cols Ширина поля в символах. disabled Блокирует доступ и изменение элемента. maxlength Максимальное число символов текста, которое можно ввести. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. readonly Устанавливает, что поле не может изменяться пользователем. rows Высота поля в строках текста. wrap Параметры переноса строк.
Читайте также:  Audio wizard windows 10

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

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

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

HTML5 IE Cr Op Sa Fx

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

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

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

Internet Explorer Opera
Chrome Firefox

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

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

HTML5 IE Cr Op Sa Fx

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

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

Речь пойдет о многострочном текстовом поле. И для его создания используется тег

. Данному тегу присущи такие атрибуты, как name и id. Они аналогичны атрибутам текстового поля.

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

С помощью атрибута cols можно указать ширину поля, которая измеряется в символах. Шириной символа принято считать определенное значение, называемое «усредненной шириной».

Читайте также:  Best photo перевод на русский

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

. Именно он и будет представлять собой значение по умолчанию.

На примере это выглядит вот так:

Результат в браузере:

Ссылка на основную публикацию
Adblock detector