Create A Graphical Button

ou can use an image as a form-submitting button as well. If you target HTML 4.0 compatible Web browsers, you can also employ the onMouseOver and onMouseOut events to change the image dynamically.

HTMLInputImage control. This setting tells the Web browser where to locate the image. For the SRC attribute, specify the path to the image relative to the root directory of your Web server.

The HTMLInputImage must be on an HTMLForm control, on an ASP.NET page. As with adding other Web controls, you must specify the id attribute and set the runat attribute equal to Server. You may also want to set the <src> attribute for the

You can use the onMouseOver and the onMouseOut events to set the properties of your images. Using these events, you can change the SRC of the image to a new value. When the user moves the mouse cursor off the image, you can change the image back to the original setting by using the onMouseOut event.

CREATE A GRAPHICAL BUTTON

CREATE A GRAPHICAL BUTTON

Q Open the

WelcomeTemplate.aspx template from the Code Templates directory.

□ Set the image for the onMouseOver event.

Set the image for the onMouseOut event.

Q Save the file and request it from the Web server.

° Move your mouse over the button and click.

Q Open the

WelcomeTemplate.aspx template from the Code Templates directory.

-0 Add an HTMLInputImage control to the form and call the Button_OnClick function.

Set the SRC attribute for the button.

□ Set the image for the onMouseOver event.

Set the image for the onMouseOut event.

Change the parameters on the Button_OnClick function from EventArgs to ImageClickEventArgs.

Q Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

° Move your mouse over the button and click.

-■ The light changes to green and a continue message appears.

QUEST SINGLE LINE INPUT

A text box is a common control that is used on forms for enabling users to enter text into a form. You can use an ASP.NET page to process your text boxes as server controls, enabling you to work with the text box's properties, such as the length and type, in your code.

To indicate that the text boxes are HTMLInputText controls rather than ordinary text boxes, add an id attribute and a runat attribute set to Server and make sure that it is on an HTMLForm control. You should specify what type of text box it is. Two valid text box types are Password and Text.

You can create a simple login page to test for a static password. To do this, you can add a couple of HTMLInputText controls to the page. The first control lets the user enter a name and has the type property set to Text to indicate that it is an ordinary text box. The second control has the TYPE set to Password to specify that it is input for a password. For security purposes the password text box displays asterisks, rather than the characters you are typing.

REQUEST SINGLE LINE INPUT

REQUEST SINGLE LINE INPUT

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

< Add a message to the user.

LQ Add an HTML form control to the page.

-0 Add HTMLInputText controls for the name and the password and label them.

□ Add an HTMLSpan control on the page to display the results of the login.

Q Open the

GenericTemplate.aspx template from the Code Templates directory.

Add a heading for the page.

< Add a message to the user.

LQ Add an HTML form control to the page.

-0 Add HTMLInputText controls for the name and the password and label them.

'-□ Add an HTMLInputButton on the page and have it call the SubmitBtn_Click function for the OnServerClick event.

□ Add an HTMLSpan control on the page to display the results of the login.

Exlr E[ You can create a read-only text box by setting the Disabled property of the HTMLInputText control to true.

Example:

Enter Name: <INPUT ID="inputName" TYPE="Text" SIZE="40" RUNAT="Server" VALUE="Guest" DISABLED="true">

You can programmatically hide the text boxes from the user by setting the Visible property of the HTMLInputText control equal to false.

Example:

Enter Name: <INPUT ID="inputName" TYPE="Text"SIZE="40" RUNAT="Server" VISIBLE="falsen>

You can limit the number of characters that a user can type into a text box. The MAXLENGTH property is used for this purpose.

Example:

Enter Name: <INPUT ID="inputName" TYPE="Text" SIZE="40" RUNAT="Server" MAXLENGTH="40">

~~O Create a function called SubmitBtn_Click to check the password.

, Save the file and request it from the Web server.

Click the Submit button.

~~O Create a function called SubmitBtn_Click to check the password.

| Add an if statement to check the password and display the message using the HTMLSpan control on the page.

, Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

L— Type in a name and the incorrect password.

Click the Submit button.

■ A message appears notifying you if your password is correct.

QUEST MULTIPLE LINE INPUT

You can use the <textarea> tag to create input boxes that have more than one row. This gives the user more space to type input on the form. You can implement this as an HTMLTextArea control so that you can easily access the contents of the control, as well as set the properties of the control.

An HTMLTextArea control needs to reside on an HTMLForm control within your page to take full advantage of this control. As with adding other controls, you should give each of the HTMLTextArea controls an id and set the runat attribute equal to Server .

REQUEST MULTIPLE LINE INPUT

You can specify the number of columns and the number of rows for the control to size it properly. Use rows and cols properties to modify the height and width respectively. You can modify the text of the

HTMLTextArea by using the innerHTML or innerText properties. Use InnerHTML if you desire to format the text when you update the

HTMLTextArea.

You can gather suggestions from users by giving them an HTMLTextArea control to fill in on a server form. You should also add an HTMLinputButton and call a function using that control's onServerClick event. The suggestions can be echoed back to the user by setting the InnerHTML property of the <span> tag.

REQUEST MULTIPLE LINE INPUT

Q Open the

SuggestionsTemplate.aspx template from the Code Templates directory.

< Add the code in the SubmitBtn_Click function to echo back the contents of the HTMLTextArea control

□ Save the file and request it from the Web server.

ill in a suggestion.

_0 Click the Submit button.

Q Open the

SuggestionsTemplate.aspx template from the Code Templates directory.

Add an HTMLTextArea control to the form and set the COLS and ROWS attributes.

< Add the code in the SubmitBtn_Click function to echo back the contents of the HTMLTextArea control

□ Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

ill in a suggestion.

_0 Click the Submit button.

A message appears displaying the suggestion.

WORK WITH HTML CONTROLS

QUEST BOOLEAN INPUT

Check boxes are convenient when you need to have the user respond to a yes/no or true/false question. The HTMLInputCheckBox control gives you a server-side control to work with when you need to ask these types of questions. The HTMLInputCheckBox control is similar to the HTMLInputRadioButton control, but is used more often when you want the user to select zero to many options from a list of options. For example, you could have a registration form, and on that form you could ask for one or more of the person's hobbies by providing check boxes. You should use the HTMLInputRadioButton control when you want the user to select only one option from a list of options.

You can initialize the check box to be either checked or not checked. When the form is submitted, you can see if the control was checked by looking at the Checked property of the control. If the Checked property is true, the user has checked the control.

You can set the value attribute of the

HTMLInputCheckBox to either be a key or the actual value of what the check box is representing. For example, setting the value attribute as Have more goals to choose from displays this in the message that is echoed back to the user.

REQUEST BOOLEAN INPUT

4 Untitled - Notepad

File Edit Format Help

(SCRIPT LANGUAGE-'C#" RUNAT="Server">

void SubmitBtn_Click(object Source, EventArgs e) { if (inputSuggestions.Checked -- true) {

spanMessage.lnnerHtml-'Your suggestions are..." +

nputSuqgestlons Value; " }

spanfvlessage InnerHtml = "You have no suqgestlons "

(FONT face-'Verdana"-

<H3>Welcome to mylifetimegoals.com</H3> What suggestions do you have for improving our site?

(FORM RUNAT-'Serve r">

«INPUT ID-'InputSuggestions" TYPE-'Checkbox" RUNAT-'Server" VALUE-'Have more goals to choose from."/>Have more goals to choose from._

Q Open the

SuggestionsTemplate.aspx template from the Code Templates directory.

Add an HTMLInputCheckBox control to the form and set the VALUE attribute.

< Add the code in the SubmitBtn_Click function to send an appropriate message back to the user.

□ Save the file and request it from the Web server.

Check the check box.

□ Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

Check the check box.

_O Click the Submit button.

■ A message appears displaying the suggestion.

Sometimes you may want to have a user select a single option from a group of choices. In these cases, you can use the <input type="radio tag to create a radio button. The HTML control in ASP.NET that represents this HTML is the HTMLlnputRadioButton control. By using the HTML control, you can now work with it on the server.

After you create your HTMLForm, you can add a series of multiple HTMLlnputRadioButton controls to your HTMLForm. Each control must have a unique value for the id attribute, but the name attribute for a group of controls should be the same. By doing this, the user can select only one option from the group. When you want to inspect information on a unique member of the radio button group, you can access it by the ordinal reference in the array created (radio[0].checked checks the first member in the radio button array).

You can set the radio button that is initially selected by setting the checked attribute to true. If this is not set, none of the radio buttons are selected until the user clicks a radio button. You can ask questions which have multiple choices for an answer and force the user into selecting one of the options by using the HTMLlnputRadioButton control.

REQUEST A SELECTION FROM A GROUP

% Untitled - Notepad

File Edit Format Help

SCRIPT LANGUAGE-'C#" RUNAT="Server"> void SubmitBtn Clicklobiect Source. EventArqs el {

eBODY>

f (radioSuggestlonsLess Checked -- true)

spanMessage.lnnerHtml - "You suggested fewer goals.", else if (radioSuggestionsMore.Checked == true)

spanMessage InnerHtml - "You suggested more goals "; else if (radioSuggestionsSame.Checked -- true)

spanMessage.lnnerHtml = "You suggested same number of goals."

-FONT FACE-'Verdana">

<H3>Welcometo myllfetimegoals com</H3> What suggestions do you have for Improving our site?

«INPUTTYPE-'Radio" ID-'radioSuggestionsLess" NAME-'Suggestions" RUNAT-'Serve r'V^Fewer Goals<BR>

«INPUTTYRE-'Radio" ID="radioSuggestionsMore" NAME="Suggestlons" RUNAT-'Serve r"/>More Goals-=BR>

■eINPUTTYPE-'Radio" ID-'radioSuggestionsSame" NAME-'Suggestions" RUNAT-'Serve r"/=-Same Number of Goal5<BR>l_

Q Open the

SuggestionsTemplate.aspx template from the Code Templates directory.

L0 Add multiple HTMLInputRadioButton controls to the form and set NAME attributes.

< Add the code in the SubmitBtn_Click function to send an appropriate message back to the user.

□ Save the file and request it from the Web server.

0 Check the first radio button.

-0 Click the Submit button.

□ Save the file and request it from the Web server.

Note: See pages 20 to 25 for instructions on saving a file to the Web server and then requesting the file using the IIS Admin.

0 Check the first radio button.

-0 Click the Submit button.

■ A message appears displaying the suggestion.

WORK WITH HTML CONTROLS

Was this article helpful?

0 0

Post a comment