Now you will copy the radio button that you just created, paste it into the empty table cell and then edit the properties of the copied radio button in the Radio Button Inspector. Note: It’s not required that you preselect any of the radio buttons. This makes MasterCard the preselected option. This is the value that will be returned to the CGI script for the form when a viewer chooses this option. Using the same group name for the two radio buttons ensures that visitors can only select one option from the group. You’ll use the same group name for the second radio button that you’ll add to the page. 3 In the Form Radio Button Inspector, enter paymentType for Group. 2 Click the radio button that you added to the page to select it. Dragging Radio Button icon from the Forms set of the Objects palette to table cell The Inspector changes to the Form Radio Button Inspector. Then drag the Radio Button icon from the Forms set of the Objects palette to the empty table cell located to the left of the MasterCard image in the document window. 407 ADOBE GOLIVE 6.0 Classroom in a Book 1 Click the Forms button ( ) at the top of the Objects palette. You would then add radio buttons to the second and fourth cells, as you are about to do now. Then you would type the text “Payment Type” in the first cell and insert images of a MasterCard and VISA card into the third and fifth cells.
You would create a table with one row and five columns. If you created the Payment Type section from scratch, you would create it much in the same way as the Personal Information section. You’ll add a group of radio buttons to this section so that viewers can select a payment type. Adding radio buttons The Payment Information section in the lower right corner of the form already contains a nested table with one row and five columns that has been inserted into the main table. Dragging image file from site window to table cell 7 Click in the document window, and choose File > Save to save the page. Then drag form_header.jpg from the media folder in the site window to the empty table cell that previously contained the words “Membership Application.” The image is added to the cell. LESSON 11 406 Creating Forms 6 In the site window, expand the media folder.
#Adobe golive preview mode update#
5 Choose Site > Refresh View to update the contents of the site window. If you had created the new page, name_form.html from the site window, the page would have been visible right away. It also contains the name_form.html file that you created earlier in this lesson however, before this file displays in the site window, you need to update the contents of the window. The site file contains a media folder, the index.html file, and the membership.html file. 4 Choose File > Open, and open the forms.site file in Lessons/Lesson11/11Start/forms folder/. You’ll add the image to the form using a file in the site window. 3 Triple-click in the text to select the words “Membership Application,” and press Delete. Now you’ll replace the text with an image. 2 In the Table Inspector, enter 2 for Column Span, and press Enter or Return. The Inspector changes to the Table Inspector, with the Cell tab automatically selected. 1 Move your pointer over the bottom edge of the cell that contains the words “Membership Application,” so that the pointer changes to an arrow. First you’ll adjust the table columns so that the words “Membership Application” span two columns. Adding an image that spans two columns Now you’ll replace the words “Membership Application” by adding an image to the page. Careful planning will save you from having to redesign your form’s layout during the creation process. You should always decide on the contents of the main table, paying special attention to whether or not you will add nested tables to it. Before you begin creating a form, however, it’s a good idea to carefully plan its layout. If you had not sized the Personal Infor- mation table correctly, you could adjust the size of the Personal Information table in the Table Inspector. 405 ADOBE GOLIVE 6.0 Classroom in a Book The Personal Information table you created was sized to fit perfectly in the designated cell of the main table for the membership application.