My First Form - CSS Styling Questions

Question

Hi,

I created my first form, but I had a few issues that I could not figure out. Thanks in advance for taking a look. I am not sure if I should be pasting all of the code into the question or if I should be referencing it from somewhere else? Anyways, here are the questions.

1) How can the labels in the "Your Information" section be styled to sit directly to the left of the text boxes?

2) In the "Your Information" section, does it make more sense to create two unordered lists (#1 for the labels, #2 for the text boxes) and style them to sit next to one another?

3) Is there any way to get the text in the Legend section ("Your Information", "Primary Interests" and "Additional Information") to sit on one line even when the window width is minimized?

4) Is there any way to get the dashed black top-border in the .t-field div class in the "Additional Information" section to reach the width of its parent? Currently, the line stops just prior to its parent container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Contact Form</title>
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="style.css">
  <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="contact_form">
    <h1>Contact Form</h1>
    <form action="#" method="post">
      <fieldset class="your_info">
        <legend>Your Information</legend>
          <label for="name" id="name_text">Name: <input type="text" id="name" value=""></label><br />
        <label for="email">Email: <input type="email" id="email" value=""></label><br />
        <label for="tel">Phone Number: <input type="tel" id="tel" value=""></label><br />
        <label for="gender">Gender:
          <select id="gender">
            <optgroup label="Empty">
              <option value="" selected></option>
            </optgroup>
            <optgroup label="Standard Genders">
              <option value="boy">Boy</option>
              <option value="girl">Girl</option>
            </optgroup>
            <optgroup label="Unique Genders">
              <option value="both">Both</option>
              <option value="neither">Neither</option>
            </optgroup>
          </select>
        </label><br />
        <label for="city">City: <input type="text" id="city" value=""></label><br />
        <label for="state">State/Province: <input type="text" id="state" value=""></label><br />
          <label for="country">Country: <input type="text" id="country" value=""></label><br />
      </fieldset>
      <fieldset class="primary_interests">
        <span>What are your primary interests?</span><br />
        <label for="stories"><input type="checkbox" name="interests" value="stories" id="stories">Stories</label><br />
        <label for="drawings"><input type="checkbox" name="interests" value="drawings" id="drawings">Drawings</label><br />
        <label for="lemonade"><input type="checkbox" name="interests" value="lemonade" id="lemonade">Lemonade</label><br />
        <label for="games"><input type="checkbox" name="interests" value="games" id="games">The Games</label><br />
        <legend>Primary Interests</legend>
      </fieldset>
      <fieldset class="additional_info">
        <legend>Additional Information</legend>
        <span>How did you hear about me?</span><br />
        <label for="friend"><input type="radio" name="reference" value="friend" id="friend">Friend</label><br />
        <label for="search"><input type="radio" name="reference" value="search" id="search">Search Engine</label><br />
        <label for="school"><input type="radio" name="reference" value="school" id="school">School</label><br />
        <label for="advertisement"><input type="radio" name="reference" value="advertisement" id="advertisement">Advertisement</label><br />
        <label for="other"><input type="radio" name="reference" value="other" id="other">Other</label><br />
        <div class="t-field">
          <label for="comments">Do you have any additional comments for me?
          <textarea rows="8" id="comments"></textarea>
        </div>
      </fieldset>
      <input type="submit" value="Submit">
    </form>
  </div>
</body>
<!--
List of targeted Elements and IDs that can be used for CSS
Elements: form, h1, fieldset, legend, label
IDs: #name, #email, #tel, #your_info, #gender, #city, #state, #country, #friend, #search, #school, #advertisement, #other, #stories, #drawings, #lemonade, #games
Divs: .contact_form
Classes: .primary_interests, .your_interests, .additional_info, .t-field
-->

/************************************************************
List of targeted Elements and IDs that can be used for CSS
Elements: form, h1, fieldset, legend, label
IDs: #name, #email, #tel, #your_info, #gender, #city, #state, #country, #friend, #search, #school, #advertisement, #other, #stories, #drawings, #lemonade, #games
Divs: .contact_form
Classes: .primary_interests, .your_interests, .additional_info, .t-field
************************************************************/

/************************************************************
Questions:
1) How can the labels in the "Your Information" section be styled to sit directly to the left of the text boxes?
2) In the "Your Information" section, does it make more sense to create two unordered lists (#1 for the labels, #2 for the text boxes) and style them to sit next to one another?
3) Is there any way to get the text in the Legend section ("Your Information", "Primary Interests" and "Additional Information") to sit on one line even when the window width is minimized?
4) Is there any way to get the dashed black top-border in the .t-field div class in the "Additional Information" section to reach the width of its parent?  Currently, the line stops just prior to its parent container.
************************************************************/

/************************************************************
Elements
************************************************************/

* {
  box-sizing: border-box;
}

body {
  background: radial-gradient(#fff8ac 33%, #ffdbd2 66%, #e5d2ff 99%);
}

form {
  width: 80%;
  height: auto;
  margin: 0 auto;
}

h1 {
  font-weight:lighter;
  text-align: center;
  border-bottom: 1px dashed black;
}

fieldset {
  border: 0.5px solid black;
  background-color: #fff8ac;
  margin: 0 auto;
  width: 95%;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

legend {
  font-size: 1rem;
  padding: 0.2% 2.5%;
  background-color: #ffdbd2;
  text-align: center;
  margin: 0 33%;
}

label {
  display:inline-block;
  width: 100%;
}

input[type="submit"] {
    font-family: 'Indie Flower', cursive;
    border: 1px solid black;
    background-color: #ffdbd2;
    font-size: 1.15em;
    width: 100%;
    margin-top: 10px;
}

input[type="submit"]:hover {
  background-color: #fff8ac;
}

textarea {
  width: 100%;
  resize: vertical;
}

/************************************************************
IDs
************************************************************/

/************************************************************
Divs
************************************************************/

.contact_form {
  font-family: 'Indie Flower', cursive;
  background-color: #e5d2ff;
  padding-bottom: 5px;
}

.t-field {
  display: block;
  border-top: 1px dashed black;
  margin: 10px 0;
  padding-top: 10px;
}



/************************************************************
Combinations
************************************************************/

legend,
.contact_form {
  border: 1px solid black;
  border-radius: 10px;
}

#name, #email, #tel, #gender, #city, #state, #country {
  width: 50%;
  float: right;
}

/************************************************************
Media Queries
************************************************************/

@media (max-width: 400px) {
  form {
    width: 95%;
  }
}

@media (min-width: 600px) {
  form {
    width: 60%;
  }

  .contact_form {
    width: 80%;
    margin: 0 auto;
  }
}

Answer 1 · 2016-06-01T10:57:21Z

June 1, 2016 10:57am

Here are some answers to your questions:

Add this to the CSS: .your_info label { text-align: right; }
Separate lists would not be guaranteed to align. Keeping one list makes the most sense.
Use this: legend { white-space: nowrap; }
It must be your browser. For me, the line goes all the way across.

Happy coding!

Welcome to the Treehouse Community

Looking to learn something new?

Anthony Rice

Anthony Rice

My First Form - CSS Styling Questions

1 Answer

Steven Parker

Steven Parker

Anthony Rice

Anthony Rice