Однострочное текстовое поле

Многострочное поле ввода: тег textarea

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

Речь пойдет о многострочном текстовом поле. И для его создания используется тег

. Данному тегу присущи такие атрибуты, как name и id. Они аналогичны атрибутам текстового поля.

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

С помощью атрибута cols можно указать ширину поля, которая измеряется в символах. Шириной символа принято считать определенное значение, называемое «усредненной шириной».

Многострочное поле не имеет атрибута value. Чтобы задать значение по умолчанию, следует действовать иначе. А именно, расположить текст внутри тега

. Именно он и будет представлять собой значение по умолчанию.

HTML: Формы

Атрибут name требуется большинству элементов формы, так как его значение передается на сервер и используется серверными сценариями.

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

type=»submit» Создает кнопку, при нажатии на которую браузер отправляет форму на сервер: Атрибут value задает текст, который будет отображен на кнопке, заменяя значение установленное по умолчанию. type=»radio» Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями: Попробовать »

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

Примечание: элемент является строчным элементом, поэтому для отображения каждого элемента управления на новой строке нужно добавить после каждого элемента тег
или поместить каждый элемент в абзац (в тег

type=»checkbox» Создает элементы управления, позволяющие пользователям отмечать любое количество вариантов или отменить выбор, не выбрав ни одно из предложенных значений. Такие элементы управления называют флажками. Попробовать »

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

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента .

Элемент

создает многострочное текстовое поле. Если в поле введено больше текста, чем может поместится в текстовой области, то с правой стороны появляется полоса прокрутки. Текст, расположенный между открывающим и закрывающим тегом, будет отображаться в текстовом поле в качестве значения по умолчанию:

Атрибут name должен содержать уникальное имя, которое будет идентифицировать данный элемент на серверной стороне. Атрибут rows позволяет указать количество строк, определяющих высоту текстовой области, а cols задает ширину текстовой области в символах.

Выпадающий список

Элемент создает меню, содержащее выпадающий список. Элементы списка задаются с помощью элементов , которые должны располагаться между открывающим и закрывающим тегами элемента :

Элементы и

Для визуального выделения взаимосвязанных элементов формы можно воспользоваться элементом , который добавляет рамку вокруг своих дочерних элементов:

Название (заголовок) для такой группы элементов можно указать с помощью элемента , который должен быть первым дочерним элементом внутри элемента :

Элемент

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

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

Связать метку с элементом формы можно двумя способами: поместить весь элемент формы внутрь элемента или с помощью атрибута for, который в качестве значения принимает идентификатор элемента формы, с которым нужно связать метку:

Метки можно размещать как до так и после элемента управления, связанного с ней, потому что, если значение атрибута for элемента совпадает со значением атрибута id элемента формы, то неважно где будет находиться метка.

Формы в HTML

Формы в HTML — это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.

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

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

Пользуясь HTML, Вы можете создать каркас формы: текстовые поля, меню, списки, кнопки, флажки и переключатели. То есть те элементы, при помощи которых в форму вносится определенная информация.

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

Атрибуты формы — тег .

Атрибут action является обязательным для любой формы — он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные).

Атрибут method определяет способ отправки содержимого формы. Существует два метода — GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.

Атрибут name тега

Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.

«password» maxlength= «10» size= «20» >

Текстовое поле для ввода пароля.
Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести

«radio» name= «radio» value= «1» checked>

«radio» name= «radio» value= «2» >

«radio» name= «radio» value= «3» >

Переключатель.
Возможен выбор лишь одного варианта из предложенных. Атрибут checked определяет заранее помеченное поле.

«checkbox» name= «flag» value= «1» checked>

«checkbox» name= «flag» value= «2» >

«checkbox» name= «flag» value= «3» >

Флажок.
Возможен выбор нескольких вариантов. Атрибут checked определяет заранее помеченное поле.

«button» value= «Кнопка» >

Кнопка.
Атрибут value устанавливает надпись на кнопке.

«reset» value= «Сбросить» >

Кнопка сброса.
Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.

Кнопка для отправки внесенных данных.

Поле для ввода имени пересылаемого файла.

«image» src= «img/buttom.gif» >

Кнопка-изображение.
Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.

Скрытое поле — невидимое для пользователя.

Раскрывающийся список — теги и

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

Вид создаваемого списка зависит от значения атрибута size : при size= «1» (значение по умолчанию) список будет раскрывающимся.

Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= «3» , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.

По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу позволяет выбрать несколько пунктов списка с помощью мыши и клавиш Ctrl и Shift.

При наличии атрибута multiple , будут отображены все пункты списка или их часть (в зависимости от браузера), если атрибутом size не установлено определенное количество видимых пунктов.

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

При помощи атрибута name тега списку дается имя, а при помощи атрибута value тега элементу списка присваивают значение. Таким образом на сервер отправляется пара «имя=значение» — имя списка и значение выбранного элемента/ов.

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

HTML формы

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Синтаксически парный тег

Элемент является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

С выходом HTML 5 к элементу добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

• checkbox (флаговая кнопка).
• radio (радиокнопка).
• submit (кнопкa отправки формы).
• text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

И так по порядку, что мы сделали в этом примере:

