Title: XHTML/CSS 8
Class: Coding
Date: 03.03.2007
XHTML/CSS Part eight - Forms
Forms are the most difficult and dangerous part of web page design. Not actually making them, that's easy, but using them safely! In todays pages, forms are often written directly in a language such as PHP or used with JavaScript and perl processing. In either case, HTML is still an essential part of the programming. In this article, we will learn how to make the form only. However, we must strongly advise against using a form without other methods of verification.
The form elements are straight forward enough, but achieving a good layout isn't easy. Even when tables are used, it can take a lot of trial and error to get it right. It is actually a little easier using divs, but still takes a lot of practice to get it right first time.
The form is still basically old fashioned HTML with very little modification for XHTML. In fact, only the <input> tag can be used without a closing tag. What is more, the form processing scripts are also getting quite aged. As a result, we will see a strange case where both 'name' and 'id' are commonly used. You will find that form elements cannot take style commands in general.
We start with the <form> tag which has a very annoying characteristic in that it is like the paragraph tag, adding an extra line after the closing tag. Since we will be using a div to contain the form elements, we have a frustrating choice - do we put the form inside a div, or use a div inside the form? Or both?
<form id="form1" name="form1" method="post" action="http://www.krelay.com/cgi-bin/myform.pl">
The closing tag is right at the end of all the form elements.
The method is either "get" or "post" with the second being much safer. The action is the address of the script or program that will process the form. (Don't try this example because myform.pl doesn't exist!) The id and name can, and perhaps should, be the same. Although if you only have one form on your entire site, then the name is not necessary but the id is required for JavaScript processing.
The text input boxes look like this:
<input type="text" name="usersname" id="usersname" size="25" maxlength="255" value=""></input>
The closing tag can be removed and substituted by the usual space/slash. But this tag can give lots of problems because the size of the box varies tremendously between different browsers.
Two things should be noted here. The name and id should not be given a reserved word in any of the languages involved in processing the form. For example, "user" and "username" could be reserved words in JavaScript or perl, but "usersname" should be OK. Second point is the maxlength value. Without it, your server could be brought to a grinding halt by someone inputting the entire contents of the Oxford English Dictionary! No, that isn't a joke - it happens!
The same format is also used for passwords, with the "type" being set to 'password' instead of 'text'. Likewise, a 'hidden' field, although not visible to the user, is useful for verifying that the form came from your page. Using JavaScript, we can place the time or date in hidden fields. In hidden fields, we fill in the 'value' directly.
<textarea id="message" name="message" cols="10" rows="15" value=""></textarea>
Again, textarea's can vary in size in different browsers and, this time, the end tag cannot be left off!
The <select> and <option> tags work in much the same way as the list tags. It is common practice, although not necessary, to keep the first field blank. In my opinion, when using this for "country", rather than list every country in the world, it is probably easier to give a text input box.
Checkboxes and radio buttons are very confusing and should be avoided if possible. They should not be included in an XHTML document. You can normally achieve the same result with a select box.
<input type="Checkbox" name="agree" value="yes">
<input type="Radio" name="gender" value="male">
The value is found by the processing script if the box or button is checked. You can have many with the same name but different values.
Here we have two forms of submit buttons.
<input type="button" name="Submit" value="Submit" />
<input type="submit" name="submit" value="Submit" />
The first one doesn't actually submit the form but can be used to start a JavaScript validation/submit process. The second does submit the form directly without any validation, so is not a good idea!
There you have an outline of the basic tags. The best way to learn about forms is to study actual forms used on web pages. You will find that most are still based on tables. In the case of divs, an align="right" type of div will contain the text labels and a second regular left aligned div will contain the form elements. Today, it is commonplace to use PHP for forms. Although PHP isn't very secure, it is certainly quite easy to make up and process forms. Even so, the basic elements are pure HTML.
Forms are normally kept on a seperate page due to their habit of changing size. If you must have them on a page containing other content, be sure to allow lots of space around the form elements.
The form allows a user full freedom to enter whatever he/she likes in the various boxes. It is quite easy to enter programming code and, particularly if using assembly language, this need not be very long to cause a lot of damage. Even though we have restricted the length, we should also prevent certain characters that are particularly dangerous. For example, the "back-tick" is used in perl to execute a shell command. (The back-tick is found to the left of 1 on a U.S. keyboard.) Therefore, a strict validation script is extremely necessary. Most scripts found on the Internet for this purpose are not strict enough! It is better not to use forms at all if you can find a better solution. Asking your viewers to email you is much safer.