Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Yeondam Park
Yeondam Park
9,469 Points
Posted by Yeondam Park
Yeondam Park
9,469 Points

Add fieldset to form elements with styling.

Hello, guys! I am trying to figure it out doing with Project Online registration form; I did not add fieldset and legend in the form tag. In order to pass this project, I have to input fieldset,legend tags in form tag.

But when I put fieldset,legend in form tags, it breaks the layout.. Anyone can advise putting those tags without breaks the layout??

Thanks you for viewing my code..

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css">
  <title>Online Registration</title>
</head>

<body>
  <header class="headline">
    <h1>THE CODE REVIEW</h1>
  </header>
  <div class="wrapper">
    <section>
      <div class="main-header">

        <h2>Signup for our newsletter</h2>
        <p>Get the latest news on how your code is doing right in your inbox</p>
        <div class="horizontal-line">
          <hr class="first-line" />
          <hr class="second-line" />
        </div>
      </div>
    </section>


    <section>
      <form>
        <h2 class="contact-info">Contact Information</h2>
        <label for="user_name">Full Name</label>
        <input type="text" id="user_name" class="contact" name="user_name" required placeholder="Required">
        <label for="user_email">Email Address</label>
        <input type="user_email" id="email" class="contact" name="user_email" required placeholder="Required">
        <label for="user_phonenumber">Phone Number</label>
        <input type="tel" id="user_phonenumber" class="contact" name="user_phonenumber">
        <label for="user_streetaddress">Street Address</label>
        <input type="text" id="user_street_address" class="contact" name="user_streetaddress">
        <label for="user_cityaddress">City</label>
        <input type="text" id="user_cityaddress" class="contact" name="user_cityaddress">
        <label for="user_stateaddress">State</label>
        <input list="state" id="user_stateaddress" class="contact" name="user_state" placeholder="Choose State" />
        <datalist id="state">
          <option value="AZ">
            <option value="CA">
        </datalist>
        <label for="user_zipcode">Zip Code</label>
        <input type="text" id="user_zipcode" name="user_zipcode">
      </form>
    </section>

    <hr class="third-line" />

    <section>
      <div class="secound-section">
        <h1 class="newsletter">Newsletter</h1>

      </div>
      <form>
        <fieldset class="newsletter-first">
          <p>Select the newsletters you would like to receive</p>
          <input type="checkbox" checked="checked" name="html-news" value="HTML News"> HTML News
          <br/>
          <input type="checkbox" name="css-news" value="CSS News"> CSS News
          <br/>
          <input type="checkbox" name="javascript-news" value="Javascript News"> Javascript News
          <br/>
        </fieldset>
        <fieldset class="newsletter-second">
          <p>Newsletter format</p>
          <input type="radio" checked="checked" name="html" value="HTML"> HTML
          <br/>
          <input type="radio" name="plain-text" value="Plain text"> Plain text
          <br/>
        </fieldset>
        <div class="textarea">
          <p>Other topic you'd like to hear about</p>
          <textarea name="textarea" rows="10" cols="150"></textarea>
        </div>
      </form>



      <div class="button">
        <button type="submit">Sign Up</button>
      </div>
      <p class="copyright">
        Copyright The Code Review
      </p>
    </section>
  </div>
</body>

</html>

/***************************************
GENERAL
****************************************/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', sans-serif;
}
fieldset {
  border: none;
}

/***************************************
HEADER RULE
****************************************/


/*----Header Rule----*/

.headline h1 {
  margin: 0;
  padding: 30px 30px;
  background-color: #333333;
  text-align: center;
  font-size: 1.5em;
  color: #fff;
}
.main-header h2, .main-header p, .main-header hr {
  text-align: center;
}
.main-header h2, .main-header p {
  margin: 20px auto;
}
.main-header p {
  color: #333333;
  width: 90%;
  font-size: 1em;
}

/*---- Horizontal Line Rule ----*/

.horizontal-line {
  width: 90%;
  margin: auto;
}
.first-line {
  border: 3px solid black;
}
.second-line {
  margin-top: 5px;
  border: 1.5px solid black;
}
.third-line {
  width: 90%;
  margin: 30px auto;
  border: 2px solid black;
}

/*----Contact Rule----*/

.contact-info {
  text-align: left;
  margin: 15px auto;
  width: 100%;
  font-size: 1.5em;
}

/*----form Rule----*/

form > * {
  display: block;
}
/*form fieldset {
  width: 90%;  
}*/

form > label {
  text-align: left;
  width: 90%;
  margin: 15px auto;
  color: lightgray;
}
form input.contact {
  padding: 15px 30px;
  width: 90%;
  margin: 15px auto;
  background-color: lightgrey;
  border: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
form input#user_zipcode {
  margin: 15px 5%;
  padding: 15px 30px;
  width: 70%;
  background-color: lightgrey;
  border: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
::-webkit-input-placeholder {
  text-align: right;
  font-style: italic;
  padding-right: 3px;
}
input#state-address::-webkit-input-placeholder {
  text-align: left;
  font-style: normal;
  padding-right: 3px;
}
#state {
  display: none;
}

/*----Second section----*/

.newsletter {
  text-align: left;
  margin: 15px auto;
  width: 90%;
  font-size: 1.5em;
}

/*----Second form rule----*/

.newsletter-first, .newsletter-second, .textarea {
  width: 90%;
  margin: auto;
  color: lightgrey;
}
.newsletter-first p {
  margin-bottom: 10px;
}
.newsletter-first input[type="checkbox"], .newsletter-second input[type="radio"] {
  margin: 10px auto;
}

/*----Textarea rule ----*/

textarea {
  margin: 15px auto;
  outline: none;
  resize: none;
  color: black;
  width: 100%;
  border: none;
  background-color: lightgrey;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/*----Button Rule----*/

.button {
  width: 90%;
  margin: auto;
}
button {
  text-align: center;
  font-size: 1.5em;
  color: white;
  width: 100%;
  margin: 15px auto;
  padding: 30px 30px;
  border: none;
  background-color: #66cccc;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.copyright {
  margin-top: 20px;
  margin-bottom: 100px;
  text-align: center;
  color: lightgray;
}

/***************************************
MEDIAQUERIES
****************************************/

@media (min-width: 768px) and (min-width: 1024px) {
  .headline {
    width: 100%;
  }
  .wrapper {
    margin: auto;
    width: 60%;
  }
  .horizontal-line {
    width: 100%;
  }
  .third-line {
    width: 100%;
  }
  form label {
    float: left;
    width: 30%;
  }
  form input.contact {
    width: 70%
  }
  .newsletter-first, .newsletter-second, .textarea, .button {
    width: 100%;
  }
  .button button {
    padding: 15px 30px;
  }
}

1 Answer

Sarah Jee Watson
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points
Sarah Jee Watson
.a{fill-rule:evenodd;}techdegree seal-36
Sarah Jee Watson
UX Design Techdegree Graduate 28,197 Points

The fieldset tags would go inside your section tags. In fact, you could probably replace your sections with fieldsets. Then the legend tag can go just inside your opening fieldset tag. Again, you could replace your:

<h2 class="contact-info">Contact Information</h2>

with

<legend class="contact-info">Contact Information</legend>