• Разместили два однострочных текстовых поля ( type = «text» > ) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
• Разместили две радиокнопки ( type = «radio» > ) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male ). Он применяется только для полей type = «checkbox» > и type = «radio» > , в противном случае он игнорируется.
• Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
• Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы ( type = «submit» > ). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name ) и значение (атрибут value ).

Результат нашего примера в браузере:

Рис 32 HTML формы.

Обращаю Ваше внимание, что в рамках изучения HTML мы не будем рассматривать то, как серверы обрабатывают входные данные, лишь рассмотрим базовые принципы передачи формы.

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

Однострочное текстовое поле

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

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

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

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

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

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

Элемент управления TextBox позволяет пользователю вводить текст в приложение. The TextBox control lets a user type text into an app. Он обычно используется для записи одной строки текста, но его можно настроить для записи нескольких строк текста. It’s typically used to capture a single line of text, but can be configured to capture multiple lines of text. Текст отображается на экране в простом, однообразном формате обычного текста. The text displays on the screen in a simple, uniform, plaintext format.

Элемент TextBox имеет несколько компонентов, которые могут упростить ввод текста. TextBox has a number of features that can simplify text entry. Он поставляется со знакомым, встроенным контекстным меню с поддержкой копирования и вставки текста. It comes with a familiar, built-in context menu with support for copying and pasting text. Кнопка «Очистить все» позволяет пользователю быстро удалить весь текст, который был введен. The «clear all» button lets a user quickly delete all text that has been entered. В нем также есть функции проверки правописания, встраиваемые и включаемые по умолчанию. It also has spell checking capabilities built in and enabled by default.

Выбор правильного элемента управления Is this the right control?

Используйте элемент управления TextBox, чтобы позволить пользователю вводить и редактировать неформатированный текст, в частности, в форме. Use a TextBox control to let a user enter and edit unformatted text, such as in a form. С помощью свойства Text можно получить и задать текст в элементе управления TextBox. You can use the Text property to get and set the text in a TextBox.

Вы можете сделать элемент TextBox предназначенным только для чтения, но это должно быть временным, условным состоянием. You can make a TextBox read-only, but this should be a temporary, conditional state. Если текст не редактируется, попробуйте использовать элемент TextBlock. If the text is never editable, consider using a TextBlock instead.

Элемент управления PasswordBox может использоваться для сбора паролей или других конфиденциальных данных, например номеров карт социального страхования. Use a PasswordBox control to collect a password or other private data, such as a Social Security number. Поле ввода пароля внешне похоже на поле текстового ввода с той разницей, что в нем вместо вводимого текста отображаются маркеры. A password box looks like a text input box, except that it renders bullets in place of the text that has been entered.

Используйте элемент управления AutoSuggestBox, чтобы позволить пользователю искать термины или показать пользователю список рекомендаций для выбора во время ввода. Use an AutoSuggestBox control to let the user enter search terms or to show the user a list of suggestions to choose from as they type.

Элемент RichEditBox служит для отображения и правки текстовых файлов. Use a RichEditBox to display and edit rich text files.

Дополнительные сведения о выборе подходящего элемента управления текстом можно найти в статье Элементы управления текстом. For more info about choosing the right text control, see the Text controls article.

Примеры Examples

Если у вас установлено приложение галереи элементов управления XAML, щелкните здесь, чтобы открыть приложение и увидеть TextBox в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the TextBox in action.

Создание текстового поля Create a text box

Вот XAML для простого текстового поля с заголовком и замещающим текстом. Here’s the XAML for a simple text box with a header and placeholder text.

Ниже показано текстовое поле, полученное в результате выполнения этого фрагмента кода XAML. Here’s the text box that results from this XAML.

Использование текстового поля для ввода данных в форму Use a text box for data input in a form

Текстовое поле часто используется для принятия ввода данных в форму и использования свойства Text для получения полной текстовой строки из текстового поля. It’s common to use a text box to accept data input on a form, and use the Text property to get the complete text string from the text box. Обычно вы используете событие, например, нажатие кнопки «Отправить», для получения доступа к свойству Text, но вы можете обрабатывать событие TextChanged или TextChanging, если необходимо выполнить какие-либо действия в случае изменения текста. You typically use an event like a submit button click to access the Text property, but you can handle the TextChanged or TextChanging event if you need to do something when the text changes.

В этом примере показано, как получить и задать текущее содержимое текстового поля. This example shows how to get and set the current content of a text box.

К элементу выбора даты в календаре можно добавить Header (или метку) и PlaceholderText (или водяной знак), чтобы пользователь понимал, для чего он используется. You can add a Header (or label) and PlaceholderText (or watermark) to the text box to give the user an indication of what the text box is for. Чтобы настроить оформление заголовка, задайте свойство HeaderTemplate вместо Header. To customize the look of the header, you can set the HeaderTemplate property instead of Header. Сведения о проектировании см. в Руководстве по использованию меток. For design info, see Guidelines for labels.

Вы можете ограничить число вводимых пользователем символов, настроив свойство MaxLength. You can restrict the number of characters the user can type by setting the MaxLength property. Однако свойство MaxLength не ограничивает длину вставленного текста. However, MaxLength does not restrict the length of pasted text. Используйте событие Paste, чтобы изменить вставленный текст, если это важно для вашего приложения. Use the Paste event to modify pasted text if this is important for your app.

Текстовое поле включает в себя кнопку «Очистить все» («X»), которая появляется при введении текста в поле. The text box includes a clear all button («X») that appears when text is entered in the box. Когда пользователь нажимает кнопку «X», текст в поле удаляется. When a user clicks the «X», the text in the text box is cleared. Процесс выглядит следующим образом. It looks like this.

Кнопка «Очистить все» отображается только для редактируемых, однострочных текстовых полей, которые содержат текст и имеют фокусировку. The clear all button is shown only for editable, single-line text boxes that contain text and have focus.

Кнопка «Очистить все» не отображается в любом из перечисленных ниже случаев. The clear all button is not shown in any of these cases:

• Параметр IsReadOnly имеет значение trueIsReadOnly is true
• Параметр AcceptsReturn имеет значение trueAcceptsReturn is true
• TextWrap имеет значение, отличное от NoWrapTextWrap has a value other than NoWrap

В этом примере показано, как получить и задать текущее содержимое текстового поля. This example shows how to get and set the current content of a text box.

Текст, предназначенный только для чтения Make a text box read-only

Текстовое поле можно сделать доступным только для чтения, если присвоить свойству IsReadOnly значение true. You can make a text box read-only by setting the IsReadOnly property to true. Обычно вы переключаете это свойство в приложении, исходя из условий в приложении. You typically toggle this property in your app code based on conditions in your app. Если вам нужен текст, который всегда предназначен для чтения, воспользуйтесь элементом TextBlock. If need text that is always read-only, consider using a TextBlock instead.

Объект TextBox можно сделать доступным только для чтения, если присвоить свойству IsReadOnly значение true. You can make a TextBox read-only by setting the IsReadOnly property to true. Например, у вас может быть элемент TextBox для пользователя, который вводит комментарии, включающийся только при определенных условиях. For example, you might have a TextBox for a user to enter comments that is enabled only under certain conditions. Элемент TextBox можно сделать предназначенным только для чтения, пока не будут выполняться условия. You can make the TextBox read-only until the conditions are met. Если вам нужно только отобразить текст, воспользуйтесь элементом TextBlock или RichTextBlock. If you need only to display text, consider using a TextBlock or RichTextBlock instead.

Текстовое поле, предназначенное только для чтения, выглядит аналогично текстовому полю, предназначенному для чтения и записи. Поэтому пользователь может растеряться. A read-only text box looks the same as a read/write text box, so it might be confusing to a user. Пользователь может выделять и копировать текст. A user can select and copy text. IsEnabled IsEnabled

Включение многострочного ввода Enable multi-line input

Есть два свойства, которые позволяют управлять отображением текста на нескольких строках в текстовом поле. There are two properties that you can use to control whether the text box displays text on more than one line. Обычно настраиваются два свойства, чтобы сделать текстовое поле многострочным. You typically set both properties to make a multi-line text box.

• Чтобы позволить текстовому полю разрешать и отображать символы новой строки или возврата, установите для свойства AcceptsReturn значение true. To let the text box allow and display the newline or return characters, set the AcceptsReturn property to true.
• Чтобы включить обтекание текстом, установите для свойства TextWrapping значение Wrap. To enable text wrapping, set the TextWrapping property to Wrap. В результате будет включено обтекание текстом, когда он будет достигать края текстового поля, независимо от символов разделителя строки. This causes the text to wrap when it reaches the edge of the text box, independent of line separator characters.

Примечание. Элементы TextBox и RichEditBox не поддерживают значение WrapWholeWords для своих свойств TextWrapping. Note TextBox and RichEditBox don’t support the WrapWholeWords value for their TextWrapping properties. Если попытаться использовать WrapWholeWords в качестве значения для параметр TextBox.TextWrapping или RichEditBox.TextWrapping, отобразится исключение относительно недействительного аргумента. If you try to use WrapWholeWords as a value for TextBox.TextWrapping or RichEditBox.TextWrapping an invalid argument exception is thrown.

Многострочное текстовое поле будет по-прежнему увеличиваться по вертикали по мере ввода текста, если он не будет ограничен своим свойством Height или MaxHeight или родительским контейнером. A multi-line text box will continue to grow vertically as text is entered unless it’s constrained by its Height or MaxHeight property, or by a parent container. Необходимо убедиться, что многострочечное текстовое поле не увеличивается за пределы своей видимой зоны, и ограничить его увеличение, если оно выходит за пределы. You should test that a multi-line text box doesn’t grow beyond its visible area, and constrain its growth if it does. Мы рекомендуем всегда указывать надлежащую высоту для многострочечного текстового поля и не позволять ему увеличиваться в высоту во время ввода пользователем. We recommend that you always specify an appropriate height for a multi-line text box, and not let it grow in height as the user types.

Прокрутка с помощью колесика прокрутки или пальца включается автоматически по мере необходимости. Scrolling using a scroll-wheel or touch is automatically enabled when needed. Однако вертикальные полосы прокрутки не отображаются по умолчанию. However, the vertical scrollbars are not visible by default. Вы можете отобразить вертикальные полосы прокрутки, установив для параметра ScrollViewer.VerticalScrollBarVisibility значение Auto на встроенном ScrollViewer, как показано здесь. You can show the vertical scrollbars by setting the ScrollViewer.VerticalScrollBarVisibility to Auto on the embedded ScrollViewer, as shown here.

Вот как выглядит текстовое поле после добавления текста. Here’s what the text box looks like after text is added.

Форматирование отображаемого текста Format the text display

Используйте свойство TextAlignment для выравнивания текста в текстовом поле. Use the TextAlignment property to align text within a text box. Чтобы выровнять текстовое поле в рамках макета страницы, используйте свойства HorizontalAlignment и VerticalAlignment. To align the text box within the layout of the page, use the HorizontalAlignment and VerticalAlignment properties.

Хотя текстовое поле поддерживает только неформатированный текст, вы можете настроить то, как текст будет отображаться в текстовом поле согласно фирменному оформлению. While the text box supports only unformatted text, you can customize how the text is displayed in the text box to match your branding. Можно задать стандартные свойства Control, например, FontFamily, FontSize, FontStyle, Background, Foreground и CharacterSpacing, чтобы изменить внешний вид текста. You can set standard Control properties like FontFamily, FontSize, FontStyle, Background, Foreground, and CharacterSpacing to change the look of the text. Эти свойства влияют только на то, как текстовое поле отображает текст локально, поэтому если, например, скопировать и вставить текст в элемент управления для форматированного текста, форматирование не будет применено. These properties affect only how the text box displays the text locally, so if you were to copy and paste the text into a rich text control, for example, no formatting would be applied.

В этом примере показано текстовое поле, предназначенное только для чтения, с несколькими свойствами для настройки внешнего вида текста. This example shows a read-only text box with several properties set to customize the appearance of the text.

Созданное текстовое поле выглядит следующим образом. The resulting text box looks like this.

Изменение контекстного меню Modify the context menu

По умолчанию команды, отображаемые в контекстном меню текстового поля, зависят от состояния текстового поля. By default, the commands shown in the text box context menu depend on the state of the text box. Например, если текстовое поле является редактируемым, отображаются следующие команды. For example, the following commands can be shown when the text box is editable.

Чтобы изменить команды, отображаемые в контекстном меню, обработайте событие ContextMenuOpening. To modify the commands shown in the context menu, handle the ContextMenuOpening event. Пример см. в сценарии 2 элемента ContextMenu sample. For an example of this, see Scenario 2 of the ContextMenu sample. Сведения о проектировании см. в Руководстве по контекстным меню. For design info, see Guidelines for context menus.

Выделение, копирование и вставка Select, copy, and paste

Получить выбранный текст из текстового поля или задать его можно с помощью свойства SelectedText. You can get or set the selected text in a text box using the SelectedText property. Чтобы управлять выделением текста, используйте свойства SelectionStart и SelectionLength, а также методы Select и SelectAll. Use the SelectionStart and SelectionLength properties, and the Select and SelectAll methods, to manipulate the text selection. Событие SelectionChanged позволяет выполнять действия, пока пользователь выбирает или отменяет выбор текста. Handle the SelectionChanged event to do something when the user selects or de-selects text. Вы можете изменить цвет, используемый для выделения выбранного текста, настроив свойство SelectionHighlightColor. You can change the color used to highlight the selected text by setting the SelectionHighlightColor property.

Элемент TextBox поддерживает копирование и вставку по умолчанию. TextBox supports copy and paste by default. Вы можете предоставить в приложении пользовательскую обработку события Paste в редактируемых текстовых элементах управления. You can provide custom handling of the Paste event on editable text controls in your app. Например, вы можете удалить разрывы строк из многострочного адреса при ее вставке в однострочное поле поиска. For example, you might remove the line breaks from a multi-line address when pasting it into a single-line search box. Или вы можете проверить длину вставленного текста и предупредить пользователя, если он превышает максимальную длину, которую можно сохранить в базу данных. Or, you might check the length of the pasted text and warn the user if it exceeds the maximum length that can be saved to a database. Дополнительные сведения и примеры см. в разделе о событии Paste. For more info and examples, see the Paste event.

Ниже приведен пример применяемых для этого свойств и методов. Here, we have an example of these properties and methods in use. При выборе текста в первом текстовом поле выбранный текст отображается во втором текстовом поле, который доступен только для чтения. When you select text in the first text box, the selected text is displayed in the second text box, which is read-only. Значения свойств SelectionLength и SelectionStart отображаются в двух текстовых полях. The values of the SelectionLength and SelectionStart properties are shown in two text blocks. Для этого используется событие SelectionChanged. This is done using the SelectionChanged event.

Вот результат выполнения этого кода. Here’s the result of this code.

Выбор подходящей клавиатуры для элемента управления текстом Choose the right keyboard for your text control

Чтобы упростить пользователям ввод данных с помощью сенсорной клавиатуры или панели функционального ввода, можно настроить тип вводимых данных элемента управления для ввода текста, чтобы он соответствовал типу данных, которые должен вводить пользователь. To help users to enter data using the touch keyboard, or Soft Input Panel (SIP), you can set the input scope of the text control to match the kind of data the user is expected to enter.

Сенсорная клавиатура позволяет вводить текст, если приложение выполняется на устройстве с сенсорным экраном. The touch keyboard can be used for text entry when your app runs on a device with a touch screen. Сенсорная клавиатура появляется, когда пользователь касается редактируемого поля ввода, например, TextBox или RichEditBox. The touch keyboard is invoked when the user taps on an editable input field, such as a TextBox or RichEditBox. Пользователи могут вводить данные в вашем приложении гораздо быстрее и проще, если настроить тип вводимых данных элемента управления текстом на соответствие типу данных, которые пользователь должен вводить. You can make it much faster and easier for users to enter data in your app by setting the input scope of the text control to match the kind of data you expect the user to enter. Тип вводимых данных предоставляет системе подсказку о типе текстового ввода, ожидаемого элементом управления. Благодаря этому система может отобразить специальную раскладку сенсорной клавиатуры в соответствии с используемым типом ввода. The input scope provides a hint to the system about the type of text input expected by the control so the system can provide a specialized touch keyboard layout for the input type.

Например, если текстовое поле используется только для ввода 4-значного PIN-кода, установите для свойства InputScope значение Number. For example, if a text box is used only to enter a 4-digit PIN, set the InputScope property to Number. Это сообщает системе, что нужно отобразить раскладку цифровой клавиатуры, благодаря чему пользователю проще вводить PIN-код. This tells the system to show the number keypad layout, which makes it easier for the user to enter the PIN.

Внимание! Тип вводимых данных не вызывает выполнение проверки ввода, а также не препятствует пользователю вводить любые данные через аппаратную клавиатуру или другое устройство ввода. Important The input scope does not cause any input validation to be performed, and does not prevent the user from providing any input through a hardware keyboard or other input device. При необходимости вы по-прежнему несете ответственность за проверку вводимых данных в коде. You are still responsible for validating the input in your code as needed.

Другие свойства, влияющие на сенсорную клавиатуру: IsSpellCheckEnabled, IsTextPredictionEnabled и PreventKeyboardDisplayOnProgrammaticFocus. Other properties that affect the touch keyboard are IsSpellCheckEnabled, IsTextPredictionEnabled, and PreventKeyboardDisplayOnProgrammaticFocus. (IsSpellCheckEnabled также влияет на элемент TextBox при использовании аппаратной клавиатуры.) (IsSpellCheckEnabled also affects the TextBox when a hardware keyboard is used.)

Дополнительные сведения и примеры см. в разделе Использование типа вводимых данных для изменения сенсорной клавиатуры и документацию свойства. For more info and examples, see Use input scope to change the touch keyboard and the property documentation.

Рекомендации Recommendations

• Используйте метку или подстановочный текст, если назначение текстового поля не очевидно. Use a label or placeholder text if the purpose of the text box isn’t clear. Метка отображается независимо от того, указано ли значение в поле ввода. A label is visible whether or not the text input box has a value. Подстановочный текст отображается внутри поля ввода текста и пропадает после ввода значения. Placeholder text is displayed inside the text input box and disappears once a value has been entered.
• Задайте для текстового поля достаточную ширину, чтобы можно было ввести ряд значений. Give the text box an appropriate width for the range of values that can be entered. Длина слов различается в зависимости от языков, поэтому если вы собираетесь выводить свое приложение на международный уровень, следует учитывать особенности локализации. Word length varies between languages, so take localization into account if you want your app to be world-ready.
• Поле текстового ввода обычно состоит из одной строки ( TextWrap = «NoWrap» ). A text input box is typically single-line ( TextWrap = «NoWrap» ). Если пользователям придется вводить или изменять длинную строку, используйте многострочное текстовое поле ( TextWrap = «Wrap» ). When users need to enter or edit a long string, set the text input box to multi-line ( TextWrap = «Wrap» ).
• В целом текстовое поле используется для ввода редактируемого текста. Generally, a text input box is used for editable text. Однако можно сделать текстовое поле доступным только для чтения, чтобы его содержимое можно было читать, выделять и копировать, но не изменять. But you can make a text input box read-only so that its content can be read, selected, and copied, but not edited.
• Если необходимо избежать замусоривания представления, стоит сделать набор полей текстового ввода появляющимся только после установки управляющего флажка. If you need to reduce clutter in a view, consider making a set of text input boxes appear only when a controlling checkbox is checked. Состояние включения поля текстового ввода также можно привязать к элементу управления, например к Checkbox. You can also bind the enabled state of a text input box to a control such as a checkbox.
• Подумайте о том, как должно вести себя поле текстового ввода, содержащее значение, когда его выбирает пользователь. Consider how you want a text input box to behave when it contains a value and the user taps it. Поведение по умолчанию подходит для редактирования значений, а не их замены. Точка вставки помещается между словами, и ничего не выделяется. The default behavior is appropriate for editing the value rather than replacing it; the insertion point is placed between words and nothing is selected. Если замена является наиболее распространенным вариантом использования для данного текстового поля, то можно установить выделение всего текста в поле при получении фокуса элементом управления. Вводимый с клавиатуры текст заменяет выделенный текст. If replacing is the most common use case for a given text input box, you can select all the text in the field whenever the control receives focus, and typing replaces the selection.

