Textarea tag in html

Параметр READONLY

HTML:

3.2

XHTML:

1.0

1.1

Описание

Когда к тегу <TEXTAREA> добавляется параметр readonly, текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 5. Поле только для чтения

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TEXTAREA, параметр readonly</title> </head> <body> <form action=»handler.php»> <p><textarea rows=»10″ cols=»20″ readonly>Поле недоступно для изменения</textarea></p> </form> </body> </html>

Недоступное поле (disabled)

Поле только для чтения (readonly)

Getting data from the textarea

A common action regarding textareas is getting the data from them and manipulating it. Let’s see how we can get it and then display it for the user. The HTML code would go like below:

textarea.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Textarea</title>
    <script src="textarea.js" type="text/javascript"></script>
</head>
<body>

Data:
<br>
<textarea name="comments" id="myTextarea" cols="40" rows="6">Suppose we have this text!</textarea>

<br>
<button type="button" onclick="getAndDisplay()">Get Textarea Data</button>

<br>
Display Data:
<br>
<p id="display"></p>

</body>
</html>

In the code above we have kept the textarea we created (and discarded the submit button) and added it an attribute with the value . For ease of use, our textarea is not empty.

Then, we have created a button which when clicked invokes the function , which we will explain later on. Then we have placed a paragraph with an of , both of which will be used in the function.

The Javascript code would go like below:

textarea.js

function getAndDisplay() {
    var x = document.getElementById("myTextarea").value;
    document.getElementById("display").innerHTML = x;
}

As you see, we only have to get the value of our textarea element by using it’s ID, and then pass it to the innerHTML of another element, which we’ve chosen to be the paragraph with the ID value of . Easy, right?

Тег : основные атрибуты, высота, размер, свойства

Тег <textarea> для собственной унификации может быть определен следующими атрибутами:

«accesskey» — добавляет сочетание кнопок для перехода по текстовой области;
«autofocus» — активирует фокус пользователя на текстовой области;
«cols» — определяет ширину области в текстовых символах;
«disabled» — используется для блокировки доступа к полю;
«form» — налаживает связь с формой по ее идентификатору;
«maxlength» — определяет максимальное количество символов, вмещаемых текстовым полем;
«name» — определяет название текстовой области, которое необходимо для идентификации этой области;
«placeholder» — определяет текст, который будет показан пользователю перед заполнением поля;
«readonly» — накладывает ограничение на редактирование текстовой области пользователем, таким образом, пользователь не сможет ничего вписать в эту область;
«required» — определяет, что текстовая область обязательна для заполнения;
«rows» — определяет высоту области количеством вмещаемых строк;
«tabindex» — определяет очередность перехода между элементами области, когда это делается с помощью клавиши «Tab»;
и др.

Тег <textarea>: высота и ширина

Высота и ширина текстовой области тега <textarea> — это самые часто используемые свойства области. Значения этих свойств по умолчанию не всегда могут устраивать веб-разработчика. Для того чтобы их изменить, можно воспользоваться двумя инструментами:

встроенными атрибутами «cols» и «rows»;
CSS-свойствами «width» и «height».

Атрибут «cols» определяет ширину текстовой области, которая используется для ввода текста пользователем. В его значении указывается какое-то число. Это число будет определять количество видимых символов в горизонтальной плоскости. Таким образом, вы сможете, используя этот атрибут, контролировать ширину текстового поля, которая будет зависеть от количества видимых символов.

Атрибут «rows» определяет высоту текстовой области. В его значении указывается какое-то число. Это число будет означать количество видимых строк текста в вертикальной плоскости. Таким образом, вы сможете, используя этот атрибут, контролировать высоту текстового поля, которая будет зависеть от количества строк.

Синтаксис примера, как определяется высота и ширина текстовой области тега таким способом:

<textarea cols=»70″ rows=»7″> Область для текста</textarea>

CSS-свойства «width» и «height» не нужно представлять, так как с их помощью определяются ширина и высота всех HTML-элементов, а не только текстовая область. Тем не менее несколько слов об этих свойствах скажем, например:

