Forms

They're usually used to send information to a specified email address, and can be very useful.

The form I'm going to show you how to make does not require CGI, because it uses your email client, just like the "mailto:" link. This form will only work with browsers Netscape and Internet Explorer versions 4.0 and above; for other browsers an email window will pop up.

Start off your form with this:

<form method="post" enctype="text/plain" action="mailto:kali@xentrik.net">
This begins the form code and tells the browser to "post" it to the address specified after "mailto:". The only thing you need to change is the email address.

Now you begin your form. Below are the most commonly used form elements.



code:  <input type="text" name="name" size="20">
result:

This is a text box. Where it says name="name" is where the text box is named. You could change it to name="address", so that when your visitor types in his/her address in the box, it will arrive in your mail looking like "address=whatever they typed."



code:  <textarea name="name" wrap="physical" rows="4" cols="20"></textarea>
result:

This is a text area. Again, name="name" does the same thing. <wrap="physical"> tells the box to wrap the text. "rows" tells how high the box is, and "cols" tells how wide. </textarea> closes the box.



code:  <input type="checkbox" name="favorite color" value="red">
           <input type="checkbox" name="favorite color" value="blue">
           <input type="checkbox" name="favorite color" value="yellow">
result:

These are checkboxes. Each button has to be given the same "name" for this to work, and "value" is what they stand for. For example, the code above assigns the buttons as red, blue and yellow, as the "name" of the buttons is "favorite color." Using checkboxes, the visitor can check more than one box at the same time.



code:  <input type="radio" name="name" value="yes">
           <input type="radio" name="name" value="no">
result:

These are radio buttons. Notice how you can only select one at a time. This is how radio buttons are different from check boxes, but otherwise they work the same way. These are great for yes or no questions.



code:  <select name="gender" size="1">
           <option selected>Select One</option>
           <option>Male</option>
           <option>Female</option>
           </select>
result:

This is a drop down select box. Click on it and the options are displayed. The code is very straightforward, and by now you should be getting the hang of the way form elements work. You can add as many options as you like.



code:  <input type="submit" value="Submit">
           <input type="reset" value="Reset">
result:

And here is what makes it all work. "Submit" will send you the contents of the form. "Reset" will clear the form so that the visitor can try again. You can change their "values" to show whatever you'd like.

Then you end off the whole thing with

</form>

And that's it! Click here to see an example form that you can edit and copy into your own page.