Pages:1 Good Forms2 A Basic Textbox Form3 Method to the Madness: Get vs. Post4 Radio Buttons, Checkboxes, and More5 Some Other Tricks
Good Forms
Page 2 — A Basic Textbox Form 
If you want to give your users a place to enter a simple string of text, you can give them a textbox with the code that appears below. Just to make things really fun, let's add a Submit button. Here's how it's done:  

And here's the form the above code will produce. There you go. To get that textbox, you just put an tag inside the
tag. The type attribute, which I've set as text, is what makes this form a textbox. I included a value, which populates the textbox with the words "my box" (the user can override this value by typing over it). The size attribute indicates the width of the textbox on the page, and the maxlength attribute limits the number of characters a user can enter. Just try entering 26 characters in this textbox. I dare you. If you look at the Submit button, you'll see that the code here is pretty similar. When the type attribute equals submit, the browser gives us a button. And the text in the value attribute serves as the button's caption. If you want to give your users more space, simply use a textarea tag:
It looks like this: Now that we have the basic, basic form down, let's take a closer look at that opening
tag. next page» Pages:1 Good Forms2 A Basic Textbox Form3 Method to the Madness: Get vs. Post4 Radio Buttons, Checkboxes, and More5 Some Other Tricks Good Forms Page 3 — Method to the Madness: Get vs. Post We already know that the action attribute of the form is going to send the user information to a script, which will then read it. There are two ways to accomplish this — through "get" or "post." First, let's talk about get. Probably the easiest way to explain get is to show it in action. I'd like you to enter some information in the form below and then click on the Submit button. After the next page loads, take a look at the URL in your browser. You should notice that, after the page name (http://www.hotwired.com/webmonkey/99/30/stuff4a/ot_nextpage2.html), there is a question mark. Following that, we have the name of the textbox ("thebox"), an equals sign, and the text you entered. This portion of the URL is called the querystring. So by using get, values of the form elements are carried to the querystring in "name=value" pairs. Spaces are substituted with %20, and additional form elements are separated by ampersands. Once you pass the information to the querystring, a CGI script, JavaScript, or ASP script can make use of that information. Get is commonly used because it offers one very nice feature: When users bookmark pages, they bookmark the querystrings with it. Sites like Amazon will use the querystring for just this reason; that way you can bookmark the page, return, and buy the book. But this also raises a potential problem. In some cases, you may not want the user to see the values passed along by the form. In these circumstances, you'll use the "post" method. With post, the form information can still be read by whatever script you're using, but it is not visible to the user and cannot be bookmarked. OK, now that you know your methods, let's finish up by taking a closer look at the different kinds of form elements. next page» Pages:1 Good Forms2 A Basic Textbox Form3 Method to the Madness: Get vs. Post4 Radio Buttons, Checkboxes, and More5 Some Other Tricks Good Forms Page 4 — Radio Buttons, Checkboxes, and More You've already seen the textbox in action. Now let's look at a couple of other form elements that will come in handy, starting with "hidden." This code ...
Checkbox 1 here
Checkbox 2 here
... produces this form: Checkbox 1 here Checkbox 2 here Notice that after you click Take a Look, the name and value of the hidden element are passed to the querystring. The users have no knowledge of the presence of the hidden values (unless they View Source), and they have no control over the value of the hidden element. The checkbox is a different story. If the checkbox is checked, the name and value of the checkbox are passed on to the querystring. If the checkbox isn't checked, nothing is passed along. Include the word "checked" in the element to make the checkbox default to being checked. The checkbox is great for yes/no decisions. Yes, the box is checked. No, it's not. But what if there are more than two choices? There are a couple of ways to go about this: radio buttons or a pulldown list. In the code below, notice that I have three elements with the type radio, and each of these elements has the same name (radios). We could add as many radios as we wanted to this list. If you want one of the values to be preselected, insert checked into the tag. The code:
This is radio button 1
This is radio button 2
This is radio button 3
The form: This is radio button 1 This is radio button 2 This is radio button 3 With a pulldown box, we need to surround the options in
The form: And if you don't like the look and feel of what I've shown so far, you can always use a menu, which looks a little something like this: And here's the code that makes this thing tick:

At this point, I'm sure you understand pretty much everything that's going on here. There are only a couple of things we should go over. First is the size attribute in the select element, which indicates the number of options that will be visible within the box. The user will have to use the scroll bars to get to the other options. By including the word multiple in the select tag, we enable the user to select more than one option. (To select more than one option, users just hold down the Control key on PCs or the Command key on Macs when they click on multiple listings.) If we didn't add the word multiple, users could select only one item at a time. next page»





Make your own free website on Tripod.com