Creating HTML Forms in Java

Print QR Code JIS X 0510 in Java Creating HTML Forms

No matter what kinds of fields you put in your form radio buttons, check boxes, and text areas, for example you start by inserting the <form> tag itself Think of a <form> tag as the logical container for the instructions that create all the buttons, boxes, and so on that you place in your form Make sure you start with this first step creating an HTML form before you move on to the other exercises in this chapter

The following exercise walks you through creating an HTML form Start with an open page either a new page or an existing page to which you want to add a form: 1 Choose Insert Form Form or click the Form icon on the Forms Insert bar An empty <form> tag is inserted in your document and is displayed as a rectangle outlined by a red dotted line like the one shown in the Document area in Figure 11-1 This dotted line defines the boundaries of a form in the HTML code You can control the display of invisible elements, such as <form> tags Choose Edit Preferences (Windows) or Dreamweaver Preferences (Mac) Then, in the Invisible Elements category, select or deselect the Form Delimiter box When the box is selected the form outline is visible in the Dreamweaver workspace, as you see in Figure 11-1 2 Click the red outline to select the <form> tag and display the <form> tag options in the Property inspector (as shown in the bottom of Figure 11-1)

3 In the Form ID text box, type a name In this example, I entered the name form1 You can choose any name for this field as long as you don t use spaces, special characters, or punctuation With your basic HTML form set up, you re ready to add elements to it, as explained in the following sections Before you begin filling your form with options, keep the following tips in mind: The best way to get your form fields to line up nicely is to use CSS By creating styles that control the spacing and padding of form elements, you can make all your fields, buttons, and other elements line up neatly (s 5 and 6 cover CSS) After you design your form, your work isn t quite done; your form won t do anything unless you configure it to work with a script Although Dreamweaver doesn t provide any scripts, it does make linking your HTML forms to a script or to a database relatively easy The section Understanding How CGI Scripts Work (later in this chapter) offers more details on making your form work with a script Match the script Most fields displayed in the Property inspector when the <form> tag options are on-screen should be set to match those in the CGI script or other program that s used to collect and process the data from the form You find instructions for filling in these fields in the Configuring your form to work with a script section, at the end of this chapter Use Accessibility Settings The accompanying sidebar, Making forms accessible, offers some practical examples of how the Accessibility settings in Dreamweaver can help you tweak your forms characteristics to make them easier to use for all of the visitors to your site

You can make your forms much easier to use and more accessible to all your visitors by using the <label> tag and other accessibility attributes with form items Dreamweaver makes this easy by including an Input Tag Accessibility Attributes dialog box, as shown in the figure For this dialog box to appear when you insert a form item such as a radio button or a check box, you must have accessibility features turned on in Dreamweaver s Preference settings To turn on these features, choose Edit Preferences (Dreamweaver Preferences on a Mac); in the Preferences dialog box, click the Accessibility category, and select the Form Objects option With the accessibility options turned on, the Input Tag Accessibility Attributes dialog box opens automatically when you insert a form item (such as a radio button or a text box) Use this dialog box to specify the following options: ID: Use the ID field to assign a name to a form element The name is important because it can be used to refer to the field in a script The ID is also used if you choose Attach Label Tag Using For Attribute option under the Style options If you re not using the form with a script or a Label, you can