определить эти свойства можно тремя способами: в отдельном CSS-файле, в разделе «head» веб-страницы или в атрибутах;
в качестве единиц измерения размеров высоты и ширины можно использовать любые допустимые значения;
эти CSS-свойства будут иметь преимущества перед встроенными атрибутами тега, если одновременно использовать оба варианта обозначения размеров текстовой области.

Синтаксис такого способа выглядит так:

<textarea style=»width:400px; height:250px;»>Область для текста</textarea>

Attributes

Этот элемент включает глобальные атрибуты .

Строка, предоставляющая подсказку для функции автозаполнения пользовательского агента . См . Атрибут автозаполнения HTML для получения полного списка значений и сведений о том, как использовать автозаполнение.

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

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

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

Этот атрибут позволяет вам связывать элементы с в любом месте документа, а не только внутри . Он также может переопределить элемент- предок .

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

Данный атрибут используется для указания имени элемента управления.

Булевый атрибут,указывающий на то,что необходимо выбрать опцию со значением непустой строки.

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

Примечание. В соответствии со спецификацией HTML значением size по умолчанию должно быть ; однако на практике было обнаружено, что это приводит к поломке некоторых веб-сайтов, и в настоящее время ни один другой браузер не делает этого, поэтому Mozilla решила продолжать возвращать в настоящее время с Firefox.

Attributes

Attribute	Value	Description
autofocus	autofocus	Specifies that a text area should automatically get focus when the page loads
cols	number	Specifies the visible width of a text area
dirname	textareaname.dir	Specifies that the text direction of the textarea will be submitted
disabled	disabled	Specifies that a text area should be disabled
form	form_id	Specifies which form the text area belongs to
maxlength	number	Specifies the maximum number of characters allowed in the text area
name	text	Specifies a name for a text area
placeholder	text	Specifies a short hint that describes the expected value of a text area
readonly	readonly	Specifies that a text area should be read-only
required	required	Specifies that a text area is required/must be filled out
rows	number	Specifies the visible number of lines in a text area
wrap	hard soft	Specifies how the text in a text area is to be wrapped when submitted in a form

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <textarea></title>
	</head>
	<body>
		<form>
			<textarea  name = "auth_msg" rows = "10" cols = "45">Здесь Вы можете написать информацию для автора…</textarea><br>
			<input type = "submit" name = "submitInfo" value = "отправить">
		</form>
	</body>
</html>

В данном примере мы создали текстовую область (HTML тег <textarea>), атрибутом name присвоили ей имя (name = «auth_msg»), атрибутом rows задали высоту строк равной десяти символам (rows = «10»), и атрибутом cols указали ширину поля равной 45 символов (cols = «45»).

Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).

Результат нашего примера:

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

How to Make Textarea Responsive

You can make the responsive in many ways. As you have seen, you can control resize handler in textarea.

You can also apply , , , , and properties to make it responsive.

In the above code, we have set so by default textarea will take the full area. But means textarea will not be bigger than 900px.

If screen size increases, textarea size will increase up to 900px not more than that. It is also helpful if you set .

Users can resize textarea input but when you set users will be able to increase the textarea up to 900px. You can also set if you want. Then users will not be able to decrease the size more than that.

It also works a similar way when you use the property. Here default height of the will be 300px.

But when you set then users will be able to increase its height up to 500px and decrease its height up to 200px.

Examples

Basic example

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

<textarea name="textarea"
   rows="10" cols="50">Write something here</textarea>

Пример использования «minlength» и «maxlength»

Этот пример имеет минимальное и максимальное количество символов-10 и 20 соответственно.Попробуйте и посмотрите.

<textarea name="textarea"
   rows="5" cols="30"
   minlength="10" maxlength="20">Write something here</textarea>

Обратите внимание, что не мешает пользователю удалять символы, чтобы введенное число превышало минимум, но делает значение, введенное в , недействительным. Также обратите внимание, что даже если у вас установлено значение (например, 3), пустой по-прежнему считается действительным, если у вас также не установлен атрибут

