Textarea как изменить высоту

В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других элементов. Возможны значения:

textarea {
	resize: none;
	width: 400px;
	height: 150px;
}

textarea {
	min-width: 400px;
	max-width: 400px;
	max-height: 150px;
	min-height: 150px;
}

textarea {
	resize: horizontal;
	width: 400px;
	height: 150px;
}

textarea {
	width: 400px;
	height: 150px;
	max-height: 150px;
	min-height: 150px;
}

textarea {
	resize: vertical;
	width: 400px;
	height: 150px;
}

textarea {
	width: 400px;
	max-width: 400px;
	min-width: 400px;    
	height: 150px;
}

<div class="box">...</div>

.box {
	resize: both;
	display: inline-block;
	overflow: auto;
	min-width: 150px;
	min-height: 150px;
	
	background: url(/bg.jpg) 50% 50% no-repeat;
	background-size: cover;    
}

• Главная

• Вредные советы

Textarea — один из важных элементов полей для ввода, особенно для форм обратной связи при создании сайтов. Поэтому он рождает множество проблем для верстальщиков и программистов. Есть несколько особенных HTML свойств textarea. О них я и хочу поведать.

Размеры textarea

Начнем с первых и важных свойства textarea, а именно как задать размеры (высоту и ширину) текстового поля. Для этого есть два варианта. В первом варианте задаем cols (количество символов в строке) и rows (количество строк).

<textarea cols="30" rows="5"></textarea>

Или указывать размер в CSS свойствах:

textarea {
    width  : 450px;
    height : 120px;
}

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

Замещающий текст в HTML5

Существует новый атрибут в качестве части формы HTML5, называется placeholder. Это свойство textarea показывает текст приглушенно серым цветом (также работает для полей Input), который исчезает при наведении фокуса на поле или при вводе хотя бы одного символа в поле.

<textarea placeholder="Замещающий текст" cols="30" rows="5"></textarea>

Работает только в современных браузерах. Есть решение для всех браузеров, оно, конечно, не будет таким красивым. Для работы необходим JS.

<textarea cols="20" onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';">поиск...</textarea>

Обратите внимание, что значение должно быть одинаковым, иначе не будет работать.

Как убрать свечение у textarea?

Все webkit-браузеры, Firefox 3.6, все 10-е оперы навешивают голубую рамку (каемку) вокруг textarea, когда они находятся в фокусе. Вы можете удалить ее из браузера следующим образом:

textarea {
    outline : none;
}

Помните, что свечение textarea и полей для ввода текста является стандартом и важным элементом юзабилити сайта. Удаляя это оформление, вы создаете сложности для посетителя вашего сайта.

Как удалить маркер изменения размера у textarea?

Webkit-браузеры предлагают маленький элемент пользовательского интерфейса в правом нижнем углу textarea, при помощи которого пользователи могут изменить размеры текстового поля. Если по каким-либо причинам вы хотите удалить, то используем CSS:

textarea {
    resize : none;
}

Nowrap — убрать переносы

Чтобы текст автоматически не переносился, в CSS можно использовать #whatever { white-space: nowrap}. Но это описание не работает с textarea. Если вы хотите иметь возможность не переносить слова на новую строку в textarea, пока вы не нажмете Enter (будет возникать горизонтальная полоса прокрутки, а не срабатывает), вам придется использовать атрибут wrap=»off».

<textarea wrap="off" cols="30" rows="5"></textarea>

Как убрать полосу прокрутки textarea в Internet Explorer?

IE старых версий ставят вертикальную прокрутку по умолчанию на всех textarea. Вы можете спрятать его через overflow: hidden, но тогда вы не получите никакой прокрутки везде, когда текста станет больше, чем высота поля. Слава богу, overflow:auto удалит прокрутки, но включит прокрутку автоматически в случае необходимости.

textarea {
    overflow : auto;
}

Источник: Textarea tricks

Тег <textarea> произошел от английского выражения «text area» и означает «область текста». В HTML тег <textarea> применяется для создания текстового поля, где можно будет вводить текст с неограниченным количеством строк.

Тег <textarea> чем-то похож на тег <input>, но отличается от последнего тем, что его текстовое поле поддерживает форматирование. Например, если пользователь в <textarea> введет текст, выполняя переносы между строчками, тогда текст так и сохранится и в таком же формате передастся на сервер. Тег <input> такое сделать не может.

Проблема в том, что, когда вы обозначаете текстовое поле тегом <textarea>, само поле уже определяют высота и ширина, установленные по умолчанию. Однако эти размеры не всегда могут вас устраивать. Но благо есть способы их отредактировать.

