Assessment wanted for Form structure 1 skill test

i didn’t see the html form section before i moved on to css
please assess: https://codepen.io/zortron756/full/RwrVJeZ

Hi there @church_craig!

You’ve used the fieldset/legend elements perfectly to separate out the first and second sets of form inputs, but you’ve missed a couple of the questions included in the assessment:

  1. “Mark up each text label with an appropriate element so that it is semantically associated with its respective form field.”

So by each text label, I mean “Name”, “Age”, etc. For these, you’ll need to use the <label> element — read up on how that works, and have a go.

  1. “Add a suitable set of structural elements around the label/field pairs to separate them out.”

So for this, I mean that each paid of label/input will need to be placed inside an appropriate container. the usual best practice is to use a set of list items.

how does this look: https://codepen.io/zortron756/full/RwrVJeZ

@church_craig The list items for the structure is perfect.

The labels need a bit more work though. The idea is that you wrap the actual text label in the <label> element, and give it a for attribute containing the id value of the form input you want to associate it with.

The result of this is much improved accessibility — when a screenreader user focuses an input with an associated label, the label text is read out, helping them understand what is meant to be entered in to that input.

So the structure should look like this:

<li>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">           
</li> 

Or alternatively, you can wrap the <label> element around the label text and the input, which associates the two implicitly, without the need for the for attribute:

<li>
  <label>Name:
    <input type="text" id="name" name="name">
  </label>   
</li>

I tend to prefer the first version, as it makes laying the label and input out relative to one another a bit easier, as their boundaries are explicitly separate. But you might prefer the second one.

how about this: https://codepen.io/zortron756/full/RwrVJeZ

@church_craig yes! Nailed it.

The only tiny comment I’ve got is that when you use the 2nd variation of <label> that I showed you, you don’t need the for attributes because the <input> is wrapped inside the <label>, therefore they are implicitly associated.