9.2. Designing a FormA "form" on the Web is considered to be zero or more form elements, plus a submit button. These forms are designed to electronically replicate the forms we've all filled in hundreds of times before in real lifesigning up for a bank account, a passport, etc. You start your form using the <form> HTML tag, and you end with </form>. By separating forms like this, you can have multiple forms on one page. Given the above definition, here is the most basic form in HTML: <form> <input type="submit" /> </form> That will simply show a button with "Submit" written on it, which will not submit any data when clicked. Figure 9-1 shows how it looks in Konqueror running on Linux: Figure 9-1. The most basic form is just a Submit button by itselfThere are two attributes to the <form> tag that you should be aware of and use: action and method. Action sets the location of the page that will handle the results of the formthe place where the variables should be sent. Method describes how the data should be submitted, and you have two options: GET and POST. 9.2.1. GET and POSTWhen defining the method a web browser should use to send variables to the page specified by your action, you either use GET or POST. Both send variables across to a page, but they do so in different ways. GET sends its variables in the URL of your visitors' web browsers (shown in Figure 9-2), which makes it easy to see what was sent. However, it also makes it very easy for visitors to change what was sent, and, moreover, there is usually a low limit on the number of characters that can be sent in a URLoften fewer than 250. As a result, if you send long variables using GET, you are likely to lose large amounts of them. Figure 9-2. HTTP GET sends data in the URL in a very obvious mannerPOST sends its variables behind the scenes, which means it is much harder to mimic, cannot be changed without some effort on your visitors' behalf, and has a much higher limit (usually several megabytes) on the amount of data that can be sent. The downside to using POST is that browsers will not automatically resend post data if your user clicks her Back button, leading to messages like "The data on this page needs to be resent", which often confuse users. This does not happen with GET, because browsers consider GET URLs the same as any other URL, and happily resend data as needed. You can set how much data PHP should accept by editing the post_max_size enTRy in your php.ini fileit is usually set to 8M by default, allowing your users to transfer up to 8 megabytes. Given this newfound knowledge, here's the same form again, this time using action and method. It will still look the same as our previous effort, but this time it will use POST to send data to someform.php: <form action="someform.php" method="post"> <input type="submit" /> </form> 9.2.2. Available ElementsThere are many types of elements you can place into your forms. The most important of these are shown in Table 9-1.
There are four elements worthy of particular note: file elements actually upload files to the server, and can take quite a long time to transfer if the connection speed is slowhandling file uploads is covered later. Hidden elements don't appear on your user's screen; they are useful when keeping information across forms and pages, or simply just to force input for certain fields. Password elements hide the password on the client side by using *s or something similar, but it is important to note that the password is still sent in plain textno encryption is done. Finally, textarea elements need a closing tag, with the text in between forming their content, i.e., <textarea>Some text</textarea>. 9.2.3. A Working FormWe now have enough information to construct a working form, so here goes: <form action="someform.php" method="post"> Name: <input type="text" name="Name" value="Jim" /><br /> Password: <input type="password" name="Password" /><br /> Age: <input type="text" name="Age" /><br /> <input type="submit" /> </form> That will submit three variables to someform.php: Name, Password, and Age. Form variables are given names using the name attributethe names you use here will be used in the PHP script that receives the variables. The default value of a field can be set using the value attribute, which means that the Name text box will be set to Jim by default. This new form is shown in Figure 9-3. The Age field, which will presumably contain numbers like 18, 34, etc., is the same type as the Name field, which is likely to contain strings like "Bob," "Sarah," etc. HTML does not have any way to say "restrict this field to numbers only," which means users can enter their age as "Elephant," if they wish. Never trust input from users! And now a more complicated form, using various other types: <form action="someform.php" method="get"> Name: <input type="text" name="Name" value="Jim" /><br /> Figure 9-3. This time the form is more advancednote the default value for the Name fieldPassword: <input type="password" name="Password" maxlength="10" /><br /> Age range: <select name="Age"> <option value="Under 16">Under 16</option> <option value="16-30" selected="selected">16-30</option> <option value="31-50">31-50</option> <option value="51-80">51-80</option> </select><br /><br /> Life story:<br /> <textarea name="Story" rows="10" cols="80"> Enter your life story here</textarea><br /><br /> <input type="radio" name="FaveSport" value="Tennis" /> Tennis <input type="radio" name="FaveSport" value="Cricket" /> Cricket <input type="radio" name="FaveSport" value="Baseball" /> Baseball <input type="radio" name="FaveSport" value="Polo" /> Polo <br /> <input type="checkbox" name="Languages[ ]" value="PHP" checked="checked" /> PHP <input type="checkbox" name="Languages[ ]" value="CPP" /> C++ <input type="checkbox" name="Languages[ ]" value="Delphi" /> Delphi <input type="checkbox" name="Languages[ ]" value="Java" /> Java <br /><input type="submit" /> </form> There are several pieces of particular importance in there, so you should read through carefully:
Figure 9-4 shows how the form should look. Figure 9-4. Some of the form elements on offerHundreds of books have been published on HTML programming, and if you want to carry on learning more about HTML, you will do best to pick up one of them. If you're not sure where to start, try HTML & XHTML: The Definitive Guide by Musciano and Kennedy (O'Reilly). |