Тег <textarea>: основные атрибуты, высота, размер, свойства

Тег <textarea> для собственной унификации может быть определен следующими атрибутами:

• «accesskey» — добавляет сочетание кнопок для перехода по текстовой области;

• «autofocus» — активирует фокус пользователя на текстовой области;

• «cols» — определяет ширину области в текстовых символах;

• «disabled» — используется для блокировки доступа к полю;

• «form» — налаживает связь с формой по ее идентификатору;

• «maxlength» — определяет максимальное количество символов, вмещаемых текстовым полем;

• «name» — определяет название текстовой области, которое необходимо для идентификации этой области;

• «placeholder» — определяет текст, который будет показан пользователю перед заполнением поля;

• «readonly» — накладывает ограничение на редактирование текстовой области пользователем, таким образом, пользователь не сможет ничего вписать в эту область;

• «required» — определяет, что текстовая область обязательна для заполнения;

• «rows» — определяет высоту области количеством вмещаемых строк;

• «tabindex» — определяет очередность перехода между элементами области, когда это делается с помощью клавиши «Tab»;

• и др.

Тег <textarea>: высота и ширина

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

•  встроенными атрибутами «cols» и «rows»;

•  CSS-свойствами «width» и «height».

Атрибут «cols» определяет ширину текстовой области, которая используется для ввода текста пользователем. В его значении указывается какое-то число. Это число будет определять количество видимых символов в горизонтальной плоскости. Таким образом, вы сможете, используя этот атрибут, контролировать ширину текстового поля, которая будет зависеть от количества видимых символов.

Атрибут «rows» определяет высоту текстовой области. В его значении указывается какое-то число. Это число будет означать количество видимых строк текста в вертикальной плоскости. Таким образом, вы сможете, используя этот атрибут, контролировать высоту текстового поля, которая будет зависеть от количества строк.

Синтаксис примера, как определяется высота и ширина текстовой области тега таким способом:

<textarea cols=»70″ rows=»7″> Область для текста</textarea>

CSS-свойства «width» и «height» не нужно представлять, так как с их помощью определяются ширина и высота всех HTML-элементов, а не только текстовая область. Тем не менее несколько слов об этих свойствах скажем, например:

• определить эти свойства можно тремя способами: в отдельном CSS-файле, в разделе «head» веб-страницы или в атрибутах;

• в качестве единиц измерения размеров высоты и ширины можно использовать любые допустимые значения;

• эти CSS-свойства будут иметь преимущества перед встроенными атрибутами тега, если одновременно использовать оба варианта обозначения размеров текстовой области.

Синтаксис такого способа выглядит так:

<textarea style=»width:400px; height:250px;»>Область для текста</textarea>

Заключение

Тег <textarea> определяет область для ввода текста. При этом размеры этого поля, такие как высота и ширина, можно определить самостоятельно несколькими способами.

Что такое textarea

Textarea это двойной тег в html.

Как обозначается textarea!?

В отличии от одинарного тега input, то textarea – это двойной тег…

Пример тега textarea

<textarea></textarea>

Результат вывода тега textarea

Как переводится textarea

Textarea — переводится, как Text — текст, area — поле, если соединить вместе, то Textarea можно перевести, как поле для текста…

Тип textarea type=»text»

Для textarea – указывать тип поля text(type=»text») не нужно!

Ширина и высота textarea

Ширину и высоту для textarea можно выразить несколькими способами и типами.

1). Использование в высоте и ширине textarea cols и rows

<textarea rows=»число» cols=»число»></textarea>

Обязательный атрибут для textarea rows + cols

Обязателен в HTML4, не обязателен в HTML5.

cols – столбец определяемый шириной моноширного(все буквы одной ширины) шрифта по умолчанию, rows — количество строк…

Значения

Любое целое положительное число.

Пример textarea rows + cols

<textarea rows=»5″ cols=»50″></textarea>

Результат:

2). Использование в высоте и ширине textarea пиксели

Не стану все меры расписывать(использую очень-очень редко): «em, vw, vh, vmin, vmax и функция calc» приведем пример использования пикселей в качестве единицы измерения:

<textarea style=»width: 500px; height: 50px;»></textarea>

Пример ширина и высота textarea в пикселях:

3). Использование в высоте и ширине textarea процентов

Использование в качестве единицы измерения процентов… поставим ширину 60% высоту 50%

Код:

