Input html textarea: Тег | htmlbook.ru — Вебджем.рф | Создание и продвижение сайтов

Содержание

| WebReference

<textarea> представляет собой элемент формы для создания области, в которую можно вводить несколько строк текста. В отличие от элемента <input> в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.

Между тегами <textarea> и </textarea> можно поместить любой текст, который будет отображаться внутри поля.

Поле с исходным текстом

Синтаксис

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

Атрибуты

autocomplete: Включает или отключает автозаполнение.
autofocus: Автоматическое получение фокуса.
cols: Ширина поля в символах.
dirname: Параметр, который передаёт на сервер направление текста.
disabled: Блокирует доступ и изменение элемента.
form: Связывает текстовое поле с формой по её идентификатору.
maxlength: Максимальное число введённых символов.
minlength: Минимальное число введённых символов.
name: Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
placeholder: Добавляет подсказывающий текст.
readonly: Устанавливает, что поле не может изменяться пользователем.
required: Обязательное для заполнения поле.
rows: Высота поля в строках текста.
wrap: Параметры переноса строк.

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

Пример

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>TEXTAREA</title> </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>

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

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Рекомендация
HTML 4. 01 Specification	Рекомендация

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

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

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.

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

Браузеры


3	12	1	3. 5	1	1


1	1	6	1

Браузеры

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

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

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

Формы

См. также

resize
Многострочное текстовое поле

Рецепты

Как запретить изменение размеров <textarea>?
Как сделать, чтобы в текстовом поле заранее выводился опредёленный текст?

Практика

Многострочный текст
Размеры <textarea>

Элементы HTML

Атрибуты

Значения

Типы элементов

Аудио и видео

Документ

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Формы

Фреймы

— HTML — Дока

Кратко

Скопировано

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

Пример

Скопировано

<label for="story">Расскажите о себе:</label><textarea name="story" rows="5" cols="33">Frontend-разработчик со стажем</textarea>
          
 <label for="story">Расскажите о себе:</label>
<textarea name="story" rows="5" cols="33">Frontend-разработчик со стажем</textarea>

Открыть демо в новой вкладке

Как понять

Скопировано

На сайтах часто встречаются формы, где нужно писать многострочный текст. Например, когда нужно оставить комментарий, написать отзыв или статью. Для этих целей используется многострочное поле ввода, которое верстается тегом <textarea>. Нужно отметить, что в этом поле можно писать только чистый текст. Панели стилизации текста, как в Ворде, являются дополнительными надстройками с использованием JavaScript.

Атрибуты

Скопировано

autocomplete

Скопировано

Атрибут, указывающий, нужно ли поле заполнять автоматически сохранёнными в браузере значениями. Полезно использовать, если одна и та же форма потенциально будет часто отправляться с одинаковыми значениями.

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

on — поле будет автоматически заполняться значением, сохранённым в браузере во время предыдущей отправки формы

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

Если атрибут не указать совсем, то браузер будет брать значение из атрибута autocomplete родительского элемента <form>, либо — если родительской формы нет — из той формы, на id которой ссылается атрибуте form.

<textarea autocomplete="off"></textarea>
          <textarea autocomplete="off"></textarea>

autofocus

Скопировано

Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён в данное поле ввода.

<textarea autofocus></textarea>
          <textarea autofocus></textarea>

cols

Скопировано

Задаёт ширину поля ввода в символах. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию берётся как 20

Открыть демо в новой вкладке

disabled

Скопировано

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

Открыть демо в новой вкладке

При отправке формы значения из disabled-полей не будут отправлены.

form

Скопировано

Атрибут указывает на элемент <form>, с которым связано поле ввода. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то <textarea> обязательно должен находиться внутри тега form>. Но если задать атрибут, то нахождение внутри формы не обязательно и <textarea> может находиться в любом месте страницы.

maxlength

Скопировано

Максимальное число символов в поле (включая пробелы и переводы строк), которое может вводить пользователь. Значением должно быть положительное целое число

Открыть демо в новой вкладке

minlength

Скопировано

Минимальное число символов, которое должен ввести пользователь. Этот атрибут используется при валидации поля перед отправкой формы.

name

Скопировано

Имя поля. При отправке формы значение атрибута name будет ключом в отправляемом объекте

placeholder

Скопировано

Подсказка для пользователя, что вводить в этом поле. Если подсказка должна быть многострочной, то можно прямо в HTML-коде переносить строки

Открыть демо в новой вкладке

Плейсхолдер должен давать только подсказку о том, как надо заполнять поле. Но это не полноценная замена тегу <label>. Если на макете у полей ввода есть только плейсхолдер, но нет лейблов, то поговорите с дизайнером 😉

readonly

Скопировано

Атрибут булевого типа. Если он задан, то пользователь не может редактировать текст в поле, но по-прежнему может с ним взаимодействовать: кликать, копировать текст. При отправке формы значение поля будет отправлено как обычно.

required

Скопировано

