COURSE CALENDAR | WEEK 12 CLASS OUTLINE | Homework |

Topics covered in class:

  1. Projects page continued...
  2. FORMS:
    • Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email.
    • On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. We are creating a self-processing form that includes a php script.
    • Unfortunately, the ADGA FTP server does not allow scripts to execute, so our forms will not actually function. However, you can save the script should you decide to put your portfolio site on a web server with php enabled, in the future.
  3. HTMLDOG Forms Tutorials:
  4. Form tags in XHTML: Below are some of examples of tags used in HTML form creation.
    1. Form tag: defines the form and within this tag, there is generally one required action attribute that tells the form where its contents will be sent to when it is submitted.

      <form action="processingscript.php" method="post">

      </form>

    2. Input tag: can take ten forms, the ones we will use are outlined below:

      <input type="text" /> is a standard textbox. This can also have a value attribute, which sets the text in the textbox.

      <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format

      <input type="checkbox" checked="checked" />.

      <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.

      <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button with the value attribute, for example <input type="submit" value="Submit this form." />.

      <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.

      (Note that the input tag closes itself with a '/>' at the end.)

    3. Textarea tag is a large textbox. It requires a rows and cols attribute.

      <textarea rows="5" cols="20">A big load of text here</textarea>

    4. Select tag works with the option tag to make drop-down select boxes

      <select>
      <option value="first option">      Option 1</option>
      <option value="second option">      Option 2</option>
      <option value="third option">      Option 3</option>
      </select>

    5. Option tag can also have a selected attribute, which would be used in the format:

      <option value="first option" selected="selected">Option 1</option>

    6. Name attribute needs to be added to all the form fields mentioned above. Without it all the fields will be ignored when you hook up your form to a form-handling program. For example:

      <input type="text" name="email" />

    7. Id attribute should also be added to each form field in order to use labels.

      <input type="text" name="yourName" id="yourName" />

    8. Label Tag is used to help improve the accessibility of forms.

      <label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName"

  5. Adding a form to your contact page using PHP | Sample page
    1. Set up the PHP page by renaming your file contact.html to contact.php.
    2. View this page's source, copy and paste the PHP code into your contact page, just below your <h2>Contact</h2>.
    3. Now we will add the form controls. The tags used in this form are form, input, textarea, select, option and label.
  6. Using CSS to style your form

Homework | Week 12

Finish portfolio sites!!

In Photoshop or Illustrator design an alternate color scheme, graphic style and layout for your portfolio site. We will begin work on an alternate stylesheet next class. We will be using the same divisions (a two column layout). Please keep these divisions in mind when designing your alternate mockup.

By next class you should have completed your first web site.