alt

Когда человеку тяжело,
это часто означает,
что он идёт к успеху.

alt


Текстовое поле textarea html

Категория: Уроки HTML Просмотров: 993 Коментариев: 0 Дата: 2017-06-01 Добавил: admin

 Текстовое поле textarea html.

Итак, мы продолжаем с элементами формы и, после рассмотренного элемента SELECT, мы рассмотрим очередной элемент для ввода строк текста - это элемент textarea. Этот элемент напоминает собой область несколько склеенных элементов input стоящих один под другим.

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

Если мы просто вставим данный тег в редактор и обновим страницу в браузере то текстовое поле будет выглядеть стандартным образом, т.к. ему небыли заданы ни какие размеры.

 текстовое поле  textarea

Данное текстовое поле должно содержать имя, которое задается с помощью уже известного атрибута со значением name="text". Так же текстовому полю textarea можно задать размеры, указав ему с помощью атрибутов количество рядов и колонок.

Высота поля, то есть ряды указываются с помощью атрибута rows, например: rows="10".

Ширина поля, то есть столбцы задаются атрибутом cols, например: cols="60". В итоге у нас получился следующий вид:

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
	
</body>
</html> 

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

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
	
</body>
</html> 

И, рассмотрим еще ситуацию, когда, например, после клика на вопрос перед текстовым полем, нам нужно установить курсор в это текстовое поле. Для этого используем тег <label>, но уже другим методом, через атрибут for и идентификатор для текстовой области id = "" .

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>

</body> </html>


То есть, после клика по вопросу перед текстовым полем обработчик событий ищет идентификатор с именем text, так как в теге <label> указан атрибут for с именем text. Таким образом, между собой связываются эти два элемента - параграф и текстовое поле. Таким же способом связываются и надпись у чекбоксов.

И, рассмотрим еще один атрибут, он применяется не только к текстовому полю textarea, но и для простого текстового поля input.

С помощью атрибута readonly, что в переводе с английского «Только для чтения», создается текстовая область только для чтения, т.е. не поддающаяся редактированию. По умолчанию у элемента данный атрибут выключен.

HTML

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

HTML

Разница между данными атрибутами в том, что при использовании атрибута readonly, при отправке формы, содержимое формы передается обработчику. А при использовании атрибута disabled данные (содержимое формы) не будут передаваться обработчику.

Тем не менее содержимое таких полей все же можно изменить с помощью скриптов.

HTML

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

HTML

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


Просмотреть демо: Демо

Скачать исходник: Скачать



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


Ваше имя

Текст комментария


Введите буквы с учетом регистра:





Апдейты

Популярное Свежие записи

Облако тегов