Forms

        So, you have come all this way since you started your HTML journey, and now you are asking about how to make a form? Well, look no farther, for this is the place for you. Now, first off, you want to see what a form looks like, right? Well, here one is :



        Go on. I know your dying to use it. It is a function form. It uses many of the form elements we will discuss here, but not all of them. A form is a way of gathering information about the user, to keep track of attendance, etc... They are highly useful, and can become, yes, a valuable weapon in your arsenal of HTML knowledge. Anyway, do you want to see the script for that form? Unfortunately, putting it on the page would take up quite a lot of space, however, you can see it by viewing the source of this page. Right Click on the paragraph and select view source. It is outlined there for you.

        Enough of the introduction stuff, let's get right down to how to make a form. The first thing you must know is how to start and end the form. Well, the magic tags are none other than <FORM> and </FORM>. There are two attributes of the <FORM> tag you might want to know about. They are the METHOD and ACTION attributes. The first METHOD describes what the form does. It can either submit information or be a link. More on the link at the end. We are concentrating on it being a submitting device.

        The value of METHOD we are concerned with is post. This tells the browser that the form will be submitting information either via e-mail or through a cgi, but that comes much later. With the post value of METHOD, comes a certain value of the ACTION attribute.



        The mailto: tells the browser where the form data will be sent. This is critical, for without it, the form would not function properly. Now we come to the elements of the form. The following is list of the elements that we will be discussing in this tutorial.

Text Box Text Area Radio Button Check Box Select Box Password Box Submit Button Reset Button

        Are you ready for the tutorial? You better be, for here we go!!!

---

        The first element will be the Text Box. An example of this would be in the form at the top of the page. The single-rowed boxes are text boxes. If you don't understand what I mean, then here is another example :



        There are several attributes that can be used to modify the text box. Two of which are mandatory, or the text box just won't work. The list of attributes are as follows :

TYPE NAME VALUE SIZE MAXLENGTH

        The two mandatory are NAME and TYPE. Without type, there would be no form element. You have seen the TYPE attribute at work, so we will go to the NAME and VALUE pair. The NAME attribute describes what the data will be catagorized under, and the VALUE attribute describes the default setting for the text inside of the text box.



        The last two attributes are SIZE and MAXLENGTH. They do exactly what they sound like they do. SIZE determines the horizontal size of the text box, and MAXLENGTH sets the maximum amount of text characters that can be typed. The value for both of these attributes is a number. My advice would be never to use MAXLENGTH unless absolutely necessary. It can become quite a hassal if the user wants to type something long.

---

        The next element has its own tag, the <TEXTAREA>. Unlike the text box, this element requires that it be stopped, using the </TEXTAREA>. Any text placed between the two will be the value of the textarea. The textarea has its own set of attributes too. These are :

COLS ROWS NAME

        That is it!!! Only three attributes. The NAME is the same as with the text box. The ROWS and COLS attributes do exactly what they say, they set the number of rows and columns in the textarea. Please remember to use </TEXTAREA>, or your page will get rather messy and errors will appear. I will leave you without an example other than at the top so you can create your own version of the textarea.

---

        Our next two topics will be stuck together, as they have the same set of attributes. They are the radio button and checkbox. There are examples below :



        Go ahead. Click away. Notice that you can only click one radio button, the bottom one, and have it checked at a time. You can have as many checkboxes, on the top, as you want checked at a time. That is the only basic difference. They have the same attributes too :

NAME - mandatory VALUE - mandatory CHECKED

        That's it again, only three. There is, of course, the TYPE attribute but that stays anyway. NAME and VALUE are mandatory, or the form elements will not work. They describe what will be returned if they are checked when the form is submitted. Adding CHECKED, and that's it, to the script will result in it being active, or checked, when the browser loads the page. That's it for CHECKBOXES and RADIOS.

---

        The next element, the select box, also has its own tags, ending tags, and attributes. Here is a simple select box :



        Now we get to the fun part, breaking down the script. Let's do this the way we always have, with the bullets :

The <SELECT> tag starts the process. The NAME is mandatory, as it is in all elements. The SIZE determines how many options will be showing at once. The <OPTION> tag designates what the options of the box will be. By adding SELECTED, you get the option that appears when the page loads. Do not ever forget </SELECT>. It ends the select box process.

        The breaking down part covers everything you need to know about select boxes, except for one thing. By adding MULTIPLE to the <SELECT> tag, you allow for multiple choices to be selected at once. Without it, only one may be selected.

---

        The password box has the same uses and attributes as the text box, so I won't go over the attributes again. The only difference is that the information inside of it appears in astericks, *******, instead of letters.

---

        The last two elements go at the end. The submit button sends the information to the location designated by the ACTION of the <FORM> tag. The reset button resets the entire thing. You can change what the buttons say by using the VALUE attribute.

---

        That completes the forms tutorial. Just do not forget to use </FORM>, okay? I wish you the best of luck with all of your form use.