Поля ввода из одной строки Single-line input boxes

Используйте несколько однострочных текстовых полей для сбора различных фрагментов текстовой информации. Use several single-line text boxes to capture many small pieces of text information. Если текстовые поля связаны между собой, сгруппируйте их вместе. If the text boxes are related in nature, group those together.

Делайте однострочные текстовые поля немного шире предполагаемого текста. Make the size of single-line text boxes slightly wider than the longest anticipated input. Если элемент управления получится слишком широким, разделите его на два элемента. If doing so makes the control too wide, separate it into two controls. Например, можно разделить однострочное поле адреса на «Адрес, строка 1» и «Адрес, строка 2». For example, you could split a single address input into «Address line 1» and «Address line 2».

Задайте максимальную длину вводимого текста в символах. Set a maximum length for characters that can be entered. Если базовый источник данных не позволяет вводить длинные строки текста, ограничьте ввод и сообщите пользователю об ограничении с помощью всплывающего окна. If the backing data source doesn’t allow a long input string, limit the input and use a validation popup to let users know when they reach the limit.

Чтобы пользователи имели возможность вводить маленькие фрагменты текста, используйте элементы управления для ввода одной строки. Use single-line text input controls to gather small pieces of text from users.

В следующем примере показано текстовое поле для записи ответа на вопрос безопасности. The following example shows a single-line text box to capture an answer to a security question. Так как предполагается краткий ответ, то здесь вполне подходит поле, состоящее из одной строки. The answer is expected to be short, and so a single-line text box is appropriate here.

Для ввода данных особого формата используйте набор коротких однострочных элементов управления фиксированного размера. Use a set of short, fixed-sized, single-line text input controls to enter data with a specific format.

Для ввода или правки текста используйте однострочный элемент управления неограниченного размера в сочетании с кнопкой, нажав на которую, пользователь сможет выбрать допустимое значение. Use a single-line, unconstrained text input control to enter or edit strings, combined with a command button that helps users select valid values.

Элементы управления для ввода многострочного текста Multi-line text input controls

При создании текстового поля в формате RTF следует предусмотреть кнопки стиля и реализовать их действия. When you create a rich text box, provide styling buttons and implement their actions.

Используйте шрифт, соответствующий стилю вашего приложения. Use a font that’s consistent with the style of your app.

Высота элемента управления должна быть достаточной для ввода стандартных записей. Make the height of the text control tall enough to accommodate typical entries.

При записи больших объемов текста с ограничением количества символов или слов используйте простое текстовое поле и предоставьте динамический счетчик, показывающий пользователю, сколько символов или слов у него осталось до достижения максимального ограничения. When capturing long spans of text with a maximum character or word count, use a plain text box and provide a live-running counter to show the user how many characters or words they have left before they reach the limit. Счетчик необходимо создать самостоятельно. Разместите его под текстовым полем и обеспечьте динамическое обновление при вводе пользователем символов или слов. You’ll need to create the counter yourself; place it below the text box and dynamically update it as the user enters each character or word.

При вводе пользователем текста элементы управления не должны увеличиваться по высоте. Don’t let your text input controls grow in height while users type.

Не используйте поле для многострочного текста там, где требуется ввести всего одну строку. Don’t use a multi-line text box when users only need a single line.

Не используйте поле с форматом там, где достаточно элемента управления обычного текста. Don’t use a rich text control if a plain text control is adequate.

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

Поля имеют 5 состояний.

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

Две рядом стоящие подсказки не должны пересекаться. В случае возможного пересечения текст идет в несколько строк.

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

На портале «Госуслуги»многострочные поля, существую для Десктопной, Планшетной, и Мобильной версии.

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

Выпадающие списки

Характеристики полей выпадающих списков аналогичны характеристикам текстовых полей (кроме указаных в таблице).

Список разворачивается поверх полей формы.

Максимальное кол-вовидимых выпадающихпунктов — 4.

Если список не влезает повысоте в экран устройства- он выпадает сверху поля

На десктопе спискиподдерживают клавиатурные комбинации для раскрытиясписка, перемещения и поиска нужного пункта по первой букве.

На мобильных устройствах разворачиваются системные списки. Имеют скругленные углы с обеих сторон.

Смартфон RGB: 108,169,210

Поисковая строка

Характеристики полей поисковой строки аналогичны характеристикам текстовых полей (кроме указаных в таблице). Список разворачивается поверх полей формы.

Список начинаетотображаться при вводе 3 и более символов Максимальное кол-во видимых выпадающих пунктов — 4.Если список не влезает по

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

по первой букве

Смартфон RGB: 108,169,210

Комбинированные списки

Характеристики полей комбинированных списков аналогичны характеристикам текстовых полей (кроме указаных в таблице). Список разворачивается поверх полей формы. Нажатие на пиктограмму принудительно раскрывает выпадающий список.