Атрибут булевого типа. Указывает, должно ли поле обязательно быть заполнено. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку

rows

Скопировано

Задаёт высоту поля ввода в строках. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию высота задаётся равной двум строкам.

Открыть демо в новой вкладке

spellcheck

Скопировано

Атрибут указывает, должна ли быть включена проверка правописания в поле. Может принимать следующие значения:

true — проверка правописания включена

default — указывает на поведение по умолчанию. При этом значении поле ввода может наследовать значение аналогичного атрибута от родительских элементов.

false — проверка правописания выключена

wrap

Скопировано

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

hard — когда форма отправляется, то браузер, основываясь на значении атрибута cols добавляет в текст служебные символы переноса строки (CR+LF). Таким образом, сохраняется информация о переносах строк, сделанных пользователем в поле ввода.

soft — значение по умолчанию. При отправке формы символы переноса строк добавлены не будут, и текст будет отправлен одной длинной строкой

Подсказки

Скопировано

💡 Поле <textarea> стилизуется так же, как и поле ввода <input>. К нему применимы все свойства блочной модели.

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

Тег HTML textarea

❮ Назад Полный справочник HTML Далее ❯

Пример

Элемент управления многострочным вводом текста (текстовая область):

Отзыв W3Schools:

<br/> На w3schools.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/advancedcustomfields.com/wp-content/uploads/2011/12/textarea-options.png' /><noscript><img loading='lazy' src='/800/600/http/advancedcustomfields.com/wp-content/uploads/2011/12/textarea-options.png' /></noscript> com вы узнаете, как создать веб-сайт. Они предлагают бесплатные учебные пособия по всем технологиям веб-разработки. <br/><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> </текстовое поле> </p> <p data-readability-styled="true"> Попробуйте сами » </p> <p> Дополнительные примеры «Попробуйте сами» ниже. </p> <hr/> <h3><span class="ez-toc-section" id="i-17"> Определение и использование </span></h3> <p> Тег <code> <textarea> </code> определяет элемент управления многострочным вводом текста. </p> <p> Элемент <code> <textarea> </code> часто используется в форме для сбора пользовательских данных. как комментарии или обзоры. </p> <p> Текстовая область может содержать неограниченное количество символов, а текст отображается шрифтом фиксированной ширины (обычно Courier). </p> <p> Размер текстовой области определяется <code> столбцами </code> и <code> строки </code> атрибута (или с помощью CSS). </p> <p> Атрибут <code> имя </code> необходим для ссылки данные формы после отправки формы (если вы опустите <code> атрибут name </code>, данные из текстовой области отправляться не будут). </p> <p> Атрибут <code> id </code> необходим для связывания текстовая область с меткой.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/y79Rt.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/y79Rt.png' /></noscript><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744004-3";} else{var rtbBlockID="R-A-744004-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </p> <p> <strong> Совет: </strong> Всегда добавляйте тег <label> для лучших практик доступности! </p> <hr/> <h3><span class="ez-toc-section" id="i-18"> Поддержка браузера </span></h3> <table> <tr> <th> Элемент </th> <th title="Chrome"/> <th title="Internet Explorer / Edge"/> <th title="Firefox"/> <th title="Safari"/> <th title="Opera"/> </tr> <tr> <td> <текстовое поле> </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> <td> Да </td> </tr> </table> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-19"> Атрибуты </span></h3> <table> <tr> <th> Атрибут </th> <th> Значение </th> <th> Описание </th> </tr> <tr> <td> автофокус </td> <td> автофокус </td> <td> Указывает, что текстовая область должна автоматически получать фокус при загрузке страницы </td> </tr> <tr> <td> столбцы </td> <td> <i> номер </i> </td> <td> Задает видимую ширину текстовой области </td> </tr> <tr> <td> имя каталога </td> <td> <i> textareaname </i> .dir </td> <td> Указывает, что будет отправлено направление текста текстовой области.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/eq5sb.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/eq5sb.png' /></noscript><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center> </td> </tr> <tr> <td> отключен </td> <td> отключен </td> <td> Указывает, что текстовая область должна быть отключена </td> </tr> <tr> <td> форма </td> <td> <i> form_id </i> </td> <td> Указывает, к какой форме относится текстовая область. </td> </tr> <tr> <td> максимальная длина </td> <td> <i> номер </i> </td> <td> Задает максимально допустимое количество символов в текстовой области </td> </tr> <tr> <td> имя </td> <td> <i> текст </i> </td> <td> Указывает имя для текстовой области </td> </tr> <tr> <td> заполнитель </td> <td> <i> текст </i> </td> <td> Задает короткую подсказку, описывающую ожидаемое значение текстовой области </td> </tr> <tr> <td> только чтение </td> <td> только для чтения </td> <td> Указывает, что текстовая область должна быть доступна только для чтения </td> </tr> <tr> <td> требуется </td> <td> требуется </td> <td> Указывает, что текстовая область обязательна/должна быть заполнена </td> </tr> <tr> <td> строк </td> <td> <i> номер </i> </td> <td> Задает видимое количество строк в текстовой области </td> </tr> <tr> <td> обертка </td> <td> жесткий <br/> мягкий </td> <td> Указывает способ переноса текста в текстовой области при отправке в форме </td> </tr> </table> <hr/> <h3><span class="ez-toc-section" id="i-20"> Глобальные атрибуты </span></h3> <p> Тег <code> <textarea> </code> также поддерживает глобальные атрибуты в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/4.bp.blogspot.com/-tGpewynHvH4/UklufN7qnFI/AAAAAAAAASc/YdQZ_ni_kWY/s1600/32.jpg' /><noscript><img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-tGpewynHvH4/UklufN7qnFI/AAAAAAAAASc/YdQZ_ni_kWY/s1600/32.jpg' /></noscript> </p> <hr/> <h3><span class="ez-toc-section" id="i-21"> Атрибуты событий </span></h3> <p> Тег <code> <textarea> </code> также поддерживает атрибуты событий в HTML. </p> <hr/> <h3><span class="ez-toc-section" id="i-22"> Дополнительные примеры </span></h3> <h4><span class="ez-toc-section" id="i-23"> Пример </span></h4> <p> Отключить параметр изменения размера по умолчанию: </p> <p data-readability-styled="true"> <html> <br/> <head> <br/> <br/> </head> <br/> <body> </p> <p> <label for="w3review">Отзыв W3Schools:</label> </p> <p> <textarea name="w3review" rows="4" cols="50"> <br/> At w3schools.com вы узнаете, как сделать сайт. Они предлагают бесплатные уроки во всех технологиях веб-разработки. <br/>

