The Disturbed Web Authoring Tutorials

The Disturbed Web Authoring Tutorials [ H T M L ] The Disturbed Web Authoring Tutorials

[ T u t o r i a l s ] [ H T M L ] [ C S S ] [ D H T M L ] [ T i p s ] [ D e s i g n ] [ M i s c ] [ A d d L i n k ] [ A d v e r t i s e ] [ F e e d b a c k ] [ C o n t a c t ] [ H o m e ]	Lesson Nine Forms The next topic is forms. Forms is where HTML gets a little bit difficult. Forms can be used to create feedback devices so the users of the webpage can send you advice/comments. The other main use of forms is navigation, they can really tidy up a navigation bar, or links page. So here we go Firstly, im not going to teach you how to make individual forms that sit and do nothing. I will use to examples to teach forms, one is a feedback form, which sends all the info from the forms to a email address, and the second will be a simple navigation drop down box. Firstly the feedback form Here is the code to start with, this needs to be in the <BODY> tags. <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain"> </FORM> Place the above code on a page, and change it so your email address is there, because when you use this code on a page, it will send the results of the form to the email address listed there. Now that code is usless at the moment because there is nothing there to accept any input from the user. So lets put a simple text box there. Replace the above code with this. <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain"> Surname: <INPUT type="text" name="surname"> </FORM> The above code will produce the following Surname: There you go, your first text box. Now we can add more things to our feedback form, how about a memo box <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain"> Surname: <INPUT type="text" name="surname"> Comments: <TEXTAREA name="comments" rows=4></TEXTAREA> </FORM> The above code will produce the following Surname: Comments: Now for a drop-down box <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain"> Surname: <INPUT type="text" name="surname"> Comments: <TEXTAREA name="comments" rows=4></TEXTAREA> Whats your favourite animal: <SELECT name="Whats_your_favourite_animal"> <OPTION SELECTED>Link <OPTION>Webring <OPTION>Newsgroup <OPTION>Other </SELECT> </FORM> The above code will produce the following Surname: Comments: Whats your favourite animal: Our feedback form is starting to take shape, but what it needs is some check boxes <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain"> Surname: <INPUT type="text" name="surname"> Comments: <TEXTAREA name="comments" rows=4></TEXTAREA> Whats your favourite animal: <SELECT name="Whats_your_favourite_animal"> <OPTION SELECTED>Link <OPTION>Webring <OPTION>Newsgroup <OPTION>Other </SELECT> <INPUT TYPE="checkbox" name="animal_likes" VALUE="big"> Big <INPUT TYPE="checkbox" name="animal_likes" VALUE="furry"> Furry </FORM> The above code will produce the following Surname: Comments: Whats your favourite animal: Big Furry We can change those check boxes to radio buttons by replacing the TYPE="checkbox" attribute to TYPE="radio". Pretty cool huh. The final two things to add to our form are the submit and reset buttons. This is the easiest part of all. Just place this code just before the closing tag of the form (</FORM>). <INPUT TYPE="submit" VALUE="Send this form in" NAME="Submit Button"> <INPUT TYPE="reset" VALUE="Clear all the fields" NAME="Reset Button"> Now we have our final form, ready for our web page Surname: Comments: Whats your favourite animal: Big Furry Now thats it, that is all you need to know to create a simple feedback form that will send information to a specified email address. Now it is time to move on to the last lesson - FRAMES!!!!

[ T u t o r i a l s ]

[ H T M L ]
[ C S S ]
[ D H T M L ]

[ T i p s ]

[ D e s i g n ]

[ M i s c ]

[ A d d L i n k ]
[ A d v e r t i s e ]
[ F e e d b a c k ]
[ C o n t a c t ]

[ H o m e ]

Lesson Nine

Forms

The next topic is forms. Forms is where HTML gets a little bit difficult. Forms can be used to create feedback devices so the users of the webpage can send you advice/comments. The other main use of forms is navigation, they can really tidy up a navigation bar, or links page. So here we go

Firstly, im not going to teach you how to make individual forms that sit and do nothing. I will use to examples to teach forms, one is a feedback form, which sends all the info from the forms to a email address, and the second will be a simple navigation drop down box. Firstly the feedback form

Here is the code to start with, this needs to be in the <BODY> tags.

   <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain">

   </FORM>

Place the above code on a page, and change it so your email address is there, because when you use this code on a page, it will send the results of the form to the email address listed there. Now that code is usless at the moment because there is nothing there to accept any input from the user. So lets put a simple text box there. Replace the above code with this.

   <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain">

   Surname: <INPUT type="text" name="surname">

   </FORM>

The above code will produce the following

There you go, your first text box. Now we can add more things to our feedback form, how about a memo box

   <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain">

   Surname: <INPUT type="text" name="surname">

   Comments: <TEXTAREA name="comments" rows=4></TEXTAREA>

   </FORM>

The above code will produce the following

Now for a drop-down box

   <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain">

   Surname: <INPUT type="text" name="surname">

   Comments: <TEXTAREA name="comments" rows=4></TEXTAREA>

   Whats your favourite animal: <SELECT name="Whats_your_favourite_animal">
   <OPTION SELECTED>Link
   <OPTION>Webring
   <OPTION>Newsgroup
   <OPTION>Other
   </SELECT>    </FORM>

The above code will produce the following

Our feedback form is starting to take shape, but what it needs is some check boxes

   <FORM ACTION="mailto:InsertEmailAddressHere@blah.com"METHOD="POST" ENCTYPE="text/plain">

   Surname: <INPUT type="text" name="surname">

   Comments: <TEXTAREA name="comments" rows=4></TEXTAREA>

   Whats your favourite animal: <SELECT name="Whats_your_favourite_animal">
   <OPTION SELECTED>Link
   <OPTION>Webring
   <OPTION>Newsgroup
   <OPTION>Other
   </SELECT>

   <INPUT TYPE="checkbox" name="animal_likes" VALUE="big"> Big
   <INPUT TYPE="checkbox" name="animal_likes" VALUE="furry"> Furry

   </FORM>

The above code will produce the following

We can change those check boxes to radio buttons by replacing the TYPE="checkbox" attribute to TYPE="radio". Pretty cool huh. The final two things to add to our form are the submit and reset buttons. This is the easiest part of all. Just place this code just before the closing tag of the form (</FORM>).

   <INPUT TYPE="submit" VALUE="Send this form in" NAME="Submit Button">
   <INPUT TYPE="reset" VALUE="Clear all the fields" NAME="Reset Button">

Now we have our final form, ready for our web page

Now thats it, that is all you need to know to create a simple feedback form that will send information to a specified email address.

Now it is time to move on to the last lesson - FRAMES!!!!

Last modified Thursday 27 January 2000