Building forms in HTML

[Crossjeremiah]

Learning Challenge

Question

What causes the Add user font to appear bold or larger in this code?
Also what causes the Add user underline to underline the whole top section?

fieldset {
  /* Get rid of the border on the fieldset. */
  border: 0;
}

form {
  /* Center the form on the page. */
  margin: 0 auto;
  width: 600px;

  /* Curved border around the form. */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;

  /* Make all the fonts in the form the same. */
  font-family: Arial, Helvetica, sans-serif;
}

/* Every div after the first div in the form. */
form div + div {
  margin-top: 1em;
}

label {
  /* Uniform size & alignment for labels. */
  display: inline-block;
  width: 90px;
  text-align: right;
}

legend {
  /* Add a bottom border to the legend. */
  border-bottom: 1px solid black;
}

input,
textarea {
  /* You must explicitly override the fonts in textareas and inputs. */
  font-family: Arial, Helvetica, sans-serif;

  /* Uniform text field  and textarea sizes. */
  width: 425px;
  box-sizing: border-box;

  /* Match form field borders */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* Additional highlight for focused elements */
  border-color: #000;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;

  /* Provide space to type some text */
  height: 5em;
}

select {
  /* You must explicitly override the font in a select. */
  font-family: Arial, Helvetica, sans-serif;

  /* Make the select as wide as the other form elements. */
  width: 425px;
}


button {
  /* Space the button to the right. */
  margin-left: .5em;
}

What I’ve tried

I’ve typed the code by hand, even tried copy and pasting. And my add user is still the same font and size as all the other fonts. I’m just trying to understand the basics.

Screenshots

What mine looks like

styled-forms-in-mac-and-windows|690x282

[Rafi]

Is that all of your CSS styling? Can you also provide a screenshot of your HTML Markup?

[Crossjeremiah]

Learning the Forms

<fieldset>

  <legend>Add user</legend>

  <div>

    <label for="firstName"> First name</label>

    <input type="text" id="firstName" name="first_name">

  </div>

  <div>

    <label for="lastName">Last name</label>

    <input type="email" id="email" name="email_address">

  </div>

  <div>

    <label for="role">Role</label>

    <select id="role" name="user_role_name">

      <option value="admin">Admin</option>

      <option value="user">User</option>

    </select>

  </div>

  <div>

    <label for="expiration">Expiration</label>

    <input type="date" id="expiration" name="expiration">

  </div>

  <div>

    <label for="bio">Bio</label>

    <textarea id="bio" name="bio"></textarea>

  </div>

  <div>

    <button type="submit">Add this person</button>

  </div>

</fieldset>

[Rafi]

There’s special styling when it comes to <fieldset>. By default there is a 2px groove border surrounding the contents, and a small amount of default padding. If a <legend> is present, it is placed over the block-start border. The <legend> shrink-wraps, and also establishes a formatting context. You can read more about it here on MDN. Hopes this clears things up for you!

[Krainey]

Hi, @Crossjeremiah i cant get my Add user bold either. is there something wrong in the code? Mines is exactly as it come in the lesson.

[Jasole1983]

I came to the same confused state when I had literally everything it instructed to do and it wasn’t showing up like the example Ended up placing a header tag around the legend tag and that solved the issue. Increased the size, stretched the border all the way across. If there was a point were it instructed us to do this, I must have missed it because I scoured and reread it about 12 times. Either way, looks just like the example at the end.