Html textarea: Тег | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Тег — поле для ввода текста

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

Описание

HTML тег <textarea> определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.

По умолчанию поле ввода элемента <textarea>, при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера <textarea>, то нужно прописать CSS свойство resize со значением none в атрибуте style, в этом случае получится запретить растягивать только данное поле ввода:


<textarea></textarea>

Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:


textarea { resize: none; }

Размер текстового поля, заданный по умолчанию, может в разных браузерах быть разным. Для указания нужного размера можно воспользоваться атрибутами

rows и cols или изменить ширину и высоту элемента с помощью CSS.

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

Атрибуты

autofocus:

Указывает, что элемент <textarea> автоматически получит фокус после загрузки страницы. Возможные значения логического атрибута autofocus


<textarea autofocus>
<textarea autofocus="autofocus">
<textarea autofocus="">

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.

cols:

Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию — 20.

disabled:

Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled:


<textarea disabled>
<textarea disabled="disabled">
<textarea disabled="">

form:

Определяет форму с которой связан элемент <textarea>. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается браузером Internet Explorer.

maxlength:

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

Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.

name:

Определяет имя для элемента.

placeholder:

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

Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.

readonly:

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


<textarea readonly>
<textarea readonly="readonly">
<textarea readonly="">

required:

Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.

Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.

rows:

Указывает положительное целое число, определяющее высоту текстового поля (единицей измерения выступает высота строки). Если атрибут не указан, то используется значение по умолчанию — 2.

wrap:

Определяет параметры переноса строк в тексте, при отправке данных на сервер:

hard — браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols.
soft — текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.

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

Стиль по умолчанию

Нет.

Пример


<textarea rows="3" cols="40">
  Здесь могла быть ваша реклама :)
</textarea>

Результат данного примера в окне браузера:

Тег HTML текстовая область, многострочное поле

Рейтинг: 4 из 5, голосов 16

28 декабря 2019 г.

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

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

Размеры textarea HTML регулируются с помощью атрибутов rows и cols. Атрибут тега <textarea> rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега <textarea> cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.

По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край.

Если нужно сделать <textarea> фиксированного размера, следует использовать CSS-правило resize: none;. Это отключит возможность растягивать область ввода.

Тег <textarea> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

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

Примеры использования <textarea> в HTML коде

HTML код текстовой области <textarea>

<textarea name="message" cols="30" rows="4" placeholder="Введите сообщение"></textarea>

<textarea> с фиксированным размером (no resize textarea)

По умолчанию пользователь может изменять размер текстовой области <textarea> (растягивать область ввода за край).

Для того, чтобы запретить изменение размера <textarea> используйте CSS свойство resize. Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.

Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину <textarea> при фиксированной высоте, используйте значения horizontal.

Отображение в браузере:

HTML код <textarea> с фиксированной шириной и высотой

<style type="text/css"> 
textarea[name="details"] { 
resize: none; 
} 
</style>
<textarea name="details" cols="30" rows="3" placeholder="Введите дополнительную информацию"></textarea>

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

Тег
<textarea>	Да	Да	Да	Да	Да

Атрибуты тега textarea

Атрибут	Значения	Описание
autofocus	не указывается / autofocus	Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область.
cols	число	Определяет ширину текстовой области. Ширина области рассчитывается в пикселях как ширина символа, умноженная на значение этого атрибута. Значение приблизительно равняется количеству символов моноширинного шрифта, которые должны занимать полную строку в текстовой области.
disabled	не указывается / disabled	Логический атрибут. Если указан, делает текстовую область неактивной. Данные текстовой области, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода текста в текстовую область.
form	id формы	Указывает на форму, к которой относится текстовая область. Используется, если <textarea> находится вне HTML кода формы. Если текстовая область находится внутри тега <form>, то использовать атрибут form не нужно, текстовая область по умолчанию привязана к форме, внутри которой находится.
maxlength	число	Определяет максимальное количество символов, которые пользователь может ввести в текстовую область. По умолчанию объем текста в текстовой области не ограничен.
name	текст	Имя текстовой области. Используется при передаче данных формы на сервер. Значение (текст) текстовой области будет передано в переменной, имеющей имя, указанное в этом атрибуте.
placeholder	текст	Текст, который будет отображаться внутри текстовой области, когда она не заполнена текстом. Обычно это описание того, что должен ввести пользователь, либо пример заполнения.
readonly	не указывается / readonly	Логический атрибут. Если указан, пользователь не сможет изменить значение (текст) в текстовой области. Используется для создания текстовых областей, доступных только для чтения.
required	не указывается / required	Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена. Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения.
rows	число	Определяет высоту текстовой области. В качестве значения необходимо указать количество строк, которые должны быть видны без прокрутки (скроллинга).
wrap	hard soft	Определяет правила переноса строк: Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина <textarea>. Для использования этого значения необходимо указать атрибут cols. Значение soft: символы переноса ставятся там, где их ставил пользователь. Таким образом текст из текстовой области, переданный на сервер в дальнейшем сможет растягиваться под ширину тега-контейнера. Значение по умолчанию.

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