Максимальное кол-во видимых выпадающих пунктов — 4. Если список не влезает по высоте в экран устройства- он выпадает сверху поля На мобильных устройствах разворачиваются системные списки. На десктопе списки поддерживают клавиатурные

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

Смартфон RGB: 108,169,210

X1	X2	X3	X4	X5	X6	X7	X8	Радиус
Десктоп	20	18	15	20	38	10	54	10	4, справа
Телефон	20	15	15	20	32	8	50	10	4, справа
Планшет	15	20	20	20	36	10	50	10	4, справа Длинные названия полей Если текст длинный, он выносится над полями, а в самих полях пишется стандартный текст «Введите» или «Укажите» Стиль текста для названия полей — Sub Название поля имеет ширину самого поля X1 X2 X3 Десктоп 40 5 30 Планшет 30 10 20 Длинное содержимое полей В полях длинный текст переносится на вторую строку. На десктопе и планшете поля, в которые вводится много данных всегда по ширине на всю рабочую область формы и переносятся так же как и на смартфоне Длинное содержимое в выпадающих списках В выпадающих списках длинный текст переносится на следующую строку. HTML Урок 16 Формы HTML Формы используются для различных форм ввода пользовательской информации. Примеры Создание текстовых полей Как создать текстовые поля. Пользователь может писать текст в текстовом поле. Создание поля ввода пароля Как создать поле для ввода пароля. (Вы найдете больше примеров внизу этой страницы). HTML Формы HTML формы используются для передачи данных на сервер. Форма может содержать элементы ввода: текстовые поля, флажки, переключатели, кнопки подтверждения и другие. Форма также может содержать следующие элементы: списки выбора, текстовую область, группу полей, легенду, и метки. HTML Формы — Элемент Ввода Наиболее важный элемент формы — элемент ввода. Элемент ввода используется для ввода пользовательской информации. Элемент ввода может меняться различными способами, в зависимости от атрибута type. Элемент ввода может иметь тип: текстовое поле, флажок, пароль, переключатель, кнопка подтверждения, и др. Наиболее используемые типы ввода описаны ниже. Текстовые Поля определяет однострочное текстовое поле ввода, в которое пользователь может вводить текстовую информацию: Как HTML код выше выглядит в браузере: Замечание: Форма сама по себе не видима. Также отметьте что ширина текстового поля по умолчанию равна 20 символов. Поле Ввода Пароля определяет поле ввода пароля: Как HTML код выше выглядит в браузере: Замечание: Символы в поле ввода пароля маскируются (отображаются как звездочки или кружочки). Переключатели определяет радио кнопку. Радио кнопки позволяют пользователю выбирать ТОЛЬКО ОДИН из ограниченного числа вариантов: Как HTML код выше будет выглядеть в браузере: Флажки определяет флажок. Флажки позволяют пользователю выбрать ОДНУ или БОЛЕЕ опций из ограниченного числа вариантов. Как HTML код выше будет выглядеть в браузере: Кнопка Подтверждения/Отправки определяет кнопку подтверждения (отправки). Кнопка подтверждения используется для отправки данных на сервер. Данные отправляются на страницу указанную в атрибуте формы action. Файл указанный в атрибуте action обычно делает что либо с полученными данными: Как HTML код выше будет выглядеть в браузере: Если вы напечатаете некоторые символы в текстовом поле сверху и кликните на кнопке «Отправить», браузер пошлет введенные вами данные на страницу «html_form_action.php». Эта страница покажет вам то, что вы ввели. Еще примеры Переключатели Как создавать переключатели. Флажки Как создавать флажки. Пользователь может выбрать флажок или отменить выбор флажка. Простой раскрывающийся список Как создать простой раскрывающийся список. Раскрывающийся список с предварительно выбранным значением Как создать раскрывающийся список с предварительно выбранным значением. Текстовая область Как создать многострочную область для ввода текста, куда пользователь может ввести неограниченное количество символов. Примеры Форм Группировка элементов ввода формы Как создать границу вокруг элементов формы. Форма с текстовыми полями и кнопкой подтверждения/отправки Как создать форму с двумя текстовыми полями и кнопкой отправки даных. Форма с флажками Как создать форму с двумя флажками и кнопкой отправки даных. Форма с переключателями Как создать форму с двумя переключателями и кнопкой отправки даных. Отправка электронной почты из формы Как отправлять электронную почту их формы. Текстовое поле HTML — оригинальное оформление текстового поля HTML На сайте находится сотни статей, в которых описывается как придать красивые стили для тех или иных элементов страницы. Данная коллекция постоянно пополняется. Ведь постоянно появляются новые возможности и место для экспериментов. На этот раз я хочу обратить внимание на текстовое поле HTML. Его можно сделать очень привлекательным. Лучше сами лично протестируйте данное поле. Этот эффект достаточно интересный, но на сайте есть и другие способы оформления текстового поля: Как это выглядит смотрите на реальном примере: Посмотреть примерСкачать Выглядит очень интересно и необычно для текстового поля, правда? Давайте посмотрим как же установить данный эффект на свой сайт. Как сделать такой эффект для текстового поля HTML? HTML часть Подключаем необходимые стили (fancyInput.css) и скрипты (jquery и fancyInput.js): После чего необходимо ОБЯЗАТЕЛЬНО поместить тег или внутрь тега jQuery часть Чтобы всё заработало в конце документа HTML добавляем вызов функции плагина fancyInput: На этом установка плагина fancyInput для оформления текстовых полей HTML закончена. Вывод А как Вам идея использовать данный эффект на продающей странице? Также можно таким образом оформить форму комментирования у себя на сайте. Конечно, установка не из простых и, возможно, сразу у Вас всё не заработает, но эффект стоит того, чтобы потратить на него время. Однострочное поле ввода текста Процесс создания элементов более подробно рассматривается в инструкции «Создание новых типов», раздела «Расширенные настройки». Настройка Ниже приведено описание параметров этого элемента: Имя: В поле «Имя» введите желаемое имя для элемента. Описание: Это параметр подзказки (описание к элементу) для упрощения понимания. По умолчанию: При создании элемента, значение по умолчанию устанавливается автоматически. Необходимо заполнить поле значением из опций «Value«. (см. следующий пункт). Опции: Нажмите кнопку «Добавить опцию/Add option«. Вам будет предложено ввести имя опции, например «Да«. Затем нажмите по надписи «Value» и под ней отобразится значение опции. Это заначение можно изменить, кликнув по нему, и в появившемся поле указав его новое имя. При наведении на блок опции, справа появляются небольшие иконки: «Удаление» и «Сортировка«. Позиции Каждому элементу необходимо позиционирование в шаблоне. Более подробно об этом Вы можете прочитать в инструкции «Позиционирование элементов». Показать ярлык: Первым делом Вам нужно выбрать будет ли отображаться элемент. Выберите опцию «Да«. Альтернативная метка: В случае, если Вы хотите другое имя для отображения, то в этом поле укажите желаемое. Разделитель: И в завершении, если Вы используете более одного значения для элемента, то Вы можете выбрать нужный разделитель, который будет помещен между ними: «Пробел«, «Запятая«, «Дефис«, «Параграф» и другие. Так же, значения могут быть обернуты в HTML теги, такие как DIV или Li. Созданный элемент Так выглядит созданный элемент текстового поля. В случае если Вы активировали параметр «Повторяемое«, то под элементом Вы можете наблюдать кнопку «Повторить элемент/Repeat element«. При нажатии на нее появится точно такое же поле. Илон Маск рекомендует:  Что такое код return Понравилась статья? Поделиться с друзьями: Вам также может быть интересно Обучение программированию Эффект пламени По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый Обучение программированию Язык xml введение Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть Обучение программированию Якоря HTML Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело Обучение программированию Эффект разбитого текста Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося Обучение программированию Язык xml использование java xml обработчиков Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX, Обучение программированию Яндекс — крупнейшая поисковая система русскоязычного Интернета! Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта, Обучение программированию Эффект скручивания Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг Обучение программированию Язык xml описание технологии Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML Обучение программированию Ячейка заголовка 17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти Обучение программированию Эффективное использование gnu make Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание Обучение программированию Язык xml практическое введение Описание данных с помощью XML Если вы программируете на Java, за последние пару лет Обучение программированию Эффективный копирайтинг, как писать копирайтинг Как написать эффективный продающий текст. Часть первая. Подготовка Грамотно написанный продающий текст позволяет превращать Обучение программированию Язык xml просмотр xml документов Чем открыть XML Web — это место, где миллионы людей ежедневно связываются друг с Обучение программированию Эффективный способ применения интерфейсов в mdi приложениях Многооконный интерфейс. Создание MDI-приложения , страница 3 Вместо дополнительных байт окна приложение может использовать Обучение программированию Язык xml стилевые таблицы xsl Отображение XML с использованием XSLT При помощи XSLT вы можете преобразовывать XML документ в Обучение программированию Эффекты с изображениями Как сделать — визуальные эффекты изображениям Узнайте, как добавить визуальные эффекты к изображениям. Фильтры Обучение программированию Язык xml схемы данных Понимание XML Узнайте, как Расширяемый язык разметки (Extensible Markup Language — XML) облегчает универсальный Обучение программированию Юмор пиво для программиста ХАЙФХАК: ПРОГРАММИСТ ВЗЛОМАЛ СИСТЕМУ, ЧТОБЫ ПОПИТЬ ПИВО БЕСПЛАТНО / пиво :: geek новости :: Обучение программированию Язык обработки данных awk Примеры команды AWK в Linux Введение AWK назван в честь фамилии его авторов: Альфред Обучение программированию Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными Я загружаю timagelist динамически как сделать картинки из timagelist прозрачными? Элемент управления ImageList содержит Обучение программированию Язык преобразований xsl (xslt) Введение в XSLT XSLT представляет собой способ для XML-документов в другие XML или документы Обучение программированию Является ли указанная страница — домашней (IE) Является ли указанная страница — домашней? (IE) При создании новой вкладки (about:Tabs) в IE9 Обучение программированию Язык преобразований XSLT Справочник по интерфейсу администратора Ссылки Назад «> Вверх Вперед Опубликованные SQL View > XSLT Обучение программированию Ядро и процессы Что такое ядро в биологии? Строение и функции ядра В каждой живой клетке протекает