I'm not going to spend a lot of time explaining how this works up front, however, if any of you reading this would like more information, please let me know. The first set of code belongs to your main page. I'm using .php extensions, so, everything except for the javascript code ends that way. You'll find some of the code is not relevant to the database itself, such as the W3C xhtml and CSS validations. Here is the index.php code:
<div id="container">
<div id="form1">
<form id="myForm" action="">
<fieldset>
<legend>Movie Database</legend>
<p>
<label>Title:</label>
<input tabindex="1" type="text" name="title" id="title" accesskey="T"/>
</p>
<p>
<label>Genre:</label>
<select tabindex="2" name="genre">
<option value="Unassigned">Unassigned</option>
<option value="Action">Action</option>
<option value="Comedy">Comedy</option>
<option value="Dark Comedy">Dark Comedy</option>
<option value="Docu/Edu">Docu/Edu</option>
<option value="Drama">Drama</option>
<option value="Family">Family</option>
<option value="Fantasy">Fantasy</option>
<option value="Horror">Horror</option>
<option value="Romance">Romance</option>
<option value="Sci-fi">Sci-fi</option>
<option value="Suspense">Suspense</option>
<option value="Thriller">Thriller</option>
</select>
</p>
<p>
<label>Release Date:</label>
<input tabindex="3" type="text" name="release" />
[yyyy]</p>
<p>
<label>Run Time:</label>
<input tabindex="4" type="text" name="run" />
[minutes]</p>
<p>
<label>Rating:</label>
<select tabindex="5" name="rating">
<option value="Unassigned">--</option>
<option value="NR">NR</option>
<option value="G">G</option>
<option value="PG">PG</option>
<option value="PG-13">PG-13</option>
<option value="R">R</option>
</select>
</p>
<p>
<label>Format:</label>
<select tabindex="6" name="format">
<option value="DVD">DVD</option>
<option value="HD DVD">HD DVD</option>
<option value="VHS">VHS</option>
</select>
</p>
<p>
<label>Notes:</label>
<input tabindex="7" type="text" name="notes" />
</p>
<p class="submit">
<input tabindex="8" type="button" value="Submit" onclick="postForm('myForm');" accesskey="S" />
</p>
<p class="clearform">
<input tabindex="9" type="reset" value="Reset" id="reset" accesskey="R"/>
</p>
</fieldset>
</form>
<form action="inv_query.php" method="get">
<p class="query">
<input tabindex="10" name="Query" type="submit" id="Query" value="Movie Inventory" />
</p>
</form>
</div>
<div id="search_form">
<form action="">
<fieldset id="fieldset2">
<legend>Database Query</legend>
<p><label>Title search:</label>
<input tabindex="11" type="text" id="title_search" onkeyup="showTitle(this.value)"/>
</p>
</fieldset>
</form>
<br />
<div id="txtHint"></div>
</div>
</div>
<div id="w3c1">
<ul><li> <a href="http://validator.w3.org/check?uri=referer"><img
src="images/2valid-xhtml10-blue.gif"
alt="Valid XHTML 1.0 Transitional" border="0"/></a></li>
<li>
<a href="http://jigsaw.w3.org/css-validator/">
<img style="border:0"
src="images/2valid-css2-blue.gif"
alt="Valid CSS!" />
</a></li>
</ul>
</div>
<script type="text/javascript" language="JavaScript">
document.forms['myForm'].elements['title'].focus();
</script>
