Приглашаем посетить
Пастернак (pasternak.niv.ru)

Section 9.2.  Designing a Form

Previous
Table of Contents
Next

9.2. Designing a Form

A "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 itself
Section 9.2.  Designing a Form


There 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 POST

When 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 manner
Section 9.2.  Designing a Form


POST 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 Elements

There are many types of elements you can place into your forms. The most important of these are shown in Table 9-1.

Table 9-1. HTML elements for use in forms

Element

Description

input type="checkbox"

A checkbox that lets users select multiple options.

input type="file"

A text box plus a button that opens a file selection dialog.

input type="hidden"

A hidden form element where you set the value.

input type="password"

A text box where the text is replaced by a password character (usually asterisk *).

input type="radio"

A radio button. Radio buttons are like grouped checkboxesyou can only select one at a time.

input type="reset"

A button to clear the form. It's one of the weird oddities of the Web that this still existsdo you know anyone who uses it?

input type="submit"

A button to submit the form.

input type="text"

A text box.

option

An option in a SELECT element.

select

A listbox; can also be a drop-down list box.

textarea

Multiline text box.


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 Form

We 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 field
Section 9.2.  Designing a Form


    Password: <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:

  • maxlength="10" is one of the attributes for the Password elementthis can be used in normal text boxes too, and acts to restrict the number of characters that can be typed in to the value of maxlength (10, in the example).

  • Age is now a drop down list boxnote how the name attribute is placed inside the select element, but each individual option element has its own value. The text inside the value attribute is what is submitted to the form handler specified in the form's action attribute. The text after each option and before the next option is the text the user will see.

  • selected is specified as an attribute of one of the option elements, which means that that option will be the default selection of the parent select list.

  • Life story is a textarea element. Note that it has attributes rows and cols to specify the size of the text area in characters.

  • All members of a radio element group need to have the same name attribute. The name attribute is used to inform the browser which group each radio element is part of so that users can select only one at a time.

  • All members of a checkbox group need to have the same name attribute, and that name attribute needs square brackets [ ] at the end. The reason for the square brackets is that it informs PHP that the value may be an array of informationusers can select multiple values, and PHP will place them all into an array of the value of the name attribute.

  • checked is specified as an attribute of one of the checkboxes, which means it will be checked by default.

  • GET is the method attribute for the form, meaning that the information sent through to the handler page (someform.php) will be sent in the location bar of the browser as a normal URL. This will allow you to see how easy it is to change variables in the location bar and, by entering lots of text into the Story textarea element, how easy it is to have too much data for GET to handle.

Figure 9-4 shows how the form should look.

Figure 9-4. Some of the form elements on offer
Section 9.2.  Designing a Form


Hundreds 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).


Previous
Table of Contents
Next