Поле для ввода текста. Справка

Параметр

Описание

Обязательный

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

Тип поля: textarea — поле для ввода многострочного текста.

да

нет

Атрибут для поля выходных данных. Содержит имя поля выходных данных.

да

нет

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

нет

нет
validation-show

Расположение всплывающих подсказок (отображаются, если ответ не прошел валидацию). Расположение указывается относительно поля ввода.

Допустимые значения:

  • Над полем ввода: "top-left" (слева), "top-center" (посередине), "top-right" (справа).

  • Под полем ввода: "bottom-left" (слева), "bottom-center" (посередине), "bottom-right" (справа).

  • Слева от поля ввода: "left-top" (сверху), "left-center" (посередине), "left-bottom" (внизу).

  • Справа от поля ввода: "right-top" (сверху), "right-center" (посередине), "right-bottom" (внизу).

  • Не показывать сообщение ("false").

нет

"top-left"

Размер поля.

Допустимые значения: "M", "L".

нет

Ширина поля. Указывается в следующих единицах:

  • Пиксели. Например: width="100px".

  • Доля от размера родительского элемента. Например: width="100%".

Можно также задать ширину формулой. Например: width="calc(100%-30px)".

нет

зависит от браузера и размера шрифта

Высота текстового поля (количество строк, которые отображаются без прокрутки).

Пример:

{{field type="textarea" name="result" rows=5}}

нет

3

disabled

Возможность редактирования:

  • disabled=true — поле закрыто для редактирования.

  • disabled=false — поле открыто для редактирования.

нет

resize

Возможность для исполнителя изменять размер поля:

  • resize="vertical" — возможность изменять высоту.

  • resize="horizontal" — возможность изменять ширину.

  • resize="both" — возможность изменять высоту и ширину.

нет

нет

placeholder

Текст-подсказка, отображаемый в пустом поле ввода.

нет

нет

CSS-класс для поля. Например: class="annotation".

нет

". field" ".field_type_textarea"

Многострочное текстовое поле | WebReference

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

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

<textarea атрибуты>
  Текст
</textarea>

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

Допустимые атрибуты перечислены в табл. 1.

Табл. 1. Атрибуты <textarea>
АтрибутОписание
colsШирина поля в символах.
maxlengthМаксимальное число символов текста, которое можно ввести.
nameИмя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
rowsВысота поля в строках текста.
wrapПараметры переноса строк.

Создание поля многострочного текста показано в примере 1.

Ни один из этих атрибутов не является обязательным, поэтому простая форма для отправки текста выглядит так (пример 1).

Пример 1. Текстовое поле

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текстовое поле</title> </head> <body> <form> <p><b>Введите ваш отзыв:</b></p> <p><textarea name=»comment»></textarea></p> <p><input type=»submit»></p> </form> </body> </html>

Результат примера показан на рис. 1.

Рис. 1. Вид текстового поля по умолчанию

При оформлении многострочного поля применяются те же стилевые свойства, что и для однострочного текста. А именно можно изменять ширину (свойство width), высоту (height), границу (border), цвет текста и фона (color и background соответственно) и др. Пример создания текстового поля с разными характеристиками приведен в примере 2.

Пример 2. Оформление текстового поля

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Текстовое поле</title> <style> textarea { background: #fce9c0; /* Цвет фона */ border: 2px solid #a9c358; /* Параметры рамки */ padding: 10px; /* Поля */ width: 100%; /* Ширина */ height: 200px; /* Высота */ box-sizing: border-box; /* Алгоритм расчёта ширины */ font-size: 14px; /* Размер шрифта */ } </style> </head> <body> <form action=»handler.php»> <p><b>Введите ваш отзыв:</b></p> <p><textarea name=»comment»></textarea></p> <p><input type=»submit»></p> </form> </body> </html>

Результат данного примера показан на рис. 2.

Рис. 2. Изменение вида текстового поля

Все браузеры кроме Internet Explorer поддерживают изменение размера для <textarea>. Достаточно потянуть за правый нижний уголок, который по своему виду отличается от остальных. Вот как выглядит такой уголок в Firefox (рис. 3). Вид в разных браузерах может несколько различаться, но общая схожесть сохраняется.

Рис. 3. Уголок для изменения размера

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

textarea {
 resize: none;
}

См. также

  • <textarea>
  • resize
  • Многострочный текст

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

Поле для ввода пароля
Ctrl+←

Кнопки
Ctrl+→

Ввод текста HTML

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

Чтобы создать поле ввода текста HTML, используйте тег HTML

. Вы добавляете type="text" , чтобы сделать его текстовым полем. Это связано с тем, что тег можно использовать и для других типов ввода, таких как кнопка отправки.

Пример поля ввода текста:

Пример:

Имя:
Фамилия:

Приведенный выше код состоит из тега , содержащего два поля : два поля ввода текста и одна кнопка отправки. Он также содержит разрыв (

) после первого поля ввода текста (Имя), чтобы второе поле ввода (Фамилия) начиналось с новой строки.

Несколько строк текста

Тег — не единственный способ создания поля ввода текста HTML. На самом деле, если вы хотите, чтобы ваши пользователи вводили несколько строк текста, вам следует использовать тег


Страница «Действие»

Приведенный выше код предполагает наличие «страницы действий» для обработки содержимого формы. В этом примере «/html/tags/html_form_tag_action.cfm» — это скрипт на стороне сервера, который обрабатывает форму.

Для создания страниц действий

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

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

Дополнительная информация

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

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

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

1. Тег

Описание всех атрибутов см. в спецификациях HTML-тега.

<форма действие="" метод = "" enctype="" принять кодировку = "" принять = "" имя="" класс = "" идентификатор = "" дир = "" язык = "" цель = "" при отправке = "" при сбросе = "" по клику = "" ondbclick="" onmousedown="" onmouseup="" при наведении мыши = "" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" >

(сюда идут отдельные теги элементов формы — см. ниже)

2. Тег

3. Тег

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

Описание всех атрибутов см. в спецификациях HTML-тега .

<ввод тип = "" имя="" значение = "" размер = "" максимальная длина = "" проверено = "" источник = "" класс = "" идентификатор = "" дир = "" язык = "" название = "" стиль = "" выровнять = "" альт = "" только для чтения = "" отключен = "" табиндекс="" ключ доступа = "" измап="" карта использования = "" в фокусе = "" размытие = "" при выборе = "" при обмене = "" по клику = "" ondbclick="" onmousedown="" onmouseup="" при наведении мыши = "" onmousemove="" onmouseout="" onkeypress="" onkeydown="" onkeyup="" />

Текстовое поле HTML: подробное руководство

Текстовое поле — это обычное средство управления вводом в HTML, но оно имеет различные скрытые атрибуты. Текстовое поле HTML — это область на экране, в которой пользователь может вводить текст. Это обычный элемент ввода, который можно найти во многих программах, таких как веб-браузеры, почтовые клиенты и текстовые процессоры. Когда вы щелкаете по текстовому полю, включается курсор, указывая, что пользователь может начать печатать.

Что такое текстовое поле HTML?

Текстовое поле HTML — это элемент управления вводом, который позволяет пользователю вводить текст на веб-странице. используется для создания текстового поля.

Установка значения по умолчанию для текстового поля

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

Многострочное текстовое поле

HTML-тег