Пример использования «placeholder»

В этом примере есть набор плейсхолдеров.Обратите внимание,как он исчезает,когда вы начинаете вводить в поле

<textarea name="textarea"
   rows="5" cols="30"
   placeholder="Comment text."></textarea>

Примечание. Заполнители следует использовать только для демонстрации примера типа данных, которые следует вводить в форму; они не заменяют соответствующий элемент , привязанный к вводу. Полное объяснение см. В разделе в элементе <input>: The Input (Form Input) .

Инвалиды и только для чтения

В этом примере показаны два , один из которых , а другой доступен только для . Поиграйте с обоими, и вы увидите разницу в поведении — элемент никоим образом не может быть выбран (и его значение не передается), тогда как только для чтения доступен для выбора, а его содержимое копируется (и его значение отправляется). ; вы просто не можете редактировать содержимое.

Примечание. В браузерах, отличных от Firefox, таких как Chrome, содержимое текстовой области может быть выбрано и скопировано.

<textarea name="textarea"
   rows="5" cols="30"
   disabled>I am a disabled textarea</textarea>
<textarea name="textarea"
   rows="5" cols="30"
   readonly>I am a readonly textarea</textarea>

Параметр READONLY

HTML:

3.2

XHTML:

1.0

1.1

Описание

Когда к тегу <TEXTAREA> добавляется параметр
readonly, текстовое поле не может изменяться пользователем,
в том числе вводиться новый текст или модифицироваться существующий. Кроме того,
такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим
способом. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 5. Поле только для чтения

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TEXTAREA, параметр readonly</title>
</head>
<body>
<form action=»handler.php»>
<p><textarea rows=»10″ cols=»20″ readonly>Поле
недоступно для изменения</textarea></p>
</form>
</body>
</html>

Недоступное поле (disabled)

Поле только для чтения (readonly)

Параметр DISABLED

HTML:

3.2

XHTML:

1.0

1.1

Описание

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 3. Блокировка поля

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TEXTAREA, параметр disabled</title> </head> <body> <form action=»handler.php»> <p><textarea rows=»10″ cols=»20″>Активное поле</textarea> <textarea rows=»10″ cols=»20″ disabled>Неактивное поле</textarea></p> </form> </body> </html>

Активное поле

Неактивное поле

Параметр WRAP

HTML:

3.2

XHTML:

1.0

1.1

Описание

Параметр wrap говорит браузеру, как осуществлять перенос текста в поле <TEXTAREA> и в каком виде отправлять данные на сервер. Если этот параметр отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки <Enter> переносит текст на новую строку, и курсор устанавливается у левого края поля.

Аргументы

soft: При этом параметре длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие кнопки <Enter> на клавиатуре устанавливает перенос текста, который сохраняется при отправке формы.
hard: Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер точки автоматического переноса сохраняются.
off: Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.

wrap=soft

wrap=off

Значение по умолчанию

soft (Internet Explorer, Opera); off (Netscape, Firefox)

Пример 7. Использование параметра wrap

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TEXTAREA, параметр wrap</title> </head> <body> <form method=»post» action=»/cgi-bin/handler.cgi»> <p><textarea rows=»10″ cols=»20″ wrap=»hard»></textarea></p> <p><input type=»submit» value=»Отправить»></p> </form> </body> </html>

Как отключить изменяемый размер свойства textarea?

В настоящее время я могу изменить размер textarea нажав в правом нижнем углу textarea и перетаскивая мышь. Как я могу отключить это?

22 ответа

Следующее правило CSS отключает изменение размера для textarea элементы:

Чтобы отключить его для некоторых (но не всех) textarea с, есть несколько вариантов.

Чтобы отключить определенный textarea с name атрибут установлен в foo (То есть, <textarea name=»foo»></textarea> ):

Или, используя id атрибут (т.е. <textarea ></textarea> ):

На странице W3C перечислены возможные значения ограничений на изменение размера: нет, как горизонтальное, вертикальное и наследовать:

Просмотрите страницу достойной совместимости, чтобы увидеть, какие браузеры в настоящее время поддерживают эту функцию. Как прокомментировал Джон Халка, размеры могут быть дополнительно ограничены в CSS с помощью max-width, max-height, min-width и min-height.

Супер важно знать:

Это свойство ничего не делает, если только свойство overflow не является чем-то отличным от visible, которое используется по умолчанию для большинства элементов. Поэтому, чтобы использовать это, вам нужно установить что-то вроде переполнения: scroll;

Цитата Криса Койера, http://css-tricks.com/almanac/properties/r/resize/

Еще одна особенность формата — переполнение: автоматическое избавление от правильной полосы прокрутки с учетом атрибута dir

код и разные браузеры

FF 17.0.1

хром

У CSS3 есть новое свойство для элементов пользовательского интерфейса, которое позволит вам сделать это. Свойство — это свойство изменения размера. Таким образом, вы бы добавили следующее в вашу таблицу стилей, чтобы отключить изменение размера всех элементов textarea:

Это свойство CSS3; используйте таблицу совместимости, чтобы увидеть совместимость браузера.

Лично мне было бы очень неприятно иметь отключенное изменение размера элементов textarea. Это одна из тех ситуаций, когда дизайнер пытается «сломать» клиент пользователя. Если ваш дизайн не может вместить большую текстовую область, вы можете пересмотреть, как работает ваш дизайн. Любой пользователь может добавить textarea к их пользовательской таблице стилей, чтобы переопределить ваши предпочтения.

HTML Справочник

HTML по алфавитуHTML по категориямHTML Поддержка браузераHTML АтрибутыHTML Глобальные атрибутыHTML СобытияHTML ЦветаHTML CanvasHTML Аудио/видеоHTML Наборы символовHTML Типы документовHTML URL КодировкаHTML Коды языкаHTML Коды странHTTP СообщенияHTTP МетодыКонвертер PX в EMКомбинации клавиш

HTML Теги

<!—Комментарий—>
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<data>
<datalist>
<dd>
<del>
<details>
<dfn>
<dialog>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> — <h6>
<head>
<header>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<legend>
<li>
<link>
<main>
<map>
<mark>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<picture>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<svg>
<table>
<tbody>
<td>
<template>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

methods

Except for all the attributes that will help us set a <textarea> element just the way we need it to work, there are also a number of Javascript methods related to it which need to be used in order to make it all work. Some of the most important ones are:

– selects all the contents of the control
– similarly to the attribute, this method gives input focus to the control
– reverses the effect of , which means that it removes input focus to the control. This method and also are inherited from the HTMLElement interface starting from HTML5 and on, but needed to be defined in earlier versions.
– this method returns a boolean value as it’s final result. This value would be in the cases where the control is not a candidate for constraint validation or it’s criteria is fulfilled, and when these constraints are not fulfilled.
– would return a custom string (presumably hinting at what’s wrong) in case the validity criteria is not met, and a void string if everything is as it should be.

By now you know a lot about the <textarea> element, including a great number of it’s attributes and methods. However some of you might still have some difficulty understanding this element. The best way to clear your doubts? Why, practice, of course. Time for some examples!

Параметр DISABLED

HTML:

3.2

XHTML:

1.0

1.1

Описание

Блокирует доступ и изменение текстового поля. Оно в таком случае отображается
серым и недоступным для активации пользователем. Кроме того, такое поле не может
получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем
не менее, такое состояние поля можно менять с помощью скриптов.

Значение по умолчанию

По умолчанию это значение выключено.

Пример 3. Блокировка поля

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «https://w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Тег TEXTAREA, параметр disabled</title>
</head>
<body>
<form action=»handler.php»>
<p><textarea rows=»10″ cols=»20″>Активное поле</textarea>
<textarea rows=»10″ cols=»20″ disabled>Неактивное
поле</textarea></p>
</form>
</body>
</html>

Активное поле

Неактивное поле

Try it

В приведенном выше примере демонстрируется ряд возможностей :

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

Элемент также принимает несколько атрибутов, общих для формирования , таких как , , , , только для и .

Browser compatibility

Desktop	Mobile
Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet
Yes	12	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes В отличие от других основных браузеров, к отключенным элементам применяется стиль по умолчанию .	Yes
66	No См. Проблему 758078 .	59	No	No	Yes См. Ошибку 150731 .	66	66	59	No	No	9.0
1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
17	79	No	No	≤12.1	6	≤37	18	No	≤12.1	6	1.0
1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
4	12	4	10	≤12.1	5	≤37	18	4	≤12.1	5	1.0
40	17	51	No	27	10.1	40	40	51	27	10.3	4.0
1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
4	12	4	10	≤12.1	5	≤37	18	4	≤12.1	5	1.0
1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
4	12	4	10	≤12.1	5	≤37	18	4	≤12.1	5	1.0
1	12	1	≤6	≤12.1	≤4	4.4	18	4	≤12.1	≤3	1.0
Yes	12	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes	Yes
16	12	4	≤6	≤12.1	6	≤37	18	4	≤12.1	6	1.0

HTML тег

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

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

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

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

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

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

Атрибуты

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

cols: Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию — 20. disabled: Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled : form: Определяет форму с которой связан элемент <textarea> . В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента <form> .

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

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

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

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

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

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

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

Атрибуты

Атрибут	Значение	Описание
autocomplete	onoff	Определяет, может ли содержимое элемента быть автоматически дополнено браузером (автозаполнение).
autofocus	autofocus	Указывает, что текстовая область должна автоматически получать фокус при загрузке страницы.
cols	number	Определяет видимую ширину текстовой области (в символах). Значение по умолчанию 20 символов.
dirname	textareaname.dir	Определяет и передает на сервер направление текста.
disabled	disabled	Логический атрибут, указывающий, что текстовая область должна быть отключена.
form	form_id	Определяет одну или несколько форм, к которым принадлежит элемент и связывает их при помощи идентификатора (id).
maxlenght	number	Указывает максимальное количество символов, которое может содержать текстовая область.
minlength	number	Указывает минимальное количество символов, которое может содержать текстовая область.
name	text	Определяет имя текстового поля.
placeholder	text	Указывает текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент. Подсказка отображается в пустом текстовом поле, и исчезнет при получение им фокуса.
readonly	readonly	Указывает, что текстовая область доступна только для чтения.
required	required	Логический атрибут, указывающий, что текстовая область должна быть заполнена перед отправлением формы.
rows	number	Определяет видимое количество строк в текстовой области. Значение по умолчанию 2 символа.
wrap		Определяет, как текст должен быть перенесен, когда отправляется форма.
soft	-(значение по умолчанию) текст отправляется одной сплошной строкой без добавления дополнительных переносов строк.
hard	-браузер автоматически вставляет разрывы строки так, что каждая строка не будет шире текстового поля. Используется только если установлен атрибут cols.

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

Итого

Свойства для навигации по формам:

Форма доступна через .

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

Элементы хранят ссылку на свою форму в свойстве .

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

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

Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.

В следующей главе мы рассмотрим такие события, как и , которые могут происходить на любом элементе, но чаще всего обрабатываются в формах.

Параметр READONLY

Описание

Значение по умолчанию

Getting data from the textarea

Тег : основные атрибуты, высота, размер, свойства

Тег <textarea>: высота и ширина

Attributes

Attributes

Пример использования

How to Make Textarea Responsive

Examples

Basic example

Пример использования «minlength» и «maxlength»

Пример использования «placeholder»

Инвалиды и только для чтения

Параметр READONLY

Описание

Значение по умолчанию

Параметр DISABLED

Описание

Значение по умолчанию

Параметр WRAP

Описание

Аргументы

Значение по умолчанию

Как отключить изменяемый размер свойства textarea?

22 ответа

код и разные браузеры

HTML Справочник

HTML Теги

methods

Параметр DISABLED

Описание

Значение по умолчанию

Try it

Browser compatibility

HTML тег

Атрибуты

Атрибуты

Итого

Похожие записи:

Похожие записи: