White Bar

Forms Part I



What is a form?


The purpose of a form is to get feedback or information from those viewing your site. This tutorial will help you build a form that will send an e-mail to the desired address with the information entered into the form. However, to do this you will have to learn a small amount of HTML. Don't worry it will mostly be copy/paste, and HTML is one of the easiest programming languages to learn! If you need a form but don't have time, are uncomfortable with, or don't want to learn a programming language, please contact the Faculty Technology Center.

 

Basic HTML

 

All HTML does is put an opening tag and a closing tag around text. Below is a simple example:

 

<p>This is a paragraph. </p>

 

Some tags open and close in the same breath, like the following:

 

<hr />

 

See how the " / " means "close" in both examples?

 

That's not so scary! So all you have to do when writing HTML, is know the right tags to use and where to put them.

 

Sample Form

 

The following is a basic form. If you fill out and submit the form then check your e-mail, you should see the message you typed.


E-mail myself a comment

(Starred fields are required)

Your Name

Your E-mail *

Comments

 

Here is the code for the above form. It looks scary at first, but it isn't really. The section in red is the form itself, the remaining code adds style and validates the form. In Forms Part II I will show you how to build your own form in a way that is easy to understand.

<!-- Form begins -->
<h2>E-mail myself a comment</h2>
(Starred fields are required)
<form name="form1" onsubmit="return required()" method = "post" action="http://www2.byui.edu/AspUtilities/emailAForm.asp">
<p>Your Name: <input type="text" name="Name" size="20" /></p>
<p>Your E-mail:<input type="text" name="txtEmailTo" class="req" size="20" /></p>
<p>Comments:<br /><textarea rows="10" cols="20" name="Comment"></textarea>
<input type = "hidden" name ="txtEmailSubject" value = "Web Editor Form Tutorial"/>
<input type = "hidden" name ="txtEmailFrom" value = "webtools@byui.edu"/>
</p>
<!-- Buttons of course -->
<input type="submit" value="Submit" name="submit"/>
<input type="reset" value="Reset" name="Reset"/>
<input type="button" value=" Print " name="Print" onclick="javascript:window.print()"/></p>
<p><br /></p>
</form>


<!-- Form Styles -->
<style type="text/css">
.req {background-color: #FFFF99;}
</style>
<!-- Validation Javascript -->
<script type="text/javascript">
function required(){
if(document.form1.txtEmailTo.value ==""){
window.alert ("Please fill in all the required fields");return false
}else {
return true}
}
</script>
<!-- Form Ends -->

Continue to: Forms Part II

Place Holder