Form Help Markup

(X.)H.T.M.L. Markup Code for the Form Help Method

The Context-Sensitive help markup starts on code line 5 and ends on code line 7 in the code block.

• Below is a (X.)H.T.M.L. code block (gray colored area) containing all of the markup needed to construct the form.
• An external cascading style sheet (master.css) positions the Context-Sensitive help icon on the right side of the h3 element instruction text for quick association and access to it.
• For your editing and reference purposes, this external C.S.S. style sheet is contained within the main project folder along with the rest of the working parts of this tutorial.

Definitions of the highlighted code in the code block:

<a></a> This is the anchor (link) element which contains the following attributes and their values:

rel="help" This markup attribute and its value act as the structural "hook" to the external DOM/JavaScript.

href="HelpExample.htm" This markup attribute and its value identify the hyperlink path to the external Context-Sensitive help web page.

<img - - - src="images/help_small.gif" This markup attribute and its value identify the source location of the external help icon image.

1. <form action="" method="post" id="enquiryform">

2.   <fieldset>

3.     <legend>Enquiry Form</legend>

4.     <h3 title="help instructions">Click the icon to view help in a new window.

5.       <a rel="help" href="HelpExample.htm">

6.       <img alt="helpicon" title="Click to view help in a new window."

7.       width="16" height="16" src="images/help_small.gif"/></a>

8.     </h3>

9.     <div>

10.       <label for="subject" title="Subject dropdown list.">

11.         Subject <span class="req"">Required</span></label><br />

12.         <select name="subject" id="subject"

13.           <option value="">Select a Subject</option>

14.           <option value="Option 1">Help Authoring Tools</option>

15.           <option value="Option 2">Microsoft HTML Help</option>

16.           <option value="Option 3">Web-based Help</option>

17.           <option value="Option 4">Context-Sensitive Help</option>

18.         </select><br />

19.       <label for="name" title="Name field">

20.         Name <span class="req"">Required</span></label><br />

21.         <input type="text" name="name" id="name" /><br />

22.       <label for="email" title="Email field">

23.         Email <span class="req"">Required</span></label><br />

24.         <input type="text" name="email" id="email" /><br />

25.       <label for="message" title="Message field">

26.         Message <span class="req"">Required</span></label><br />

27.         <textarea name="message" id="textarea" rows="6" cols="30"</textarea><br />

28.       <label for="updates" title="Updates checkbox">

29.         Send Me Updates <span class="req">Optional</span></label><br />

30.         <input type="checkbox" name="updates" id="checkbox" value="n" />

31.     </div>

32.       <label for="submit" title="Click this button to submit your enquiry.">

33.         <input class="submit" type="submit" id="submit" value="Submit Enquiry" /></label>

34.   </fieldset>

35. </form>

top