Попробуйте сами »

Связанные страницы

Ссылка HTML DOM: Textarea Object

Учебное пособие по CSS: стилизация форм

Настройки CSS по умолчанию

Нет.

❮ Предыдущий Полный справочник HTML Следующий ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.

CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

2 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Более 1 строки в

спросил 10 лет, 4 месяца назад

Изменено 11 месяцев назад

Просмотрено 363 тыс. раз

У меня проблемы с получением , чтобы иметь более 1 строки,

Я попытался добавить свойства в html, как вы сделали бы с обычным следующим образом:

Я даже пытался сделать это в CSS, но не получилось. Я искал по всему Интернету решение, но нигде не могу найти тему, касающуюся моей точной проблемы.

Текстовые области, с которыми я столкнулся, находятся на этом веб-сайте: Вильдухельст

Когда вы нажмете кнопку «Lav dit eget dilemma», они появятся.

Я ищу решение для HTML или CSS.

ввод
текстовое поле
строки
строки

Почему бы не использовать тег </code>? </p><pre> <textarea rows="10" cols="70">

5

  Хотя    игнорирует атрибут  rows , вы можете воспользоваться тем фактом, что   </code> не обязательно находиться внутри тегов <code> <form> </code>, но все же может быть частью form, ссылаясь на идентификатор формы: </p><pre> <form method="get">
    <тип ввода = "отправить" />
</форма>
<textarea form ="testformid" name="taname" cols="35" wrap="soft">
 Конечно,   </code> теперь отображается под кнопкой «Отправить», но, возможно, вы найдете способ изменить его положение.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/img.youtube.com/vi/kZz3PGuR98o/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/img.youtube.com/vi/kZz3PGuR98o/hqdefault.jpg' /></noscript>  </p> <p data-readability-styled="true">




            1
     </p> <p> Как сказал <em> Sparky </em> в комментариях ко многим ответам на этот вопрос, <strong> НЕТ </strong> какого-либо значения <code> textarea </code> для атрибута <code> type </code> тега <code> input </code>. </p> <p> На других условиях следующая разметка <strong> недействительна </strong> : </p><pre> <input type="textarea" />
 </pre><p> И браузер заменяет его на <strong> по умолчанию </strong> : </p><pre> <input type="text" />
 </pre><p> <strong> Чтобы определить многострочный ввод текста, используйте: </strong> </p><pre> <textarea>
 Дополнительные сведения см. в документации по элементу  textarea . 
  Тег input не поддерживает атрибуты rows и cols. Вот почему лучшей альтернативой является использование текстового поля с атрибутами rows и cols. Вы все еще можете добавить атрибут «имя», а также есть полезный атрибут «обертка», который может очень хорошо пригодиться в различных ситуациях.

Input html textarea: Тег | htmlbook.ru

| WebReference

Синтаксис

Атрибуты

Пример

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

Браузеры

См. также

Рецепты

Практика

Элементы HTML

Атрибуты

Значения

Типы элементов

— HTML — Дока

Кратко

Пример

Как понять

Атрибуты

Подсказки

Тег HTML textarea

Пример

Связанные страницы

Настройки CSS по умолчанию

ВЫБОР ЦВЕТА

Лучшие учебники

Основные ссылки

Более 1 строки в

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

Рубрики