Coffee Club (club.html & club.css)
Example
HTML Form
- Use the
action
ofhttp://itins3.madisoncollege.edu/echo.php
for the server location - The
method
must bepost
- 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 25Type 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 thedisplay: 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