The form at the top of this page consists of a textbox, a list of radio buttons, and two drop-down lists.
computer science
Description
Instructions
⦁ The form at the top of this page consists of a textbox, a list of radio buttons, and two drop-down lists. For the Genre list, make the other choices “Baroque,” “Renaissance,” and “Realism.” For the Bulk Actions list, make the others choices “Archive,” “Edit,” “Delete,” and “Collection.” The drop-down list items should have numeric values starting with O. Notice the placeholder text in the search box.
⦁ Create a table of paintings that looks similar to that shown in Figure 5.33 . Be sure to make the table properly accessible.
⦁ The check boxes in the table should be an array of elements, for example,<input type=“checkbox” name “index[]” value=“10” />. The name and values are arbitrary, but each checkbox needs to have a unique value.
⦁ The action buttons in each row are a series of <button> containers with a dummy link and an image within the button.
⦁ Set the form's method attribute to GET and its action attribute to http:// www.randyconnolly.com/tests/process.php.
⦁ While some of the styling has been provided, you will have to add some additional CSS styling.
Complete Chapter 5 Project 2.
Zip up the files, or submit both the css and html files.
Test
1. Test the form in the browser. Verify that the output from process.php matches that shown in Figure 5.33 .
Figure 5.33 Full Alternative Text
Illustration shows a webpage that displays a form labeled as “Advanced Art Work Search”. Top panel shows a search box, along with radio buttons for History, Person, and Landscape. A dropdown titled “Select Genre” and a “Filter” button are also displayed in this panel.
Second panel shows a dropdown menu titled “Bulk Actions” and a button labeled as “Apply to All”.
A table labeled as “Paintings” is shown below, with columns labeled as “Title”, “Artist”, “Year”, “Genre”, and “Actions”. Each row displays a thumbnail of a painting. Action column displays icons for edit, delete, download and expand. Table shows five rows of data.
A window is displayed in foreground with following data. Form Input
Get Data
search=and
subject=2
filter=4
actions=1
index=Array
Index 0 Selected value=20 Index 1 Selected value=40 Post Data
There are no POST variables.
Instruction Files
Assignment3.docx
239.3 KB
