In-class Practice

Working with Forms

Part 1

To a build a form for our attendees to register, let's make some changes to your register.html page that you created back in Practice #1.

  1. Open the practice site in VSCode: Open VSCode
  2. Open a tab so you can preview your site as you work: View Your Practice Site
  3. You will need to have completed Practices 1 through 5 to continue. If you haven't, stop here, go back and get up-to-date.
  4. The register page is just a shell that we need to bring up-to-date to look like the home page just like we did in the last practice with the venue.html and schedule.html pages. To do so:
    1. Copy and paste the entire header section from the top of the body from index.html over top of the current header section in register.html.
    2. Do the same for the entire footer section at the bottom of body.
    3. Copy and paste the two link elements from the head of index.html into the head of register.html.
  5. Inside of main, create a section element with an id attribute of introduction and a class attribute with two values: container and clearfix.
  6. Inside this new section, add:
    1. A header element containing an h2 element with the text Register.
    2. A p element containing the text:

      Every year is full of new information and connections, and this year we'd love it for you to join us. Conference passes cost only $99 per attendee — one of the best values you'll find in the industry.

  7. Next, add another section element with an id attribute of registration.
  8. This new section will contain two divs: one with some explanatory information and the other with the registration form. Let's set it up
  9. Inside the section, add a div element with an id attribute of reginfo.
  10. Inside the "reginfo" div, add an h3 element with the text Request Conference Passes. Under the h3, add an h4 element with the text $99 per attendee.
  11. Still inside the div and below the h4, add a paragraph with the following text: Request your DCI Web Conference pass using the form to the right. Multiple passes may be requested within the same order, so feel free to bring some colleagues along. Once your request is received we'll follow up to process payment. See you soon!
  12. Below this paragraph, add another h4 element with the text Why Attend?
  13. Following this h4, add an unordered list with the following 4 list items:
    1. World-class speakers
    2. One full day of workshops and two full days of presentations
    3. Hosted at Washington and Lee University, a historic liberal arts institution
    4. Located in Lexington, VA, full of history both in town and around

    Hmm... When you view the preview, there are no bullets on the list. This is because we selected ALL list items in a previous CSS rule and set them to not have bullets. We'll revisit this in a future practice.

  14. Below the "reginfo" div, add a second div element with an id attribute of regform.
  15. Inside the "regform" div, let's build the form to submit a pass request:
    1. Start by creating a form element with two attributes: action with a value and method with a value of post.
    2. Within the form element, create a fieldset element with a class attribute of reggroup.
    3. Inside the fieldset element, we need to build the four form fields and their corresponding labels.
      1. Label: "Name" — Input: type "text", name "fullname", id "fullname", class "formfield", placeholder "Full Name", required
      2. Label: "Primary Email" — Input: type "email", name "email", id "email", class "formfield", placeholder "Email address", required
      3. Label: "Number of Passes" — Select: name "quantity", id "quantity", class "formfield", required — Options: "1" through "5" each with a matching value attribute, option 1 should have the selected attribute
      4. Label: "Comments" — Textarea: name "comments", id "comments", class "formfield", placeholder "Anything else we should know?"

      For example, the code for the first pair should look like this:

      <label for="fullname">Name</label>
      <input type="text" name="fullname" id="fullname" class="formfield" placeholder="Full Name">
  16. Following the fieldset element, add one more input element of type hidden, name of email_to, and a value attribute of your W&L email address.
  17. Finally, add a button with a name attribute of submit. The button should have the text Send Request.

Now let's update the CSS:

  1. Add the selector #registration to the set of selectors that sets padding to 22px 80px 66px.
  2. Add a selector for both #reginfo and #regform with the following rules:
    1. display as inline-block
    2. width of 49.25%
    3. vertical-align of top
    4. padding of 0 for the top/bottom and 1em for the left/right.
  3. Then add a selector for #regform only that sets padding-top to 1.5em.
  4. Add a selector for .reggroup setting border to none.
  5. Add a selector for all label elements with a font-family of "Raleway" and font-weight of bold.
  6. Create a selector for .formfield with the following properties:
    1. block display
    2. 100% width
    3. margin of .25em on the top, 0 on the left/right, and 1.5em on the bottom
    4. .5em padding on all sides
    5. 1em font size
  7. Add a selector for textarea.formfield that sets only its height to 150px
  8. Add a selector for button that sets:
    1. 1.25em font size
    2. bold
    3. Raleway font
    4. .5em padding on all sides
    5. .5em left margin
    6. rgb(115, 53, 39) background color
    7. white text color
    8. 3px border radius
    9. no border
  9. Add a selector for button:active so that the button changes when the user is clicking it. Set:
    1. rgba(115, 53, 39, .2) background color
    2. rgb(115, 53, 39) text color
    3. outline: none (this prevents the browser from drawing a blue line around the form element)
  10. Finally, after further looking at our site design, the fixed header is taking up too much screen real estate. Since our page is fairly short with not much vertical scrolling, the UI team thinks that users won't get lost without it. Let's refactor the CSS one more time:
    1. Delete the entire main selector and the margin-top property you created previously. Be sure that the closing curly brace is removed, too.
    2. From the .siteheader selector, remove the properties for position, top, and left.
    3. Find the #logotitle selector. Change margin-top to padding-top, keeping the same value of 35px.

Your register.html file and new CSS should now look like this:

Final Output

Below is approximately how your final output should look: