Css textarea свойства: Трюки с textarea | CSS-Tricks по-русски – Тег | HTML справочник

Тег | HTML справочник

HTML теги

Значение и применение

Тег <textarea> представляет собой поле формы для создания области многострочного ввода (текстовая область). Основное отличие от тега <input> (пользовательское поле для ввода информации) заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер).

Текстовая область может содержать неограниченное количество символов, как правило, текст внутри нее отображается браузерами моноширинным шрифтом Courier (курьер).

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
autoсompleteon
off
Этот атрибут определяет, может ли значение элемента быть автоматически дополнено браузером (помощь пользователям в заполнении формы).
autofocusautofocusУказывает, что текстовая область должна автоматически получать фокус при загрузке страницы.
colsnumberОпределяет видимую ширину текстовой области (в символах). Значение по умолчанию 20 символов.
dirnametextareaname.dirОпределяет специальное имя поля формы, которое используется, чтобы указать направление текста в текстовой области, оно будет подставлено браузером автоматически и отправлено на сервер вместе с формой отправки.
disableddisabledЛогический атрибут, который указывает, что текстовая область должна быть отключена.
formform_idЗадает одну или несколько форм к которым элемент принадлежит.
maxlengthnumberУказывает максимальное количество символов, которое может содержаться в текстовой области (при достижении заданного числа символов дальнейший ввод невозможен).
minlengthnumberУказывает минимальное количество символов, которое может содержаться в текстовой области.
nametextОпределяет имя для текстовой области.
placeholdertextУказывает текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
readonlyreadonlyУказывает, что текстовая область доступна только для чтения.
requiredrequiredЛогический атрибут, который указывает, что текстовая область должна быть заполнена перед тем как форма будет отправлена.
rowsnumberОпределяет видимое количество строк в текстовой области (в символах). Значение по умолчанию 2 символа.
wraphard
soft
Определяет, как текст в текстовой области, должен быть перенесён, когда отправляется форма.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea  name = "auth_msg" rows = "10" cols = "45">Здесь Вы можете написать информацию для автора…</textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В данном примере мы создали текстовую область (HTML тег <textarea>), атрибутом name присвоили ей имя (name = "auth_msg"), атрибутом rows задали высоту строк равной десяти символам (rows = "10"), и атрибутом cols указали ширину поля равной 45 символов (cols = "45").

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit").

Результат нашего примера:

Текстовая область в HTML.

Отличия HTML 4.01 от HTML 5

В HTML 5 добавлены 6 новых атрибутов.

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML теги

Тег HTML текстовая область, многострочное поле

Тег <textarea> в HTML используется для создания многострочного поля для ввода, другими словами, текстовой области.

Текстовое поле для ввода, созданное с помощью тега <textarea>, не имеет ограничений по количеству вводимых символов.

Размеры textarea HTML регулируются с помощью атрибутов rows и cols. Атрибут тега <textarea> rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега <textarea> cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.

По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать <textarea> фиксированного размера, следует использовать CSS-правило resize: none;. Это отключит возможность растягивать область ввода.

Тег <textarea> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

<textarea>текст</textarea>

Примеры использования <textarea> в HTML коде

HTML код текстовой области <textarea>

<textarea name="message" cols="30" rows="4" placeholder="Введите сообщение"></textarea>

<textarea> с фиксированным размером (no resize textarea)

По умолчанию пользователь может изменять размер текстовой области <textarea> (растягивать область ввода за край).

Для того, чтобы запретить изменение размера <textarea> используйте CSS свойство resize. Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.

Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину <textarea> при фиксированной высоте, используйте значения horizontal.

Отображение в браузере:

HTML код <textarea> с фиксированной шириной и высотой

<style type="text/css"> 
textarea[name="details"] {
resize: none;
}
</style>
<textarea name="details" cols="30" rows="3" placeholder="Введите дополнительную информацию"></textarea>

Поддержка браузерами

Атрибуты тега textarea

Атрибут Значения Описание
autofocus не указывается / autofocus

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

cols
число

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

disabled не указывается / disabled

Логический атрибут. Если указан, делает текстовую область неактивной.

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

form id формы

Указывает на форму, к которой относится текстовая область. Используется, если <textarea> находится вне HTML кода формы.

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

maxlength число

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

name текст

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

placeholder текст

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

readonly не указывается / readonly

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

required не указывается / required

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

Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения.

rows число

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

wrap hard
soft

Определяет правила переноса строк:

Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина <textarea>. Для использования этого значения необходимо указать атрибут

cols.

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

Тег <textarea> также, поддерживает глобальные HTML атрибуты.

Атрибут rows тега | HTML справочник

HTML тег <textarea>

Значение и применение

Атрибут rows (HTML тега <textarea>) определяет видимую высоту текстовой области (в символах). Если атрибут указан, то его значение должно быть положительным целым числом. Значение по умолчанию 2 символа.


Обращаю Ваше внимание, что вы можете задавать значение высоты текстовой области не только в символах, но и с использованием CSS свойства height (в этом случае браузер будет игнорировать атрибут rows если он указан).


Ширину текстового поля в символах вы можете задать с использованием атрибута cols, а ширину с использованием единиц измерения - CSS свойством width.

Поддержка браузерами

Синтаксис:

<textarea rows =  "number">

Значения атрибута

ЗначениеОписание
numberЗадает высоту области текста в символах. Значение по умолчанию 2 символа.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута rows HTML тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea rows = "3">в
			ы
			с
			о
			т
			а</textarea>
			<textarea rows = "3" style = "height:100px">в
			ы
			с
			о
			т
			а</textarea><br>
			<input type = "submit" rows = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом rows мы задали видимую высоту текстовой области 3 символа. Для второй текстовой области мы задали высоту элемента 100 пикселей с использованием встроенного CSS (свойство height). Как вы можете заметить, при этом браузер начинает игнорировать значение атрибута rows.

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit").

Результат нашего примера:

Пример использования атрибута rows HTML тега <textarea> (высота элемента в символах).HTML тег <textarea>

resize | CSS | WebReference

Указывает, можно ли пользователю изменять размеры текстового поля.

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяК <textarea> или к любому элементу, у которого свойство overflow отличается от visible
АнимируетсяНет

Синтаксис

resize: none | both | horizontal | vertical

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

none
Размеры элемента не изменяются.
both
Можно изменять размеры элемента по горизонтали и вертикали.
horizontal
Можно изменять размеры элемента только по горизонтали.
vertical
Можно изменять размеры элемента только по вертикали.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>resize</title> <style> textarea { resize: both; } </style> </head> <body> <p>Потяните за правый уголок, чтобы изменить размер текстового поля.</p> <p><textarea cols="30" rows="7"></textarea></p> </body> </html>

Объектная модель

Объект.style.resize

Примечание

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

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Как отключить изменение размера свойства textarea с помощью CSS?

<!DOCTYPE html>

<html>

    <head>

        <title>Disable resize property</title>

        <style

            h2 {

                color:green;

            }

            body {

                text-align:center;

            }

            textarea {

                overflow:auto;

                resize:none;

                width:200px;

                height:100px;

            }

        </style>

    </head>

    <body>

        <h2>GeeksforGeeks</h2>

        <h3>Disable resize property</h3>

        <textarea>GeeksForGeeks: A computer science portal for 

        geeks. It is a good platform to learn programming.

        </textarea>

    </body>

</html>                    

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *