HTML тег
❮ Назад Вперед ❯
Тег <textarea> используется для определения области, где пользователь может вводить многострочный текст. В отличие от тега <input>, где перенос строки в текстовом поле невозможен, в теге <textarea> допускаются переносы, они сохраняются при отправке данных на сервер.
Между открывающим <textarea> и закрывающим </textarea> тегами можно поместить любой текст, который будет отображаться моноширинным начертанием. В текстовое поле можно вводить любое количество символов.
Содержимое элемента заключается между открывающим (<textarea>) и закрывающим (</textarea>) тегами.
Для определения размера текстового поля можно использовать атрибуты cols и rows, или же использовать CSS свойстваheight и width. А с помощью CSS свойства resize можно запретить изменение размера текстового поля.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<form>
<textarea name="comment" rows="12" cols="35">Написать комментарий автору.![]()
</textarea><br>
<input type="submit" name="submitInfo" value="Отправить">
</form>
</body>
</html>Попробуйте сами!
Результат
В этом примере мы определили текстовую область тегом <textarea>, присвоили ей имя “comment”, использовав атрибут name; задали высоту строк (12 символов) атрибутом rows и указали ширину поля атрибутом cols (35 символов). Мы также разместили внутри формы кнопку, при нажатии на которую введенная информация отправляется на сервер.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Пример с использованием CSS стилей</p>
<textarea> Написать комментарий автору.
</textarea>
<br>
<input type="submit" name="submitInfo" value="Отправить">
</form>
</body>
</html>Попробуйте сами!
Результат
В этом примере мы использовали CSS стили для визуального оформления текстового поля.
Тег <textarea> поддерживает также глобальные атрибуты и атрибуты событий.
Как добавить стиль к тегу <textarea> ?
Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <textarea>:
- CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
- CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
- CSS свойство font-size задает размер щрифта.
- CSS свойство font-weight устанавливает насыщенность шрифта.
- CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
- CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цвет текста внутри тега <textarea>:
- CSS свойство color определяет цвет контента и оформления текста.
- CSS свойство background-color устанавливает фоновый цвет элемента.
Стили форматирования текста для тега <textarea>:
- CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
- CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
- CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
- CSS свойство word-break указывает перенос строки.
Другие свойства для тега <textarea>:
- CSS свойство text-shadow добавляет тень к тексту.
- CSS свойство text-align-last выравнивает последнюю строку текста.
- CSS свойство line-height устанавливает межстрочный интервал.
- CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
- CSS свойство word-spacing устанавливает расстояние между словами в тексте.
html — Как сделать размер шрифта в текстовой области таким же, как поле ввода в CSS?
спросил
Изменено 2 года, 5 месяцев назад
Просмотрено 4к раз
Размер шрифта в текстовой области в https://jsfiddle.net/Ljxwre2y/ меньше, чем в поле ввода, как сделать их одинакового размера?
тело {
семейство шрифтов: «Монсеррат»;
размер шрифта: 30px;
}
ввод, текстовое поле {
маржа: 0;
заполнение: 0;
ширина: 100%;
}
текстовая область {
семейство шрифтов: наследовать;
}
- html
- css
- размер шрифта
1
добавить размер шрифта в оба ввода, textarea
input, textarea {
размер шрифта: 30px;
}
Это то, что я обычно делаю, у меня всегда работает.
в теге body укажите семейство шрифтов и другие… например, размер шрифта .
html,
тело {
высота: 100%;
семейство шрифтов: «Source Sans Pro», моноширинный;
}
затем наследовать…
textarea,
вход,
выбирать {
размер шрифта: наследовать;
вес шрифта: наследовать;
текстовое оформление: нет;
семейство шрифтов: наследовать;
цвет: #19272D; /*ваш цвет ввода*/
}
0
Попробуйте это:
ввод, текстовая область {
маржа: 0;
заполнение: 0;
ширина: 100%;
семейство шрифтов: "Monsterrat";
размер шрифта: 30px;
}
Оба input и textarea не наследуют семейство шрифтов. Поэтому вам нужно установить свойство font-family либо на имя вашего шрифта, либо на наследовать ключевое слово .
Вы должны явно установить их в CSS, чтобы браузер не использовал значения по умолчанию.
ввод, текстовая область {размер шрифта: 14px;}
См. jsfiddle
input, textarea {font-size: 14px; семейство шрифтов: без засечек;}
Используйте приведенный выше код, чтобы сделать шрифты абсолютно одинаковыми (не только размер). См. jsfiddle
4
Вы можете использовать селектор ‘*’ для установки шрифтов, размера и семейства, тогда он будет применяться ко всем элементам на странице, например:
*
{
размер шрифта: 14px;
Семейство шрифтов: Arial;
}
Добавьте это как первую запись в свой css.
Зарегистрируйтесь или войдите
Зарегистрироваться через Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
9HTML-тег 0000 — GeeksforGeeksУлучшить статью
Сохранить статью
- Последнее обновление: 22 июл, 2022
Улучшить статью
Сохранить статью
Тег Значения атрибутов:
