4. Master Page Contact Form

Main Points

Subjects Section Description of the code for the subjects section.
Contact Form Description of the code for the contact form.
^{Skip to Main Points} links return to the Main Points menu.

Subjects and Contact Form

The next section is the subjects bar. It follows the first sections of the footer detailed on page three, the authorship and posting dates. The subjects bar (once we have subjects) will link to subject lists that allow someone to locate pages on similar topics.

<h4>Subjects:</h4>

<ul>

<asp:contentplaceholder id="cphSubjects" runat="server" />

</ul>

</div>

This creates the structure in the HTML for the Subjects section and which the CSS will transform visually into the box which surrounds them. The actual contents, the subjects are inserted in the content page...

<asp:content ContentPlaceHolderId="cphSubjects" runat="server">

<li>

<a title="The Test Site of your Online Education Resource for History" href="Default.aspx">Core</a>,

</li>

<li>

</li>

</asp:content>

The format obviously is very simple and repetitive. We're designing this code in the hopes that it can be easily drawn from a database in the future. This is part of the metadata that we'd like to store about each page and pull at need when the page is requested.

^{Skip to Main Points}

Contact Form

The last section of the footer is the most complex, the ASP.NET contact form. It is a structurally sound, CSSed form fieldset.

<h2>Have a Question? Leave a comment!</h2>

<h4>Add an update, make a suggestion, or report an error.</h4>

<legend>Contact Us!</legend>

<ol>

<li>

<label for="tbEmail">Email (optional)</label>
<asp:textbox id="tbEmail" runat="server" cssclass="tbEmail" />

</li>
<li>

<label for="tbComments">Questions and Comments</label>
<asp:textbox id="tbComments" runat="server" cssclass="tbComments" textmode="multiLine" />

</li>
<li>

<asp:button id="btnEmail" runat="server" text="Email Us!" CssClass="btnEmail" />
<asp:Label ID="lblSent" runat="server" />

</li>

</ol>

</fieldset>

</div>

This is mostly HTML. First, there are the divs which identify the form. Note the absence of form tags in ASP.NET, since the <form> tags are needed for a webform. Then there is a rollover image and the two headings to attract people's attention and encourage them to respond. There there's the <fieldset> tags. This is the way you formally set up a form (haha), since fieldsets are the only way to have multiple sections of form fields on a page. The <fieldset> tags draw a line metaphorically around the fields in the HTML and quite literally on the page. It's of added significance in ASP.NET since this is the only way to identify the form section, otherwise you have to drop naked form components loose on the page. Then all the form fields are arranged in a list. This is the only section that contains .NET controls and on the page they render like this...

<ol>

<li>

<label for="tbEmail">Email (optional)</label>
<input name="ctl00$tbEmail" type="text" id="ctl00_tbEmail" class="tbEmail" />

</li>

<li>

<label for="tbComments">Questions and Comments</label>
<textarea name="ctl00$tbComments" rows="2" cols="20" id="ctl00_tbComments" class="tbComments"></textarea>

</li>

<li>

</li>

</ol>

The ASP.NET server controls have in each case been replaced with either text or button <input> tags. Note the id attributes are "mangled" by the master page so as not to conflict with ids in the content page. The id="tbEmail" in the <asp:textbox> tag becomes in the final output both id="ct100_tbEmail" and name="ct100$tbEmail" attributes. Obviously the cssclass attribute renders as a class attribute in the <input> tag with the same name. There is an empty <span> tag which the form processing code will use to display the word "Sent." if the form processes successfully. Also, the text box and text area fields are labeled for accessibility. Note that since the page has been redesigned in a master page, the id which the label specifies for="tbEmail" no longer links to the text box's id="ct100_tbEmail". I'll need to update these attributes in the master page to reflect the new "mangled" values. The ids no longer connect to the respective styles in the style sheets either, and I need to update the "mangled" values in the CSS files.

^{Skip to Main Points}

<-- Back to 3. Master Page Footer Code

Continue to 5. Master Page Navigation -->

<---- Jump back to Master Page Development