1. C REATING HTML F ORMS

2. Web forms allow you to receive feedback, orders, or other information from your Web pages readers. If you’ve ever used a Web search engine such as Google or Yahoo!, you’re familiar with HTML forms. Product order forms are also an extremely popular use of forms. HTML form is part of a Web page that includes areas where readers can enter information to be sent back to you, the publisher of the Web page.

3. H OW HTML F ORMS W ORK Before you learn the HTML tags to make your own forms, you should understand how the information that someone fills out on a form makes its way back to you. You also need to have the person who runs your Web server computer set it up to process your forms. Every form must include a button for the user to submit the form. When someone clicks that button, all the information he or she has filled in is sent to an Internet address that you specify in the form itself.

4. H OW HTML F ORMS W ORK Almost all ISP companies that offer Web page hosting also provide preprogrammed scripts to their customers for processing forms. A form-processing script also usually generates some sort of reply page and sends it back to be displayed for the user. It’s also possible to set things up so that much of the form information can be interpreted and processed automatically.

5. C REATING A F ORM Every form must begin with a tag, which can be located anywhere in the body of the HTML document. The form tag normally has two attributes, method and action: mailto:me@mysite.com The method is almost always “post”, which means to send the form entry as a document. The action attribute specifies the address to which to send the form data. You have two options here: You can type the location of a form-processing program or script on a Web server computer, and the form data will then be sent to that program. You can type mailto: followed by your email address, and the form data will be sent directly to you whenever someone fills out the form.

6. T EXT I NPUT To ask the user for a specific piece of information within a form, use the tag. This tag must fall between the and, but it can be anywhere on the page in relation to text, images, and other HTML tags. For example, to ask for someone’s name you could type the following: What’s your first name?

7. T EXT I NPUT The type attribute indicates what type of form element to display – a simple one-line text entry box. The size attribute indicates approximately how many characters wide the text input box should be. If you are using a proportionally spaced font, the width of the input will vary depending on what the user enters. If the input is too long to fit in the box, most Web browsers will automatically scroll the text to the left. maxlength determines the number of characters the user is allowed to type into the text box. If someone tries to type beyond the specified length, the extra characters won’t appear.

8. T EXT I NPUT If you want the user to enter text without its being displayed on the screen, you can use instead of. Asterisks (***) are then displayed in place of the text the user types. The size, maxlength, and name attributes work exactly the same for type=“password” as for type=“text”. Identifying Each Piece of Form Data No matter what type an input element is, you must give a name to the data it gathers. You can use any name you like for each input item, as long as each one on the form is different. When the form is sent to you, each the item is identified by name firstname= Jane lastname=Doe

9. I NCLUDING H IDDEN D ATA Want to send certain data items to the server script processes a form but don’t want the user to see them? Use the input type=“hidden” attribute. The attribute has no effect on the display at all; it just adds any name and value you specify to the form results when they are submitted. You might use this attribute to tell a script where to email the form results. For example, the following might indicate that the results should be mailed to me@mysite.com:me@mysite.com value=me@mysite.com

10. C HECK B OXES The simplest input type is a check box, which appears as a small square the user can select or deselect by clicking. You must give each check box a name. If you want a check box to be checked by default when the form comes up, include the checked attribute. For example, the following would make two check boxes: Baby Grand Piano Mini Piano Stool When the form is submitted, selected check boxes appear in the form result: baby=on Blank (deselected) check boxes do not appear in the form output at all.

11. C HECK B OXES You can use more than one check box with the same name, but different values, as in the following code: dog cat iguana If the user checks both cat and iguana, the submission result includes the following: pet=cat pet=iguana

12. RADIO BUTTONS Radio buttons, where only one choice can be selected at a time, are almost as simple to implement as check boxes. Just type type=“radio” and give each of the options its own input tag, but use the same name for all of the radio buttons in a group: Visa MasterCard The value can be any name or code you choose. If you include the checked attribute, that button is selected by default.

13. S ELECTION L ISTS Both scrolling lists and pull-down pick lists are created with the tag. You use this tag together with the tag: electric windows AM/FM Radio Turbocharger No HTML tags other than and should appear between the and tags.

14. S ELECTION L ISTS Unlike the text input type, the size attribute here determines how many items show at once on the selection list. If size=“2” were used in the preceding code, only the first two options would be visible, and a scrollbar would appear next to the list so the user could scroll down to see the third option. Including the multiple attribute allows users to select more than one option at a time, and the selected attribute makes an option selected by default. If the user selected Electric windows and Turbocharger, for instance, the form results would include the following lines: extras=Electric windows extras=Turbocharger

15. S ELECTION L ISTS If you leave out the size attribute or specify size=“1”, the list will create a pull-down pick list. Pick lists cannot allow multiple choices; they are logically equivalent to a group of radio buttons. For example, another way to choose between credit card types follows: Visa MasterCard>

16. T EXT A REAS The attribute mentioned earlier only allows the user to enter a single line of text. When you want to allow multiple lines of text in a single input item, use the and tags instead. Any text you include between those tags is displayed as the default entry. Here’s an example: Please send more information. As you probably guessed, the rows and cols attributes control the number of rows and column text that fit in the input box. Text area boxes do have a scrollbar, however, so the user can enter more text that fits in the display area.

17. S UBMIT Every form must include a button that submits the form data to the server. You can put any label you like on this button with the value attribute: A gray button will be sized to fit the label you put in the value attribute. When the user clicks it, all data items on the form are sent to the email address or program script specified in the form action attribute. You can also include a button that clears all entries on the form so users can start over if they change their minds or make mistakes, Use the following:

18. C REATING A C USTOM S UBMIT B UTTON You can substitute your own graphics for the default submit buttons. Type the following to use an image of your choice for a Submit button: The image named button.gif will appear on the page, and the form will be submitted whenever someone clicks that image. You can also include any attributes normally used with the tag, such as border or align.

19. HTML T AGS AND A TTRIBUTES C OVERED TagAttributeFunction … Indicates an input form action=“…”The address of the script to process this form input. method=“…”How the input will be sent to the server. Normally set to post. An input element for a form type=“…”The type for this input widget. Possible values are checkbox, hidden, radio, reset, submit, text and image. name=“…”The name of this item, as passed to the script. value=“…”The default value for a text or hidden item; for a check box or radio button, the value to be submitted with the form; for reset or submit buttons, the label for the button itself. “src=“…”The source file of an image.

20. HTML T AGS AND A TTRIBUTES C OVERED TagAttributeFunction checkedFor check boxes and radio buttons, indicates that this item is checked. size=“…”The width, in characters, of a text input region. maxlength=“…”The maximum number of characters that can be entered into a text region. align=“…”For images on forms, determines how the text and image will align. … Indicates a multiple text entry form element. Default text can be included. name=“…”The name to be passed to the script. rows=“…”The number of rows this text area displays. “cols=“…”The number of columns (characters) this text area displays

21. HTML T AGS AND A TTRIBUTES C OVERED TagAttributeFunction … Creates a menu or scrolling list of possible items. name=“…”The name that is passed to the script. size=“…”The number of elements to be display. multipleAllows multiple selection from the list. … Indicates a possible item within a element. selectedWith this attribute included, the option will be selected by default in the list. value=“…”The value to submit if this option is selected when the form is submitted.