Textarea CSS: настройка и стилизация текстовой области на вашем сайте
Textarea — это элемент HTML-форм, который позволяет пользователю вводить многострочный текст. CSS (Cascade Style Sheets) позволяет изменять внешний вид и оформление текстовых полей, включая textarea.
#myTextarea < width: 300px; /*ширина*/ height: 100px; /*высота*/ padding: 10px; /*внутренний отступ*/ border: 2px solid gray; /*рамка*/ border-radius: 5px; /*скругленные углы рамки*/ font-size: 16px; /*размер шрифта*/ color: #333; /*цвет текста*/ background-color: #f2f2f2; /*цвет фона*/ line-height: normal; /*межстрочный интервал*/ resize: vertical; /*разрешение изменения размера в вертикальном направлении*/ >
В примере выше мы определяем некоторые свойства для textarea с помощью CSS. Ширина и высота задают размеры поля в пикселях. Padding определяет внутренние отступы, которые позволяют отделить текст от границы поля. Border определяет толщину и цвет рамки вокруг поля. Border-radius позволяет скруглить углы рамки. Font-size задает размер шрифта внутри поля. Color определяет цвет текста в поле. Background-color задает цвет фона. Line-height задает межстрочный интервал. Resize разрешает изменение размера по вертикали.
Пример можно улучшить, добавив различные состояния элемента (наведение мыши, фокус и т.д.).
#myTextarea < width: 300px; height: 100px; padding: 10px; border: 2px solid gray; border-radius: 5px; font-size: 16px; color: #333; background-color: #f2f2f2; line-height: normal; resize: vertical; >#myTextarea:hover < background-color: #e6e6e6; /*изменение цвета фона при наведении*/ >#myTextarea:focus < box-shadow: 0 0 0 2px #87CEFA; /*добавление тени при фокусе*/ outline: none; /*убираем стандартную рамку фокуса*/ >
Также можно добавить другие свойства, такие как font-family, font-weight, text-align и другие, чтобы адаптировать textarea под дизайн страницы и достичь нужного визуального эффекта.
Как сделать чтобы textarea не растягивался
Тег (от англ. text area — область текста) это элемент формы для создания области, в которую можно вводить несколько строк текста. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.
Между тегами можно поместить любой текст, который будет отображаться внутри поля.
Демо¶
Синтаксис¶
1 2 3
textarea> текст textarea> Закрывающий тег обязателен.
Атрибуты¶
Включает или отключает автозаполнение.
Устанавливает фокус в поле формы.
Ширина поля в символах.
Параметр, который передаёт на сервер направление текста.
Блокирует доступ и изменение элемента.
Связывает поле с формой по её идентификатору.
Максимальное количество символов разрешённых в тексте.
Минимальное количество символов разрешённых в тексте.
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
Выводит подсказывающий текст.
Устанавливает, что поле не может изменяться пользователем.
Обязательное для заполнения поле.
Высота поля в строках текста.
Параметры переноса строк.
Также для этого элемента доступны универсальные атрибуты.
autocomplete¶
Этот атрибут помогает заполнить текстовое поле текстом, который был введён в нём ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
Синтаксис
textarea autocomplete="on | off">textarea> Значения
Включает автозаполнение текста.
Значение по умолчанию
Зависит от настроек браузера.
autofocus¶
Автоматически устанавливает фокус в текстовое поле. В таком поле можно сразу набирать текст без переключения курсора в текстовое поле.
Синтаксис
textarea autofocus> textarea> Значения
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
cols¶
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Синтаксис
textarea cols=""> textarea> Значения
Любое целое положительное число.
Значение по умолчанию
В HTML4 зависит от настроек браузера и операционной системы.
dirname¶
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (арабского, к примеру) значение будет rtl .
Синтаксис
textarea dirname="">textarea> Значения
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir .
Значение по умолчанию
disabled¶
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Заблокированный в поле текст не передаётся на сервер.
Синтаксис
textarea disabled>textarea> Значения
Значение по умолчанию
По умолчанию это значение выключено.
form¶
Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами .
Синтаксис
textarea form=""> textarea> Значения
Идентификатор формы (значение атрибута id элемента ).
Значение по умолчанию
maxlength¶
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
textarea maxlength=""> textarea> Значения
Любое целое положительное число.
Значение по умолчанию
minlength¶
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
Синтаксис
textarea minlength="">textarea> Значения
Любое целое положительное число.
Значение по умолчанию
name¶
Определяет уникальное имя элемента . Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.
Синтаксис
textarea name=""> textarea> Значения
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
placeholder¶
Выводит подсказывающий текст внутри текстового поля, который исчезает при получении фокуса или наборе текста. В качестве подсказки обычно применяется короткий текст, состоящий из одного слова или фразы.
Синтаксис
textarea placeholder=""> textarea> Значения
Значение по умолчанию
readonly¶
Когда к элементу добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. Также содержимое поле можно выделить и скопировать в буфер обмена.
Синтаксис
textarea readonly>textarea> Значения
Значение по умолчанию
По умолчанию это значение выключено.
required¶
Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
Синтаксис
textarea required> textarea> Значения
Значение по умолчанию
По умолчанию атрибут required выключен.
rows¶
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
Синтаксис
textarea rows="">textarea> Значения
Любое целое положительное число.
Значение по умолчанию
В HTML4 зависит от настроек браузера и операционной системы.
wrap¶
Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введённых символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.
Синтаксис
textarea wrap="soft | hard"> textarea> Значения
Слова в текстовом поле переносятся механически, если они не поместились в размер области, но при отправке на сервер переносы не сохраняются.
Длинный текст, который самостоятельно не помещается в поле по ширине, автоматически переносится на новую строку и вместе с переносами отправляется на сервер. Для работы требуется наличие атрибута cols .
Значение по умолчанию
Спецификации¶
- WHATWG HTML Living Standard
- HTML 5
- HTML 4.01 Specification
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html> head> meta charset="utf-8" /> title>TEXTAREAtitle> head> body> form action="textarea1.php" method="post"> p>b>Введите ваш отзыв:b>p> p> textarea rows="10" cols="45" name="text" >textarea> p> p>input type="submit" value="Отправить" />p> form> body> html> Изменение размеров textarea и других элементов
В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других элементов. Возможны значения:
| none | Запрещено изменять размеры |
| both | Можно изменять размеры |
| horizontal | Только по горизонтали |
| vertical | Только по вертикали |
| inherit | Наследует значение родителя |
Запретить растягивание
resize: none – запрещает растягивание textarea и убирает уголок ресайза.
HTML: Textarea
Часто мы хотим дать пользователю возможность набрать не одну строчку текста, а сразу несколько. Например, если пользователь хочет оставить отзыв. Для этого используется элемент , позволяющий вводить несколько строчек текста.
Оставьте свой отзыв
Заметьте, что является парным тегом. Это означает, что вы можете вложить в него текст по умолчанию, чтобы пользователь быстрее понял, что ему необходимо ввести.
По умолчанию высота и ширина зависит от настроек браузера. Это значит, что в разных браузерах высота и ширина может меняться. Для того, чтобы установить одинаковое значение, используются атрибуты rows и cols , означающие количество строк и столбцов соответственно.
Задание
Создайте форму, у которой файл с обработчиком данных лежит по адресу /people . Внутри формы создайте поле для многострочного ввода. Количество строк для ввода: 4. Количество столбцов: 30
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.