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

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

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

Значение атрибута type для по умолчанию определено как text , поэтому его можно не указывать явно. Таким образом, текстовое поле задаётся просто как .

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

Табл. 1. Атрибуты однострочного текстового поля

Атрибут	Описание
name	Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
disabled	Блокирует поле для ввода текста и не отправляет данные на сервер.
form	Идентификатор формы для связывания текстового поля с элементом .
type	Для текстового поля мы указываем значение text или вообще не пишем этот атрибут.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если данный атрибут опустить, то можно вводить строку длинее самого поля.
readonly	Блокирует поле для ввода текста.
size	Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Обычно не указывают, потому что через стили задать желаемые размеры проще и точнее.
value	Начальный текст, отображаемый в поле.
autocomplete	Введённый ранее текст запоминается браузером и подставляется при следующем вводе.
autofocus	Поле получает фокус после загрузки документа.
list	Значение атрибута id элемента , для связи с этим элементом.
pattern	Шаблон ввода текста.
required	Указывает, что поле является обязательным для заполнения.
placeholder	Добавляет подсказку, которая исчезает при вводе текста.
dirname	Имя переменной, которая отправляется на сервер и автоматически получает значение ltr (для текста слева направо) или rtl (для текста справа налево).

Большинство атрибутов являются типовыми и применяются к другим элементам формы. Некоторые атрибуты мы подробнее рассмотрим в следующих уроках.

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

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

В результате получим следующее (рис. 1).

Рис. 1. Вид текстового поля в браузере

Для элемента есть простые правила, которые следует соблюдать:

• нельзя вкладывать внутрь ссылки ;
• нельзя вкладывать внутрь кнопки ;
• атрибут list должен ссылаться на элемент .

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

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

Пример 2. Подсказки для текстового поля

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

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

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

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

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

Значение атрибута type для элемента по умолчанию определено как text , поэтому его можно не указывать явно. Атрибуты текстового поля перечислены в табл. 1.

Табл. 1. Атрибуты однострочного текстового поля

Атрибут	Описание
size	Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля.
name	Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Начальный текст отображаемый в поле.

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

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

В результате получим следующее (рис. 1).

Рис. 1. Вид текстового поля

Ширина текстового поля — величина нестабильная и в разных браузерах может меняться в небольших пределах. Для формы, которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. Так что лучше вообще отказаться от использования атрибута size и задать параметры поля через стили. К тому же CSS позволяет изменять цвет фона, тип шрифта и рамки вокруг поля, как показано в примере 2.

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

Поскольку общая ширина элемента суммируется из значений width , padding и border , то мы получим поле, которое будет выходить за пределы окна браузера. Чтобы этого не произошло, добавлено свойство box-sizing со значением border-box , оно изменяет алгоритм расчёта ширины и ширина поля будет равна 100% независимо от значений других свойств. В результате получим поле следующего вида (рис. 2).

Рис. 2. Вид текстового поля после применения стилей

См. также

• Выравнивание элементов форм
• Загрузка файлов
• Кнопки
• Кнопки
• Отправка данных формы
• Переключатели
• Переключатели
• Поле для ввода пароля
• Поле для пароля
• Пользовательские формы
• Построение форм
• Скрытое поле
• Стилизация переключателей
• Стилизация флажков
• Сумасшедшие формы
• Текстовое поле
• Флажки
• Флажки
• Формы в Bootstrap 4
• Формы в HTML

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

Текстовое поле является простейшим текстовым элементом управления, позволяющим пользователю вводить небольшие объемы текста.

Вы можете также связать этот элемент управления с переменной или параметром типа String , double или int . При этом при введении пользователем в поле другого значения оно будет присваиваться связанной с этим текстовым полем переменной/параметру.

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

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

Чтобы добавить текстовое поле

1. Перетащите элемент Текстовое поле из палитры Элементы управления в то место графического редактора, куда вы хотите добавить текстовое поле.
2. Перейдите в панель Свойства.
3. Если вы хотите связать текстовое поле с переменной или параметром (то есть, присваивать переменной/параметру текущее содержимое этого поля), установите флажок Связать с и введите имя соответствующей переменной или параметра в расположенном справа поле.
4. Если же вы хотите, чтобы при введении пользователем в поле другого значения производилось какое-то другое, более сложное действие, введите код, который вы хотели бы выполнять в таком случае, в секции Действие (текущее содержимое поля доступно здесь доступно здесь как value (локальная переменная типа String )).

