Многострочное поле для текста. — журнал «Доктайп»

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

<textarea name="feedback" rows="4" cols="50">
Замечательный сайт,
обязательно приду к вам ещё.
</textarea>

Атрибуты rows и cols определяют высоту и ширину поля.

Атрибуты тега <textarea>:

  • name — уникальное имя элемента.
  • cols — ширина поля в символах.
  • rows — высота поля в строках.
  • disabled — блокирует доступ и изменение элемента пользователем.
  • readonly — запретить ввод новых данных, но разрешить отправку на сервер.
  • required — поле обязательно для заполнения.
  • wrap — как обрабатывать переносы строк.
  • autocomplete — включает или выключает автозаполнение.
  • maxlength — максимальная длина текста.
  • minlength — минимальная длина текста.
  • placeholder — текст-подсказка для пользователей.

⚠️ Тег <textarea> не может быть использован внутри тегов <button> и <progress>.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Справочник по HTML

Основные HTML-теги в 2023 году.

  • 31 марта 2023

Глобальные атрибуты HTML

Список основных атрибутов, которые подойдут ко всему.

  • 29 марта 2023

<embed>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<code>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ruby>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

Тег textarea

HTML5CSS.
ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

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

<textarea rows=»4″ cols=»50″>
На Html5Css.ru вы узнаете, как сделать сайт. Мы предлагаем бесплатные учебники по всем технологиям веб-разработки.
</textarea>

Определение и использование

Тег <textarea> определяет многострочный элемент управления вводом текста.

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

Размер текстовой области может быть задан атрибутами COLS и Rows, или даже лучше; через свойства высоты и ширины CSS.

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

Элемент
<textarea>ДаДаДаДаДа

Различия между HTML 4,01 и HTML5

HTML5 добавил несколько новых атрибутов.

Атрибуты

= Новый в HTML5.

АтрибутЗначениеОписание
autofocusautofocusУказывает, что текстовая область должна автоматически получать фокус при загрузке страницы
colsnumberОпределяет видимую ширину текстовой области
dirnametextareaname.dirУказывает, что текстовое направление текстового поле будет отправлено
disableddisabledУказывает, что текстовая область должна быть отключена
formform_idУказывает одну или несколько форм, к которым относится Текстовая область
maxlengthnumberУказывает максимальное количество символов, разрешенных в текстовой области
nametextЗадает имя для текстовой области
placeholdertextЗадает краткую подсказку, описывающую ожидаемое значение текстовой области
readonlyreadonlyУказывает, что текстовая область должна быть только для чтения
requiredrequiredУказывает, что текстовая область обязательна/должна быть заполнена
rowsnumberУказывает видимое число строк в текстовой области
wraphard
soft		Указывает, как текст в текстовой области должен быть упакован при отправке в форме

Глобальные атрибуты

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

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

Тег <textarea> также поддерживает Атрибуты событий в HTML.

Похожие страницы

HTML DOM reference: Textarea Object

CSS Учебник: Styling Forms

Параметры CSS по умолчанию

Нет.

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html

таблица html
как сделать ссылку в html
html элементы

Copyright 2018-2020 HTML5CSS.ru

Правила и Условия Политика конфиденциальности О нас Контакты

тег textarea

Редактировать на GitHub

Убедитесь, что вы прочитали документ «Синтаксис тегов» и понимаете, как работает синтаксис атрибутов тегов.

Описание

Визуализировать HTML-тег textarea.

Атрибуты

Разрешены динамические атрибуты:
true
ключ доступа ложь ложь Строка Установите атрибут html accesskey для отображаемого элемента html
столбцы ложь ложь Целое число Атрибут столбцов HTML
cssClass ложь ложь Строка Класс CSS для элемента
cssErrorClass ложь ложь Строка Класс ошибок css для использования с элементом
cssErrorStyle
ложь		 ложь Строка Определения стилей ошибок css для использования элемента
cssStyle ложь ложь Строка Определения стилей css для элемента для использования
отключен ложь ложь Строка Установите атрибут html disabled для отображаемого элемента html
ошибкаПозиция ложь ложь Строка
Определить ошибочное положение элемента формы (верхнее|нижнее)
идентификатор ложь ложь Строка Атрибут идентификатора HTML
javascriptПодсказка ложь ложь ложь Булево значение Использовать JavaScript для создания всплывающих подсказок
ключ ложь ложь Строка Установите ключ (имя, значение, метку) для этого конкретного компонента
этикетка ложь ложь Строка Выражение метки, используемое для отображения метки, специфичной для элемента
labelPosition ложь ложь Строка Определить положение метки элемента формы (сверху/слева)
Разделитель этикеток ложь : ложь Строка Строка, которая будет добавлена ​​к метке
максимальная длина ложь ложь
Целое число		 Атрибут максимальной длины HTML
минимальная длина ложь ложь Целое число Атрибут минимальной длины HTML
имя ложь ложь Строка Имя для установки элемента
размытие ложь ложь Строка Установите атрибут html onblur для отображаемого элемента html
при обмене ложь
 ложь Строка Установите атрибут html onchange для отображаемого элемента html