by Lebedev

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

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

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

Просмотрено 366 тысяч раз

У меня возникли проблемы с тем, чтобы мой имел более 1 строки,

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

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

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

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

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

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

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

  Хотя    игнорирует атрибут  rows , вы можете воспользоваться тем, что   </code> не обязательно должно находиться внутри тегов <code> <form> </code>, но все же может быть частью формы, если указать идентификатор формы: </p><pre> <form method="get">
    <тип ввода = "отправить" />
</форма>
<textarea form ="testformid" name="taname" cols="35" wrap="soft">
 
 Конечно,   </code> теперь отображается под кнопкой «отправить», но, возможно, вы найдете способ переместить его.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/salonfifi.ru/wp-content/uploads/7/2/c/72cc30bc068aad420a867565604dedca.jpeg' /><noscript><img loading='lazy' src='/800/600/https/salonfifi.ru/wp-content/uploads/7/2/c/72cc30bc068aad420a867565604dedca.jpeg' /></noscript>  </p> 




            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> <текстовое поле></текстовое поле>
 </pre><p> Дополнительные сведения см. в документации по элементу <em> textarea </em>. </p> <p> Тег input не поддерживает атрибуты rows и cols. Вот почему лучшей альтернативой является использование текстового поля с атрибутами rows и cols. Вы все еще можете добавить атрибут «имя», а также есть полезный атрибут «обертка», который может очень хорошо пригодиться в различных ситуациях. </p>
                                
                                    

    


                                  <h4><span class="ez-toc-section" id="i-9"> Зарегистрируйтесь или войдите в систему </span></h4>   Зарегистрируйтесь с помощью Google
                         </p>  Зарегистрироваться через Facebook
                         </p>  Зарегистрируйтесь, используя адрес электронной почты и пароль
                         </p>  <h4><span class="ez-toc-section" id="i-10"> Опубликовать как гость </span></h4>   Электронная почта </p> <p> Требуется, но не отображается </p> 
                          <h4><span class="ez-toc-section" id="i-11"> Опубликовать как гость </span></h4> 
            
              Электронная почта </p> <p> Требуется, но не отображается </p>

             </p>

                                     <p>
                                                Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/QJ1y7.png' /><noscript><img loading='lazy' src='/800/600/https/i.stack.imgur.com/QJ1y7.png' /></noscript>  </p>
                                    
                              <h2><span class="ez-toc-section" id="_HTML-3"> Что такое тег в HTML? </span></h2>  Надежные ответы на вопросы разработчиков </p> <p> Бесплатный курс собеседования по проектированию систем </p> <p> Многие кандидаты отклоняются или понижаются в рейтинге из-за плохой успеваемости на собеседовании по проектированию систем. Выделитесь на собеседованиях по проектированию систем и получите работу в 2023 году благодаря этому популярному бесплатному курсу. </p> <h4><span class="ez-toc-section" id="i-12"> Тег </span></h4><code> <textarea> </code> в HTML </h4>  <p> Тег <strong> <code> <textarea> </code> </strong> определяет многострочное текстовое поле для ввода данных от пользователя. Структура тега <code> <textarea> </code> следующая: </p><pre> <textarea name="aboutMe" rows="2" cols="5">
