Assessment Wanted: Form Structure 1 Skill Test

MDN
#1

Hi,

Hope you’re well.

Kindly asking for feedback on the following form structure. Link here.

Thank you in advance. :pray:

#2

Hi @Phil_G

Most of your code is correct. :+1:

One thing you need to pay attention to is the label. By leaving your label empty and adding the text to a paragraph, you don’t have a connection between the text and the input. You need to put the text inside <label>. If you like your labels to be above the input fields, you could for example add

label {
  display: block;
}

to your CSS.

I hope that helps,
Michael

#3

Hi @mikoMK - you’re a regular on my submissions, I should promote you a trust level :handshake: :smiley:

Great advice, thank you. Amended to reflect best practice.

1 Like
#4

I feel honored :sunglasses:

1 Like
#5

:joy:

Thanks for all your feedback and suppor mikoMK :+1:

1 Like
#6

@mikoMK, quick one for your thoughts since we were on the topic label/input best practice…

What would be your thoughts on the following code?

Inspecting the html structure, I can see that the label/inputs are actually nested inside a <p> element. Reading the living standard - assuming I’m on the right doc - seems to also recommend separating label/inputs by nesting them inside <p>'s.

see 4.10.1.1 Writing a form’s user interface for my reference on link

Is it, then, correct to say one can/should nest <input> and associated <label> inside a <p> as long as they make sure the label contains the identifying text rather than the paragraph element?

#7

When you style a form you generally want to move these two element around together. So it definitively makes sense to group them. It doesn’t need to be <p>. You could also use <div>s or an unordered list as a flex container with <li>s around each <label>/<input> pair.
As you correctly stated: The most important thing is the <label> containing the describing text for the input and that these two elements are associated with each other. Either by the for attribute on the label of by nesting the input inside the label.

1 Like