по клику ложь ложь Строка Установить атрибут html onclick для отображаемого элемента html
ondblclick ложь ложь Строка Установите атрибут html ondblclick для отображаемого элемента html
онфокус ложь ложь Строка Установите атрибут html onfocus для отображаемого элемента html
нажатие клавиши ложь ложь Строка Установите атрибут html onkeydown для отображаемого элемента html
нажатие клавиши ложь ложь Строка Установите атрибут html onkeypress для отображаемого элемента html
onkeyup ложь ложь Строка Установите атрибут html onkeyup для отображаемого элемента html
при нажатии мыши ложь ложь Строка Установите атрибут html onmousedown для отображаемого элемента html
перемещение мыши ложь ложь Строка Установите атрибут html onmousemove для отображаемого элемента html
onmouseout ложь ложь Строка Установите атрибут html onmouseout для отображаемого элемента html
при наведении мыши ложь ложь Строка Установите атрибут html onmouseover для отображаемого элемента html
на мышке ложь ложь Строка Установите атрибут html onmouseup для отображаемого элемента html
по выбору ложь ложь Строка Установите атрибут html onselect для отображаемого элемента html
выполнитьClearTagStateForTagPoolingServers ложь ложь ложь Булево значение Очистить ли все состояние тега во время обработки doEndTag() (если применимо)
только чтение ложь ложь ложь Булево значение Является ли текстовая область доступной только для чтения
требуется Этикетка ложь ложь ложь Булево значение Если установлено значение true, отображаемый элемент укажет, что требуется ввод
требуетсяПозиция ложь ложь Строка Определить требуемое положение требуемого элемента формы (слева|справа)
строк ложь ложь Целое число Атрибут строк HTML
стиль ложь ложь Строка Определения стиля css для используемого элемента — это псевдоним атрибута cssStyle.
tabindex ложь ложь Строка Установите атрибут html tabindex для отображаемого элемента html
шаблон ложь ложь Строка Шаблон (отличный от стандартного) для использования для рендеринга элемента
шаблонКаталог ложь ложь Строка Каталог шаблонов.
тема ложь ложь Строка Тема (отличная от темы по умолчанию), используемая для рендеринга элемента
наименование ложь ложь Строка Установите атрибут заголовка html для отображаемого элемента html
всплывающая подсказка ложь ложь Строка Установите всплывающую подсказку для этого конкретного компонента
всплывающая подсказкаConfig ложь ложь Строка Устарело. Вместо этого используйте отдельные атрибуты конфигурации всплывающей подсказки.
всплывающая подсказкаCssClass ложь StrutsTT Classic ложь Строка Класс CSS применяется к всплывающим подсказкам JavaScrip
подсказкаЗадержка ложь Классический ложь Строка Задержка в миллисекундах перед отображением всплывающих подсказок JavaScript
всплывающая подсказкаIconPath ложь ложь Строка Путь к значку, используемый для изображения, которое будет иметь всплывающую подсказку
значение ложь ложь Строка Предустановить значение элемента ввода.
обертка ложь ложь Строка Атрибут переноса HTML

Пример

Copyright © 2000-2022 The Apache Software Foundation. Apache Struts, Struts, Apache, логотип Apache с перьями и логотипы проектов Apache Struts товарные знаки Apache Software Foundation. Все права защищены.

Дизайн логотипа и веб-сайта предоставлен SoftwareMill.

reactjs. Почему в React принимает атрибут значения, а в HTML — нет?

спросил

Изменено 2 года, 9 месяцев назад

Просмотрено 506 раз

Не уверен, что это специфично для React, но почему следующее работает в React и отображает некоторый текст в элементе:

, но в простом HTML это не так:

может я что-то упустил или сделал что-то глупое? Приносим свои извинения и заранее благодарим!

  • html
  • реакция
  • текстовое поле
1

В HTML область текста является несамозакрывающимся тегом и имеет содержимое. Он определяет свой текст детьми.

textarea