Hi,
Hope you’re well.
Kindly asking for feedback on the following form structure. Link here.
Thank you in advance.
Hi,
Hope you’re well.
Kindly asking for feedback on the following form structure. Link here.
Thank you in advance.
Hi @Phil_G
Most of your code is correct.
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
Hi @mikoMK - you’re a regular on my submissions, I should promote you a trust level
Great advice, thank you. Amended to reflect best practice.
I feel honored
Thanks for all your feedback and suppor mikoMK
@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?
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.