The following file is required for this lesson:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps

  1. Download the demo-styling-forms.zip file from Moodle and extract its contents to a folder called demo-styling-forms.
  2. The result of this demo should look like (notice it uses the horizontal menu from a previous assignment):
    form-final.jpg
  3. Open the design-comp.psd file and examine the images, fonts, and layout properties of the file; the images are already extracted for you).
  4. You will need to following font from google font:
    • Montserrat
  5. Add the link to this font in the <head> of index.html. (This font will be added to your styles.css file later in this walkthrough.)
  6. Add the following code to index.html:
    • Add the <form> element inside the <main>:
      index-code-a
    • Inside the <form> element add the following:
      • A textbox for the name:
        index-code-b
      • A textbox for the email address:
        index-code-c
      • A textbox for the phone number:
        index-code-d
      • A text area for the message:
        index-code-e
      • A button to simulate submitting the form:
        index-code-f
        Before adding style rules to your styles.css file, the web page should look like:
        form-initial.jpg
  7. Add the following styles to the styles.css file as shown below to style the form elements:
    • Style the <input> and <button> elements:
      css-styles-a
    • Style the <textarea> element:
      css-styles-b
    • Style the <label> element:
      css-styles-c
      Refresh your browser to see something like:
      initial form styling
    • Add the background icons for the textbox form elements:
      css-styles-d
    • Add the background image for the text area by adding the following code to the text area style rule:
      css-styles-e

      Refresh your browser to see the following:
      more form styling
    • Style the send button:
      css-styles-f
    • Add layout styling to the form:
      css-styles-g
  8. Save and open index.html in your browser. If the result is different from the expected, make any necessary corrections, and refresh your browser.

Exercise Instructions

Download the ex-contact-form.zip file from Moodle. The ZIP file contains instructions in the file, ex-contact-form.pdf, and the Photoshop file, form-design-comp.psd, which will aid you in completing this exercise. Complete this exercise as per the instructions on Moodle.

Module Home

COMP1017 Home