Forms
On your website, for the most part, you the host do the talking and the viewers do the listening. Sometimes, however, you would want to hear from your viewers. Sometimes you want specific information from your viewers. Information like, their email address, how often they visit, their age, etc. For this you should use forms.
<form method="post" action="mailto:sciences@molecularsciences.org">
Each form starts with the <form> tag and ends with </form>. Method="post" tells the browser that you want to post this form. Action="mailto:sciences@molecularsciences.org" tells the browser that all the information collected from this form will be mailed to this address. You can put any email address inside the action but be careful not to leave any space between mailto: and the email address.
Textbox is a small box of a defined size where the viewer can type something.
Name: <input type="text" name="name" size="30">
The attribute type gets text to specify that this is a text box. The attribute name is very important. When you will receive something from the person who mailed you some information, you will get a chunk of unformatted text. For example if someone sent you their name and email, you will receive something like: (MrSizzler)(MrSizzler@usa.net)(I think that your site is ...). This mail can very easily become very confusing. If you, however, use name attribute you will get something like name=(MrSizzler) email=(MrSizzler@usa.net),etc. The size attribute defines how many characters long the box is.
The radio buttons allow the user to either choose or not choose an item. This could become useful in many situations. For example you want the gender of the viewer.
Male <input type="radio" name="selection" value="item">
Female <input type="radio" name="selection" value="item">
Selection
Notice that the user can either choose Male or Female but not both. That makes sense. Notice that inside the input tag, value of type is now "radio". This tells the browser to draw a radio button here. One tag for each button. Notice that the values for name and selection are the same.
Married <input type="radio" name="common" value="item">
Male <input type="radio" name="condradictory" value="item">
Female <input type="radio" name="contradictory" value="item">
Note that now you can choose married and male or married and female but not male and female at the same time. This is because male and female are assigned the same name in the input tag but married is assigned a different name. The trick is that you can only choose one item from with the same name in the input tag at a time.
Checkboxes are another form of radio. Actually, it isn't, it just performs a function very similiar to them. Unlike radio buttons, checkboxes are boxes (square in shape) and when you click on them, you do get a black dot, but an 'X' or a checkmark depending on the brand and version of your browser. You can click on more on options in the checkboxes below. Try and see if you can make an option contradictory to another. In other words, if you choose cocoa, you can not choose nutmeg.
<input type="checkbox" name="extras" value="cinnamon"> Cinnamon
<input type="checkbox" name="extras" value="nutmeg"> Nutmeg
<input type="checkbox" name="extras" value="cocoa"> Cocoa
<input type="checkbox" name="extras" value="sugar"> Sugar
Textbox
Textboxes are very useful and are found in almost every form on the website. They allow the viewer to give comments and information which they could not in other fields of the form. Here is how to make a textbox.
<textarea name="comments" rows=10 columns =30 wrap> default text <textarea>
Note that unlike <input>, <textarea> has an ending tag. The name field is the same and the name field of <input>. Rows, and columns attributes defines size of the textfield. Numbers refer to the length in characters. Default is 1 row and 40 columns.
Wrap is an optional attribute which allows word-wrapping. If you do not use this attribute, the user will have to hit return.