Свойства

Имя — Имя текстового поля. Имя используется для идентификации элемента и доступа к нему из кода.

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

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

Связать с — Если вы хотите связать текстовое поле с переменной или параметром (то есть, присваивать этой переменной текущее содержимое этого поля), установите этот флажок и введите имя соответствующей переменной или параметра в расположенном справа поле.

Минимальное значение — [Доступно, если установлен флажок Связать с и тип связанной с полем переменной — int или double ] Минимальное значение, которое может быть введено в текстовом поле (нижняя граница диапазона значений текстового поля).

Максимальное значение — [Доступно, если установлен флажок Связать с и тип связанной с полем переменной — int или double ] Максимальное значение, которое может быть введено в текстовом поле (верхняя граница диапазона значений текстового поля).

Значение по умолчанию — [Видно, если не установлен флажок Связать с] Выражение, возвращающее значение типа String — текст, который будет отображаться в текстовом поле по умолчанию.

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

Код, который будет выполняться при изменении текста, содержащегося в поле. Текущее содержимое поля доступно здесь как value (локальная переменная типа String ).

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

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

Шрифт — Задает тип шрифта для текста, отображаемого в поле. В расположенном справа поле вы можете выбрать размер шрифта.

Курсив — Если опция выбрана, то отображаемый в поле текст будет выделен курсивом.

Полужирный — Если опция выбрана, то отображаемый в поле текст будет выделен полужирным шрифтом.

Местоположение и размер

Уровень — Уровень, на котором расположен этот элемент.

X — X-координата верхнего левого угла текстового поля.

Y — Y-координата верхнего левого угла текстового поля.

Ширина — Ширина текстового поля (в пикселях).

Высота — Высота текстового поля (в пикселях).

Видимость — Текстовое поле будет видно, если заданное здесь выражение будет истинно ( true ), в противном случае оно отображаться не будет.

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

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

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

Функции

Получение текущего значения

Функция	Описание
double getDoubleValue()	Возвращает текущее значение типа double , отображаемое в текстовом поле в данный момент. Если текущее значение не является числом, то функция выдает ошибку.
int getIntValue()	Возвращает текущее значение типа int , отображаемое в текстовом поле в данный момент. Если текущее значение не является числом, то функция выдает ошибку.
String getText()	Возвращает текст, отображаемый в текстовом поле в текущий момент времени.

Задание нового значения

Функция

Описание

void setText(String text)

Задает новый текст. При этом заданное пользователем действие не выполняется. Если текстовое поле связано с численным параметром или переменной, и новое значение будет лежать за пределами допустимого диапазона значений, то в качестве нового значения будет принято ближайшее допустимое значение. Текстовое поле Чтобы добавить элемент, вам необходимо кликнуть на выбранный пункт и тогда справа вы увидите добавленный элемент: Вы можете зайти в настройки добавленного элемента, кликнув иконку «Редактировать»: При этом откроется всплывающее окно с настройками элемента: Элемент «Текстовая поле» применяется для того, чтобы ввести одну строку текста. Поле «Название» — в нём можно указать текст, а также можно отключить отображение названия в этом поле, когда активируете чекбокс «Не отображать название в форме». В поле «Значение по умолчанию» будет отображаться определённый текст, до того момента, пока пользователь не начнёт вводить данные, при этом он должен удалить текст по умолчанию. Чтобы текст отображался только до момента ввода информации, для этого используется «Подсказка внутри поля (placeholder)». Если вы активируете чекбокс «Отображать счётчик символов в поле», то будет выводиться блок с количеством символом и максимальным значением текстового поля. Чтобы просмотреть как будет выглядеть форма, кликните на иконку «Просмотра»: Значение и описание других полей, вы можете посмотреть здесь «Основные параметры элементов». Похожие публикации: Hlg hdr что это Html как сделать проверку пароля c Qtgui что это Вход в интернет по ipoe доступен только с компьютера подключенного к сети билайн что это означает Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Имя * Email * Сайт Комментарий * Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.