Я автор контента в Educative, Inc.
</текстовое поле>
 </pre><p> Тег <code> <textarea> </code> отображает многострочное текстовое поле для ввода данных. Высота и ширина текстового поля обычно определяются <code> строк </code> и <code> столбцов </code> атрибутов соответственно.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i1.wp.com/mobilkoy.ru/images/mobilkoy/2017/06/form_html6.png' /><noscript><img loading='lazy' src='/800/600/https/i1.wp.com/mobilkoy.ru/images/mobilkoy/2017/06/form_html6.png' /></noscript>  Атрибут <strong> <code> row </code> </strong> указывает количество строк текста, которые должны быть видны в текстовом поле. Атрибут <strong> <code> cols </code> </strong> указывает количество символов, которые должны отображаться в одной строке. Значение по умолчанию — <code> 20 </code> . Оба этих размера также можно задать с помощью CSS. Даже если указаны атрибуты <code> rows </code> и <code> cols </code>, пользователь может расширить текстовое поле, перетащив символ в левом нижнем углу. 9Поле 0011 name </code> обычно предоставляется, когда данные текстового поля должны быть отправлены как часть <code> <form> </code> . </p>  <h4><span class="ez-toc-section" id="i-13"> Пример использования тега </span></h4><code> <textarea> </code> </h4>  <p> В следующем коде приведен пример: </p> <p> В приведенном выше примере атрибуту <code> cols </code> для тега <code> <textarea> </code> присвоено значение <code> 25 </code> ; следовательно, видимые символы в первой строке — <code>. Я автор контента с номером </code>. <code> строк 9Атрибут 0012 имеет значение <code> 2 </code> , поэтому в текстовом поле видны только две строки.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/webformyself.com/wp-content/uploads/2019/155/4.png' /><noscript><img loading='lazy' src='/800/600/https/webformyself.com/wp-content/uploads/2019/155/4.png' /></noscript>  </p> <table> <thead> <tr> <th> Атрибут </th>
 <th> Значение </th>
 <th> Описание </th>
 </tr> </thead> <tbody> <tr> <td> <code> автофокус </code> </td>
 <td> автофокус </td>
 <td> Если установлено, текстовая область автоматически фокусируется при загрузке страницы. </td>
 </tr> <tr> <td> <code> столбцы </code> </td>
 <td> номер </td>
 <td> Указывает количество символов, которые должны отображаться в одной строке. </td>
 </tr> <tr> <td> <code> имя каталога </code> </td>
 <td> textareaname.dir </td>
 <td/>
 </tr> <tr> <td> <code> инвалид </code> </td>
 <td> отключен </td>
 <td> Если установлено, текстовая область отключена. </td>
 </tr> <tr> <td> <code> форма </code> </td>
 <td> form_id </td>
 <td> Связывает текст с указанной формой <code> </code> . </td>
 </tr> <tr> <td> <code> максимальная длина </code> </td>
 <td> номер </td>
 <td> Ограничивает количество символов, которое можно ввести в текстовую область. </td>
 </tr> <tr> <td> <code> имя </code> </td>
 <td> текст </td>
 <td> Задает имя текстовой области.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/prezentacii.org/upload/cloud/18/10/83127/images/screen26.jpg' /><noscript><img loading='lazy' src='/800/600/https/prezentacii.org/upload/cloud/18/10/83127/images/screen26.jpg' /></noscript><div class='yarpp-related yarpp-related-none'>
<p>No related posts.</p>
</div>
											</div>
					
										
				</div>
				<div class="post-sharrre group">
	<div id="twitter" data-url="https://ylianova.ru/html/html-textarea-teg-htmlbook-ru.html" data-text="Html textarea: Тег  | htmlbook.ru" data-title="Tweet"></div>
	<div id="facebook" data-url="https://ylianova.ru/html/html-textarea-teg-htmlbook-ru.html" data-text="Html textarea: Тег  | htmlbook.ru" data-title="Like"></div>
	<div id="googleplus" data-url="https://ylianova.ru/html/html-textarea-teg-htmlbook-ru.html" data-text="Html textarea: Тег  | htmlbook.ru" data-title="+1"></div>
	<div id="pinterest" data-url="https://ylianova.ru/html/html-textarea-teg-htmlbook-ru.html" data-text="Html textarea: Тег  | htmlbook.ru" data-title="Pin It"></div>
</div>

				
			</div>
			
		</article>			
			
		
		<ul class="post-nav group">
		<li class="next"><a href="https://ylianova.ru/raznoe-2/kak-suzit-izobrazhenie-v-fotoshope-umenshit-kartinku-adobe-photoshop-sajt-nn-sozdanie-sajtov-nizhnij-novgorod.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Как сузить изображение в фотошопе: Уменьшить картинку: Adobe Photoshop — «Сайт НН» создание сайтов Нижний Новгород</span></a></li>
		<li class="previous"><a href="https://ylianova.ru/javascript/javascript-s-nulya-besplatno-ekraniruyushhie-posledovatelnosti-javascript-codebasics.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Javascript с нуля бесплатно: Экранирующие последовательности | JavaScript | CodeBasics</span></a></li>
	</ul>
	
		
	
<section id="comments" class="themeform">
	
	
					
			
		
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-textarea-teg-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required">
Имя * 
Email * 
Сайт

Html textarea: Тег | htmlbook.ru

Тег — поле для ввода текста

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

Описание

Атрибуты

Стиль по умолчанию

Пример

Тег HTML текстовая область, многострочное поле

Синтаксис

Примеры использования <textarea> в HTML коде

HTML код текстовой области <textarea>

<textarea> с фиксированным размером (no resize textarea)

HTML код <textarea> с фиксированной шириной и высотой

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

Атрибуты тега textarea

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

Рубрики

Рубрики