Понедельник, 11 Февраля 2013 17:43

Элемент textarea

Written by 
Оцени эту запись
(0 Голоса)

Элемент textarea используется при создании HTML форм для ввода описания, комментария или вопроса. 

 

Определение textarea

 

Элемент textarea предназначен для ввода многострочного текста на HTML странице. Текстовое поле может содержать неограниченное количество символов. Размер textarea зависит от количества строк и столбцов или задается при помощи соответствующих CSS свойств.

 

Пример textarea:

 

<textarea>Kate-land - блог верстальщика и для верстальщика - HTML, CSS, Javascript. Создание html страницы с таблицами стилей и скриптами. Полезная информация, работающие примеры, решение конкретных задач.</textarea>

 

 

 

 

 

Атрибуты textarea

 

К элементу textarea применимы все глобальные атрибуты и атрибуты событий. Кроме того, у элемента textarea есть набор собственных атрибутов, некоторые из которых были добавлены в HTML5.

 

autofocus(новый в HTML5) - устанавливает фокус элементу при загрузке страницы; принимает значение autofocus.

 

cols - задает видимую ширину текстовой области; значением может быть число

 

disabled - делает элемент textarea неактивным; значение - disabled

 

form(новый в HTML5) - задает идентификатор формы, которой принадлежит textarea

 

maxlength(новый в HTML5) - задает максимальное количество символов, которые могут присутствовать в элементе

 

name - имя элемента

 

placeholder(новый в HTML5) - текст по умолчанию

 

readonly - делает textarea только для чтения

 

required(новый в HTML5) - указывает, что данное текстовое поле должно быть обязательно заполнено, значение атрибута - required

 

rows - задает видимое количество линий текстового поля

 

wrap(новый в HTML5) - указывает, как должен быть обернут текст при отправке формы. Может принимать значения hard или soft. Значение по умолчанию - soft(текст не оборачивается). При указании значения hard, текст при отправке формы обернут, содержит линии.

 

 

Работа с textarea

 

1. Для того, чтобы запретить изменение размера элемента textarea по одному или обоим направлениям, используйте CSS свойство resize. По умолчанию у элемента textarea в правом нижнем углу есть треугольничек, потянув за который можно увеличить размеры элемента:

 

 

 

Изменение размера элемента связано с указанным в стилях свойством resize:

 

resize: auto;

 

Изменяя значение этого свойства, можно управлять изменением размера:

 

 

Только вертикальное растягивание:

Только горизонтальное растягивание:

 

 

2. Элемент textarea не может быть потомком элементов a(ссылка) и button(кнопка).

 

 

3. Для оформления элемента textarea используйте CSS:

 

textarea {

background: violet;

border: 2px dashed blue;

color: white;

}

 

 

Стандартные стили элемента textarea:

 

 

 

textarea {
    font-family: monospace;
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    border-image: initial;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    -webkit-box-orient: vertical;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0em;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    -webkit-writing-mode: horizontal-tb;
}
 
 
 
Полезная информация:
 
 
 

 

 

 

 

Additional Info

Комментарии  

 
0 #1 ololo 12.05.2015 21:57
">alert('Hello' )
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов