File Under: HTML, Web Standards

Add HTML Forms to Your Site

So you’ve decided it’s time to interact with your users. You’re tired of this one-way street — you talking, them listening. You want to actually hear what your readers have to say. In order to do this, you’ll need to provide a way for people to enter information. Therefore, you’re going to need an HTML form (to process this information, however, you must implement some sort of script, which might require another tutorial).

Contents

  1. Good Form!
  2. A Basic Textbox Form
  3. Method to the Madness: Get vs. Post
  4. Radio Buttons, Checkboxes, and More
  5. Some Other Tricks

  6. Good Form!

    Like everything else in HTML, forms are really easy:just drop a few tags into your favorite text editor and you’re good to go. Here, take a look:

     <form action="nextpage.html" method="get" name="myform">
    
    
    
     </form>
    
     

    These tags are going to be the shell of every form you create. It’s nothing too complicated:just opening and closing <form> tags, which house the meat of the form. Notice that there are three attributes in the opening tag:action, method, and name. We’ll be talking about method a little later, but for now let’s take a gander at the other two.

    You’re always going to want an action attribute. Why? Because you want your form to do something. The form itself just collects the information; you’re going to need a program that works within the form. The action attribute will point to a script that will process the information that’s been entered.

    Then we come to the name attribute. This one’s pretty easy. It’s not really necessary, but it’s best to get in the habit of naming your forms (so if you ever want to use forms with JavaScript, you’ll be ready).

    Now, let’s move on to the method attribute and the most simple form element, the ever-popular textbox.


    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:


    
     <form action="nextpage.html" method="get" name="myform">
    
    
    
        <input type="text" value="my box" name="thebox" align="top"
    
     maxlength="25" size="40"><br>
    
    
    
        <input type="submit" value="Take a Look" align="middle">
    
    
    
     </form>
    
    
    
    


    And here’s the form the above code will produce.


    There you go. To get that textbox, you just put an <input> tag inside the <form> tag. The type attribute, which has been set as text, is what makes this form a textbox. Also included is 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:


    <form>
    
    
    
        <textarea cols=25 rows=6>The default value goes here.</textarea>
    
    
    
    
    
     </form>
    
    


    It looks like this:

    The default value goes here.

    Now that we have the basic, basic form down, let’s take a closer look at that opening <form> tag.


    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, 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.

    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 …


    
     <form action="nextpage3.html" method="get" name="form2">
    
    
    
        <input type="hidden" name="hiddenvalue" value="hiddenstuff"><br>
    
    
    
        <input type="Checkbox" name="check1" value="yup" checked>
    
    
    
        <b>Checkbox 1 here</b><br><input type="Checkbox" name="check2" value="yup">
    
    
    
    
    
        <b>Checkbox 2 here</b><br><input type="Submit" value="Take a Look" align="MIDDLE">
    
    
    
     </form>
    
    
    
    

    … produces this form:

    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:


    
     <form action="nextpage3.html" method="get" name="form3">
    
    
    
        <input type="radio" name="radios" value="radio1" checked><b>This is radio button 1</b><br>
    
    
    
        <input type="radio" name="radios" value="radio2"><b>This is radio button 2</b><br>
    
    
    
        <input type="radio" name="radios" value="radio3"><b>This is radio button 3</b><br>
    
    
    
        <input type="Submit" value="Take a Look" align="MIDDLE">
    
    
    
    
    
     </form>
    
    

    The form:


    With a pulldown box, we need to surround the options in <select> tags. A quick look at the code below should tell you how this works. Note that the text that appears to the user has nothing to do with the value passed to the querystring. As always, it’s the value attribute that gets passed.

    The code:


    
     <form>
    
    
    
         <select name="pulldown">
    
    
    
             <option value="1">pulldown item 1</option>
    
    
    
             <option value="2">pulldown item 2</option>
    
    
    
         </select><br>
    
    
    
         <input type="Submit" value="Take a Look" align="MIDDLE">
    
    
    
     </form>
    
    


    The form:

    And if you don’t like the look and feel of what’s been 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:


    
     <form action="nextpage3.html" method="get" name="form3">
    
    
    
         <select name="menu" size="3" multiple>
    
    
    
             <option value="1">menu item 1</option>
    
    
    
             <option value="2">menu item 2</option>
    
    
    
             <option value="3">menu item 3</option>
    
    
    
             <option value="4">menu item 4</option>
    
    
    
         </select>
    
    
    
         <input type="Submit" value="Take a Look" align="MIDDLE"><br>
    
    
    
     </form>
    
    
    
    


    At this point, you hopefully understand pretty much everything that’s going on here. There are only a couple of things left to cover.

    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.


    Some Other Tricks

    You’ve already seen the Submit button and you know how to place custom text on a button. But if that’s not enough control for you, you can always use an image. Let’s look at the following form.

    Choose an item and click on the monkey to submit:


    How did we make that monkey into a Submit button? Well, here’s the code for the form:


    
     <form action="nextpage4.html" method="get" name="form3">
    
    
    
         <select name="menu" size="3" multiple>
    
    
    
             <option value="1">menu item 1</option>
    
    
    
             <option value="2">menu item 2</option>
    
    
    
             <option value="3">menu item 3</option>
    
    
    
             <option value="4">menu item 4</option>
    
    
    
         </select>
    
    
    
         <input type="image" alt="The Monkey" src="http://www.wired.com/images/archivetuff/smallmonkey.gif">
    
    
    
     </form>
    
     

    You see? Just change the type from submit to image and provide a GIF. Now you’re set.

    Finally, if you have a really long form and you want to give your users a chance to clear out the selections they’ve made, you can add a Reset button. If you enter some information into the textbox below and then click Reset, you’ll see how this works.


    Here’s the code for this form:

     <form action="nextpage4.html" method="get" name="form1">
    
    
    
         <input type="Text" value="" name="thebox" size="40" maxlength="25"><br>
    
    
    
         <input type="reset" name="mybutton" value="Reset">
    
    
    
     </form>
    
    
    
    

    And that’s about it. You now have pretty much all you need to drop a form onto your site. What’s left? You need to set up something on the backend to process the information you glean with your form.

    In his JavaScript Tutorial, Thau! shows all manner of form manipulation.

    That’s all folks! Now it’s only a matter of time before those users start reaching out and touching you through your web site.