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 fonts:
    1. 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:
    1. Add the <form> element inside the <main>:
      form element
    2. Inside the <form> element add the following:
      1. A textbox for the name:
        form name
      2. A textbox for the email address:
        form address
      3. A textbox for the phone number:
        form phone
      4. A text area for the message:
        form textarea
      5. A button to simulate submitting the form:
        form submit


    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:
    1. Style the <input> and <button> elements:
      input & button
    2. Style the <textarea> element:
      textarea
    3. Style the <label> element:
      label
      Refresh your browser to see something like:
      initial form styling
    4. Add the background icons for the textbox form elements:
      textbox icons
    5. Add the background image for the text area by adding the following code to the text area style rule:
      textarea background image

      Refresh your browser to see the following:
      more form styling
    6. Style the send button:
      send button
    7. Add layout styling to the form:
      form styling
  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