For this assignment you are to design and create one web page that includes an HTML form. This form will use several different form elements.

The form is a registration for a pet competition. In this homework you will build and style the form. Then in the next assignment you will add the JavaScript to validate and add flexibility to the form.

The web page is to use the standard overhead for HTML5.

Above the form add a heading of your choice related to the pet competition.

Use headings throughout the form for information and organization.

The form is to include the following:

Submit the form data to http://enablethinking.com/wsu/cs2350/submit_pet1.php (Links to an external site.)

A labeled textbox to gather the name of the pet

A section with three labeled checkboxes to identify which competition the pet will participate in. Each check box is to be followed by form elements to gather the details needed for that competition.The singing pet competition

A labeled textbox to gather the title of the entry

A file upload to gather a demo audio file of the pet singing

In the label or other place specify the file type is to be mp3 or wav.

The cutest pet competition

A labeled textbox to gather the title of the entry

A list of three file upload inputs to gather the photo album of the pet. Put these elements in an actual list. Use style to remove the bullets.

In the label or other place specify the file type is to be jpg, png, or gif.

The pet tricks competition

A labeled textbox to gather the title of the entry

A drop-down menu with the following options

Obstacle Course

Frisbee/Ball/Other Catching

Roll Over/Play Dead

Other

A section with five labeled radio buttons to select the type of pet. These are to be a single group of buttons and include the following pet types.

cat

dog

reptile

bird

rodent

A labeled textbox for the pets birthdate. In the label or other place specify the format is to be mm/dd/yy.

A textarea to gather a bio of the pet. Make the text are big enough to show 100-200 words. Include instructions using a label, paragraph, or heading.

A labeled textbox to gather the phone number of a contact person.

A section to have the contact person enter a username and password so they can access future registration information. This section is to include the following.

Instructions letting the user know this username and password is to provide future access to this registration information.

A textbox for the username. Include instructions that specify the username is to be 5-8 characters long and contain letters only.

A password box for the password. Include instructions that specify the password must be at least 8 characters long and include three of the following.

lowercase letter

uppercase letter

number

special character

A submit or image input element that submits the form.

Make sure that each input element has a name attribute to create a variable for submission data.

The server page that the form is to be submitted to will list all the variable names and values of the submitted data. I suggest you test this often as you build the page. Remember that some form elements always submit a variable even when there is no entry in the element. Other form elements do not send a variable or value unless the item is selected or filled out.

Style the web page.

Include banner, navigation, and footer sections similar to previous pages.

Add style to the webpage by linking it to an external .css file.

Update the navigation on your 2350 portfolio page to include a link to this new page. This link is to be in the drop-down menu that has links to the JavaScript web pages.

Style the form elements to create a general theme.

Change the style on focus for most form elements.

Style the form elements so they line up in an organized way.

Include padding and margin sizes that produce comfortable spacing throughout the form.