Создание пользовательского интерфейса на базе HTML

Создание пользовательского интерфейса на базе HTML

Перед добавлением HTML-элементов в HTML-форму важно заметить, что Visual Studio 2005 позволяет редактировать содержимое файлов *.htm с помощью интегрированного HTML-редактора и окна свойств. При выборе DOCUMENT в окне свойств (рис. 23.5) вы получаете возможность настройки ряда параметров HTML-страницы, например цвета ее фона.

Теперь измените раздел bodyфайла default.htm так, чтобы отобразить пользователю приглашение ввести имя и пароль, и установите для фона тот цвет, который вам нравится (вы можете вводить и форматировать текстовое содержимое непосредственно в окне НТМL-редактора).

‹html›

 ‹head›

  ‹titlе›Web-страница Cars‹/title›

 ‹/head›

 ‹body bgcolor="NavajoWhite"›

  ‹!-- Приглашение ввода для пользователя --›

  ‹h1 align="center"›Страница входа в систему Cars‹/h1›

  ‹р align="center"›‹br›Введите ‹i›имя пользователя‹/i› и ‹i›пароль‹/i›.‹/р›

  ‹form id="defaultPage" name="defaultPage"› ‹/form›

 ‹/body›

‹/html›

Рис. 23.5. Редактирование HTML-документа средствами VS .NET

Теперь давайте построим саму HTML-форму. Вообще говоря, каждый HTML-элемент описывается с помощью атрибута name (соответствующее значение используется для программной идентификации элемента) и атрибута type (это значение задает вид элемента интерфейса, который вы хотите поместить в рамки декларации ‹form›). В зависимости оттого, с каким элементом интерфейса вы работаете, в окне свойств появляется дополнительные атрибуты, присущие данному конкретному элементу.

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

‹!-- Построение формы для получения информации от пользователя --›

‹form name="defaultPage" id="defaultPage"›

 ‹P align="center"›Имя пользователя:

  ‹input id="txtUserName" type="text" NAME="txtUserName"›

 ‹/P›

 ‹P align="center"›пароль:

  ‹input name="txtPassword" type="password" ID="txtPassword"›

 ‹/P›

 ‹P align="center"›

  ‹input name="btnSubmit" type="submit" value="Отправить" io="btnSubmit"›

  ‹input name="btnReset" type="reset" value="C6poc" ID="btnReset"›

‹/form›

Обратите внимание на то, что здесь для каждого элемента назначены соответствующие значения name и id (txtUserName, txtPassword, btnSubmit и btnReset). Еще более важно то, что каждый элемент ввода имеет дополнительный атрибут type, который ясно идентифицирует их как вполне определенные элементы пользовательского интерфейса. Например, type="reset" указывает на автоматическую очистку всех полей формы и присвоение им начальных значений, type="password" – маскированный ввод пароля, a type="submit" – отправку данных формы получателю. На рис. 23.6 показан вид получившейся страницы.

Рис. 23.6. Исходный вид страницы, сохранённой в файле default.htm

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Настройка пользовательского интерфейса

Из книги AutoCAD 2009 автора Орлов Андрей Александрович

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


Создание пользовательского интерфейса режима проектирования

Из книги Язык программирования С# 2005 и платформа .NET 2.0. [3-е издание] автора Троелсен Эндрю

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


Настройка пользовательского интерфейса

Из книги 3ds Max 2008 автора Верстак Владимир Антонович

Настройка пользовательского интерфейса Программа 3ds Max позволяет создавать новые и настраивать существующие меню и панели инструментов. Для этой цели служит окно Customize User Interface (Настройка пользовательского интерфейса) (рис. 1.36). Рис. 1.36. Окно Customize User Interface (Настройка


Описание пользовательского интерфейса

Из книги Office 2007. Мультимедийный курс автора Мединов Олег

Описание пользовательского интерфейса Для запуска Microsoft Outlook 2007 выполните команду Пуск ? Все программы ? Microsoft Office ? Microsoft Office Outlook 2007. В результате откроется окно программы, изображенное на рис. 5.1. Рис. 5.1. Программа Microsoft Outlook 2007В верхней части окна находится главное меню


Создание пользовательского интерфейса на основе Windows Forms

Из книги Обработка баз данных на Visual Basic®.NET автора Мак-Манус Джеффри П

Создание пользовательского интерфейса на основе Windows Forms Разработчики предыдущих версий Visual Basic первыми предложили концепцию связывания данных, согласно которой связанный с данными объект или элемент управления данными (data control) позволяет программистам с минимальными


Настройка пользовательского интерфейса

Из книги AutoCAD 2010 автора Орлов Андрей Александрович

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


3.1.7. Предпочтительный стиль пользовательского интерфейса

Из книги Искусство программирования для Unix автора Реймонд Эрик Стивен

3.1.7. Предпочтительный стиль пользовательского интерфейса В главе 11 подробно рассматриваются различия между интерфейсами командной строки (Command-Line Interfaces — CLI) и графическими пользовательскими интерфейсами (Graphical User Interfaces — GUI). Выбор проектировщиком операционной системы


Возможности пользовательского интерфейса

Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей Владимирович

Возможности пользовательского интерфейса В окне редактирования можно отображать номера строк в колонке слева от текста сценария. За включение/выключение этого режима отвечает переключатель View Line Numbers в меню View. Для перехода к строке с заданным номером нужно нажать


Описание пользовательского интерфейса

Из книги Интернет на 100%. Подробный самоучитель: от «чайника» – до профессионала автора Гладкий Алексей Анатольевич

Описание пользовательского интерфейса После запуска Интернет-обозревателя Mozilla Firefox на экране отобразится ее пользовательский интерфейс, который показан на рис. 3.1. Рис.


Описание пользовательского интерфейса

Из книги Веб-Самоделкин. Как самому создать сайт быстро и профессионально автора Гладкий Алексей Анатольевич

Описание пользовательского интерфейса После установки программы на компьютер в меню


Настройка пользовательского интерфейса

Из книги VBA для чайников автора Каммингс Стив

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


Настройка пользовательского интерфейса

Из книги iOS. Приемы программирования автора Нахавандипур Вандад

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


8.9. Защита пользовательского интерфейса

Из книги автора

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