Skip to content

Coffee Club (club.html & club.css)

Example

Coffee Club

HTML Form

  • Use the action of http://itins3.madisoncollege.edu/echo.php for the server location
  • The method must be post
  • Radio and checkbox inputs should be contained in a <fieldset> with a <legend>
  • Insert a HTML line break after each label and radio input pair.
  • Insert a HTML line break after each label and checkbox input pair.
  • Every label must be connected to its associated field with the for and id attributes
  • All inputs must successfully go to the server and be seen on the green Echo screen.

  • Above the form, add a paragraph that reads:

    An asterisk denotes a required field.
    Field Label Field Type Notes
    *Name Text Required
    *Email Email Required
    *Password Password Required
    Minimum length of 8
    Maximum length of 25
    Type of Bean Select Menu Options are:
    • Ground
    • Whole
    • Rounds
    Regular or Decaf? Radio Options are:
    • Regular
    • Decaf
    Type of Roast Checkbox Options are:
    • Highlander Grogg
    • Cinnamon Swirl
    • Hazelnut Cream
    • French Vanilla
    • Blueberry Nut
    • Banana Caramel
    • Chocolate Cherry
    • English Toffee
    • Vanilla Raspberry
    Additional Comments textarea
    Order Now submit
    Clear Form reset

Form Styles

  • Add background color #D6CBC0
  • Round all border corners
  • Add padding to all sides

Input

  • The <input>, <select>, and <textarea> elements should have a bottom and top margin. Make the bottom margin larger than the top.
  • The <input> elements should have the display:block property/value to make them go to a new line.
  • The <input> elements that have a type attribute of "radio" or "checkbox" should have the display: inline-block property/value to make them say on one line.

Textarea

  • Add a height and width
  • Round the corners
  • Change the border color #A87B50

Fieldset & Legends

  • Make the <legend> bold
  • Round the corners of the <fieldset> border.
  • Add padding and margins to the <fieldset>
  • Add a width of 90% to the <fieldset>

Buttons

  • Submit and Reset buttons should have display: inline-block property/value to make them say on one line.
  • Give the submit and reset buttons new styles, so they don't look like the default buttons
  • Apply a different styling to the submit and reset buttons when they are hovered over.
  • Center the buttons to the form