- Многострочное текстовое поле
- Html textarea перенос строки
- Синтаксис¶
- Атрибуты¶
- autocomplete¶
- autofocus¶
- cols¶
- dirname¶
- disabled¶
- form¶
- maxlength¶
- minlength¶
- name¶
- placeholder¶
- readonly¶
- required¶
- rows¶
- wrap¶
- Спецификации¶
- Описание и примеры¶
- Атрибут wrap
- Синтаксис
- Значения
- Значение по умолчанию
- Примечание
- Типы тегов
- Перенос строки в textarea.
- Обсуждения
Многострочное текстовое поле
Для создания области, в которую можно вводить несколько строк текста, предназначен элемент . В отличие от в текстовом поле допустимо делать переносы строк, они сохраняются при отправке данных на сервер.
Поле для многострочного текста незаменимо для добавления комментариев к статьям, написания сообщений форума, вставки и редактирования постов в блоге и во многих других случаях, когда одной строки текста явно недостаточно. Синтаксис создания поля следующий.
Между тегами можно поместить любой текст, который будет отображаться внутри поля. Если текста нет, то поле будет изначально пустым.
Допустимые атрибуты перечислены в табл. 1.
Атрибут | Описание |
---|---|
cols | Ширина поля в символах. |
maxlength | Максимальное число символов текста, которое можно ввести. |
name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать. |
rows | Высота поля в строках текста. |
wrap | Параметры переноса строк. |
Создание поля многострочного текста показано в примере 1.
Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).
Результат примера показан на рис. 1.
Рис. 1. Вид текстового поля по умолчанию
При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width ), высоту ( height ), границу ( border ), цвет текста и фона ( color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.
Пример 2. Оформление текстового поля
Результат данного примера показан на рис. 2.
Рис. 2. Изменение вида текстового поля
Все браузеры кроме Internet Explorer поддерживают изменение размера для . Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.
Рис. 3. Уголок для изменения размера
Если вам не нужно, чтобы пользователь мог менять размеры текстового поля, то добавьте свойство resize со значением none .
Html textarea перенос строки
Тег (от англ. text area — область текста) это элемент формы для создания области, в которую можно вводить несколько строк текста. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.
Между тегами можно поместить любой текст, который будет отображаться внутри поля.
Синтаксис¶
Закрывающий тег обязателен.
Атрибуты¶
autocomplete Включает или отключает автозаполнение. autofocus Устанавливает фокус в поле формы. cols Ширина поля в символах. dirname Параметр, который передаёт на сервер направление текста. disabled Блокирует доступ и изменение элемента. form Связывает поле с формой по её идентификатору. maxlength Максимальное количество символов разрешённых в тексте. minlength Минимальное количество символов разрешённых в тексте. name Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. placeholder Выводит подсказывающий текст. readonly Устанавливает, что поле не может изменяться пользователем. required Обязательное для заполнения поле. rows Высота поля в строках текста. wrap Параметры переноса строк.
Также для этого элемента доступны универсальные атрибуты.
autocomplete¶
Этот атрибут помогает заполнить текстовое поле текстом, который был введён в нём ранее. Значения сохраняет и подставляет браузер, при этом автозаполнение по соображениям безопасности может отключаться пользователем в настройках браузера и не может в таком случае управляться атрибутом autocomplete .
Автозаполнение конкретного поля формы привязывается к его атрибуту name и при смене значения теряется.
textarea autocomplete="on | off">textarea>
on Включает автозаполнение текста. off Отключает автозаполнение.
Значение по умолчанию
Зависит от настроек браузера.
autofocus¶
Автоматически устанавливает фокус в текстовое поле. В таком поле можно сразу набирать текст без переключения курсора в текстовое поле.
textarea autofocus> textarea>
Значение по умолчанию
По умолчанию атрибут autofocus не установлен.
cols¶
Ширина текстового поля, которое определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. Если размер шрифта изменяется с помощью стилей, ширина также соответственно меняется.
Любое целое положительное число.
Значение по умолчанию
В HTML4 зависит от настроек браузера и операционной системы.
dirname¶
При наличии атрибута dirname на сервер отправляется пара имя/значение, где имя задаётся атрибутом dirname , а значение подставляется браузером. Для текста, идущего слева направо, значение будет ltr , а для текста справа налево (арабского, к примеру) значение будет rtl .
Произвольная текстовая строка, которая служит именем параметра. Чтобы показать, что этот параметр указывает направление текста, обычно в конце строки добавляют .dir .
Значение по умолчанию
disabled¶
Блокирует доступ и изменение текстового поля. Оно в таком случае отображается серым и недоступным для активации пользователем. Кроме того, такое поле не может получить фокус путем нажатия на клавишу Tab, мышью или другим способом. Тем не менее, такое состояние поля можно менять с помощью скриптов.
Заблокированный в поле текст не передаётся на сервер.
textarea disabled>textarea>
Значение по умолчанию
По умолчанию это значение выключено.
form¶
Связывает текстовое поле с формой по её идентификатору. Такая связь необходима в случае, когда поле по каким-либо причинам располагается за пределами .
Идентификатор формы (значение атрибута id элемента ).
Значение по умолчанию
maxlength¶
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
textarea maxlength=""> textarea>
Любое целое положительное число.
Значение по умолчанию
minlength¶
Задаёт минимальное число символов, которое может быть введено пользователем в текстовом поле. Если число символов меньше указанного значения, то браузер выдаёт сообщение об ошибке и не отправляет форму.
textarea minlength="">textarea>
Любое целое положительное число.
Значение по умолчанию
name¶
Определяет уникальное имя элемента . Как правило, это имя используется при отправке данных на сервер или для доступа к полю через скрипты.
В качестве имени используется набор символов, включая числа и буквы. JavaScript чувствителен к регистру, поэтому при обращении к элементу по имени соблюдайте ту же форму написания, что и в атрибуте name .
Значение по умолчанию
placeholder¶
Выводит подсказывающий текст внутри текстового поля, который исчезает при получении фокуса или наборе текста. В качестве подсказки обычно применяется короткий текст, состоящий из одного слова или фразы.
textarea placeholder=""> textarea>
Значение по умолчанию
readonly¶
Когда к элементу добавляется атрибут readonly , текстовое поле не может изменяться пользователем, в том числе вводиться новый текст или модифицироваться существующий. Тем не менее, состояние и содержимое поля можно менять с помощью скриптов. Также содержимое поле можно выделить и скопировать в буфер обмена.
textarea readonly>textarea>
Значение по умолчанию
По умолчанию это значение выключено.
required¶
Устанавливает текстовое поле обязательным для заполнения перед отправкой формы на сервер. Если в обязательном поле нет текста, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может.
textarea required> textarea>
Значение по умолчанию
По умолчанию атрибут required выключен.
rows¶
Высота текстового поля, которое определяется количеством отображаемых строк без прокрутки содержимого. Если размер шрифта изменяется с помощью стилей, высота поля также соответственно меняется.
Любое целое положительное число.
Значение по умолчанию
В HTML4 зависит от настроек браузера и операционной системы.
wrap¶
Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введённых символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.
textarea wrap="soft | hard"> textarea>
soft Слова в текстовом поле переносятся механически, если они не поместились в размер области, но при отправке на сервер переносы не сохраняются. hard Длинный текст, который самостоятельно не помещается в поле по ширине, автоматически переносится на новую строку и вместе с переносами отправляется на сервер. Для работы требуется наличие атрибута cols .
Значение по умолчанию
Спецификации¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html> head> meta charset="utf-8" /> title>TEXTAREAtitle> 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>
Атрибут wrap
Атрибут wrap говорит браузеру, как осуществлять перенос текста в поле и в каком виде отправлять данные на сервер. Если этот атрибут отсутствует, текст в поле набирается одной строкой, когда число введенных символов превышает ширину области, появляется горизонтальная полоса прокрутки. Нажатие кнопки Enter переносит текст на новую строку, и курсор устанавливается у левого края поля.
Синтаксис
Значения
soft Длинный текст, который самостоятельно не помещается в поле по ширине, будет автоматически перенесен на новую строку, однако передаваться на сервер будет как одна строка. Нажатие клавиши Enter устанавливает перенос текста, который сохраняется при отправке формы. hard Слова в поле переносятся механически, чтобы они поместились в размер области, и при отправке на сервер места автоматического переноса сохраняются. При этом значении обязательно должен присутствовать атрибут cols . off Нестандартное значение. Переносы строк отключены. При введении длинного текста без переносов, он будет печататься в одну строку, при этом будет отображаться полоса прокрутки.
Значение по умолчанию
Примечание
Некоторые старые браузеры также поддерживают нестандартные значения virtual вместо soft и physical вместо hard .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Перенос строки в textarea.
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
row 2 cell 1 | row 2 cell 2 | |
row 3 cell 1 | row 3 cell 2 | |
row 4 cell 1 | row 4 cell 2 | |
row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
row 2 cell 1 | row 2 cell 2 | |
row 3 cell 1 | row 3 cell 2 | |
row 4 cell 1 | row 4 cell 2 | |
row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
row 2 cell 1 | row 2 cell 2 | |
row 3 cell 1 | row 3 cell 2 | |
row 4 cell 1 | row 4 cell 2 | |
row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |