logo
[ПСП] / lab22

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

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

<HTML>

<HEAD>

<TITLE>HTML is unavoidable</TITLE>

<META NAME="GENERATOR" Content - "Microsoft Visual Studio">

<META HTTP-EQUIV="Content-Type" content="text/html">

</HEAD>

<BODY BGCOLOR="66ccff">

<!- Приглашение пользователю к аутентификации ->

<center>

<hl>The Cars Login Page</hl>

<br>

<h3>Please enter your <i>user name</i> and <i>password</i>.</h3>

<!- Создаем форму для ввода пользователей информации ->

<form name = MainForm>

</form>

</center>

</BODY>

</HTML>

Форма создана, теперь можно приступать к добавлению в нее элементов управления. Это можно сделать при помощи графических средств Visual Studio.NET, а можно создать все необходимые теги вручную. Каждый элемент уп­равления описывается атрибутом имени (имя используется при выполнении программы, чтобы определить, в какой элемент управления были введены дан­ные) и атрибутом типа (этот атрибут и определяет разновидность элемента управления). Для разных элементов управления существуют разные наборы дополнительных атрибутов, которые могут быть использованы для определе­ния различных их параметров. Конечно же, эти дополнительные параметры можно также настроить при помощи окна свойств для этого элемента управле­ния в Visual Studio.

Наша форма будет содержать два текстовых поля (одно — для ввода имени пользователя, другое, специальное парольное — для ввода пароля) и две кнопки — для передачи информации на сервер и для восстановления формы в исходном со­стоянии, если пользователь решил отменить свой ввод. Вот код HTML для нашей формы ("&nbsp" определяет вставку символа пустого пространства):

<form name=MainForm>

<p>User Name:  

<input id = txtUserName type = text></p>

<p>Password:   

<input name = txtPassword type = password></p>

<input name = btnSubmit type = submit value = Submit>   

<input name = btnReset type = reset value = Reset>

</form>

Для каждого элемента управления мы определили уникальное имя (txtUserName, txtPassword, btnSubmit и btnReset). Кроме того, для каждой кнопки мы определили очень важный атрибут value (значение), value = Reset означает, что все элементы управления на форме вернутся в исходное состояние, a value = Submit — что дан­ные, введенные пользователем, отправятся получателю.

Атрибут value можно применять не только для кнопок. Например, мы можем определить атрибут value для текстового поля txtUserName (рис. 14.14).

Рис. 14.14. Установка атрибута value для элемента управления

Если мы определим для txtUserName атрибут value = Chucky, то это значит, что слово Chucky станет значением по умолчанию для этого текстового поля и оно бу­дет помещаться в поле всякий раз при загрузке формы (рис. 14.15).

Рис. 14.15. Применение значения по умолчанию для текстового поля