When You ﬁrst Open a Web Page with a Form in a Browser, None Of

5-2

When you ﬁrst open a Web page with a form in a browser, none of

the form controls has the focus. In this exercise, you create a Web

page that sets the focus when the Web page ﬁrst opens. The Web page

you create will contain a simple inquiry form that might be sent to a

real estate agent.

1. Create a new document in your text editor and type the

<!DOCTYPE> declaration, <html> element, document head, and

<body> element. Use the strict DTD and “Realtor Inquiry” as

the content of the <title> element.

2. Add the following heading element and form to the document

body. The form contains several text boxes that gather details

of the property that a customer is looking for along with a

selection list that allows customers to select a speciﬁc type of

property.

<h1>Real Estate Inquiry</h1>

<form action = "FormProcessor.html" method = "get"

enctype = "application/x-www-form-urlencoded">

<input type = "text" name = "visitor_name"

size = "50" /</p>

<p>E-mail address<br />

<p>Phone<br />

<p>Property <select name = "property_type">

<option value = "unselected">Select a Property Type

</option>

<option value = "condo">Condos</option>

<option value = "single">Single Family Homes</option>

<option value = "multi">Multifamily Homes</option>

<option value = "mobile">Mobile Homes</option>

</select>

Sq. feet <input type = "text" name = "feet" size = "5" /

</p>

<p>Bedrooms <input type = "text" name = "bedrooms"

size = "5" />

Maximum price <input type = "text" name = "price"

size = "12" /</p>

<p>How should we contact you? <input type = "radio"

name = "contactHow" value = "call_me" /> Call me

<input type = "radio" name = "contactHow"

value = "e-mail_me" /> E-mail me</p>

<p<input type = "submit" /</p>

</form>

3. Add a script section to the document head, as follows:

/* <![CDATA[ */

/* ]]> */

</script>

4. Add to the script section the following setFormFocus() func-

tion, which uses the focus() method of the Input object

to set the focus on the ﬁrst control in the form, named

visitor_name:

function setFormFocus() {

document.forms[0].visitor_name.focus();

}

5. Add to the opening <body> tag the following onload event

handler, which calls the setFormFocus() method when the

page ﬁrst loads:

onload = "setFormFocus();"

6. Save the document as RealEstateInquiry.html in the

Exercises folder for Chapter 5, and then open it in your Web

browser. The ﬁrst control on the form should receive the

focus as soon as the form is rendered.

7. Close your Web browser window.

Examples:

https://blackboard.strayer.edu/bbcswebdav/pid-11750531-dt-content-rid-94953639_2/courses/CIS307001VA016-1142-001/RealEstateInquiryShell.html

https://blackboard.strayer.edu/bbcswebdav/pid-11750533-dt-content-rid-94953646_2/courses/CIS307001VA016-1142-001/FormProcessor.html