<textarea style=»width: 100%; height: 50%;»></textarea>

Пример ширина и высота textarea в процентах:

Вопрос на засыпку! Почему в выше приведенном примере высота textarea в процентах никак не сработала!?

Вывод можете из ниже приведенного кода:

Пример 2 ширина и высота textarea в процентах:

Но если мы помести наш textarea в какой-то другой блок с явно выставленными размерами, то:

4). Растянуть textarea на всю ширину блока/страницы

Как растянуть textarea на всю ширину блока, страницы!? Если как мы выяснили, если ничего не препятствует растягиванию textarea на всю ширину блока/страницы, то просто ставим в ширину textarea 100%.

Пример textarea(<textarea style=»width: 100%;»></textarea>) с шириной на всю ширину блока/страницы

5). Растянуть textarea на всю высоту блока/страницы

На эту тему делал отдельную страницу

Как сделать подсказку внутри textarea

Для того, чтобы сделать подсказку внутри textarea нам потребуется атрибут placeholder, вставляем в первый тег textarea placeholder с текстом…

<textarea style=»width: 100%; height: 50px;» placeholder=»Подсказка внутри textarea»></textarea>

Подсказка внутри textarea пример:

Как убрать обводку textarea при нажатии/вводе

Для того, чтобы удалить обводку, при нажатии вводе данных в поле ввода textarea поставьте в стилях css, либо внутри поля поставьте свойство : outline:none;

<textarea style=»width: 100%; height: 50px; outline:none;» placeholder=»Подсказка внутри textarea»></textarea>

Пример удаления обводки в textarea

Как запретить растягивание textarea

Иногда требуется запретить растягивание textarea.

Как запретить растягивание по горизонтали textarea

Для того, чтобы запретить растягивание по горизонтали нужно указать, как растягивание возможно, если мы введем в стили resize: vertical;, то растягиваться textarea будет только по вертикали…

<textarea style=»width: 100%; height: 50px; outline:none; resize: vertical;» placeholder=»Как запретить растягивание по горизонтали»></textarea>

Пример textarea с запретом растягивания по горизонтали!

Как запретить растягивание по вертикали textarea

Для того, чтобы запретить растягивание по вертикали нужно выставить в каком направлении растягивать можно! Ставим в стили textarea resize: horizontal;

Пример textarea с запретом растягивания по вертикали!

Как запретить растягивание по всем направлениям textarea

Для того, чтобы запретить растягивание по всем направлениям, в стилях textarea ставим outline:none;

Пример textarea с запретом растягивания ппо всем направлениям textarea !

Как поставить textarea посередине страницы, блока

Для того, чтобы поставить textarea посередине, нужно в стили textarea добавить… margin: auto; display: block;

<textarea style=»width: 300px; height: 50px; outline:none; resize: none; margin: auto; display: block;» placeholder=»Как поставить textarea посередине страницы, блока»></textarea>

Пример как расположить textarea посередине страницы, блока

Как сделать в textarea внутренние отступы

Для того, чтобы сделать внутренние отступы в textarea нужно добавить в стили textarea padding: числоpx;, давайте на примере textarea сделаем внутренний отступ 20px

<textarea style=»width: 400px; height: 50px; outline:none; resize: none; margin: auto; display: block; padding: 20px;» placeholder=»Как сделать в textarea внутренние отступы»></textarea>

Пример textarea с внутренними отступами 20px

Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в padding ставим 4 значения и указываем, с какой стороны вам нужно сделать внутренний отступ!

padding: верхpx справаpx снизуpx слеваpx;
Если отступ с какой-то стороны не требуется ставим 0px

Как сделать в textarea наружные отступы

Для того, чтобы продемонстрировать наружные отступы, нам потребуется наш textarea поместить во внутрь другого блока… теперь уже данный блок поставим посередине и для div поставим display: table;, чтобы он не растягивался на всю ширину…

Пример как сделать в textarea наружные отступы

По аналогии с padding :

Если вам требуется сделать отступ с какой-то одной из четырех сторон, то вместо единичного значения в margin 4 значения и указываем, с какой стороны вам нужно сделать наружный отступ!

margin: верхpx справаpx снизуpx слеваpx;
Если отступ с какой-то стороны не требуется ставим 0px

Дополнительные вопросы о textarea

Иногда требуется короткий ответ на поставленный вопрос, который нашелся после анализа поисковых запросов…

Нужно ли указывать тип у textarea

Вопрос: «Нужно ли указывать тип у textarea«.

Ответ:
Нет.