Implicit/Explicit Input + label HTML tag

[codeispoetry]

Is there any advantage of one over another?

<label>
  Label Text:
  <input type="text" name="my-input">
</label>

&

<label for="my-input">Label Text:</label>
<input type="text" name="my-input" id="my-input">

I want to emulate something like this →

Reference Link

what could be a better way: label + input or some other HTML markup?

[m_hutley]

The primary purpose for including things inside the label tag would be so that when you click them, it takes you to the relevant input as though you’d clicked it. If the input’s inside it… shrug.

Unless you did something strange involving click events and preventing defaults, there shouldnt be any particular difference.

I find the example interesting in that they chose to absolutely define the position of the label relative to an outer div (IE: The one containing the header) rather than defining a container div for the input box. Not sure i would have done that personally.

[PaulOB]

@codeispoetry

Is there any advantage of one over another?

There are differences depending on your use case and there are advantages and disadvantages to either method.

As far as clicking the label to activate the input then both methods will do that as long as the for and id attributes match correctly.

In fact historically the nested input approach failed on assistive devices which is why I still prefer the non nested input approach although that bug has long been fixed.

Of course the nested approach means you do not need ids and can use an array to gather your data.

One downside of the nested approach is that you do not have fine control over the text unless you also wrap it in a span.

However in the non nested approach you would probably need a wrapper if you were to absolutely place the input or label.

There are give and takes to both methods so you can use whatever suits your purpose best

[codeispoetry]

@PaulOB

One downside of the nested approach is that you do not have fine control over the text unless you also wrap it in a span.

Sir, a couple of days a discussion was done where you also created many code pens, it was around those switches of on/off. You also said the same thing there. Sir, I am unable to grasp this concept. Would it be possible for you to explain it further based on some of your other pens? I could not understand sir when you say “you do not have fine control over the text unless you also wrap it in a span.”

[PaulOB]

@codeispoetry

I could not understand sir when you say “you do not have fine control over the text unless you also wrap it in a span.”

This simple example would be impossible for the nested approach.

You would need to add a span around the text so you can color it and pad it out correctly.

[codeispoetry]

Reference: Discussion with @Paul_Wilkins

Radio selection and Price updating

A technique that gives a more useful list is to use querySelectorAll instead to get the radio buttons: const radios = form.querySelectorAll(`[name=${radio.name}]`); That gives us a static nodeList of those radio buttons, where static means that the list doesn’t change when the DOM changes. That nodeList has the forEach method available to it, but we would need to convert it to an array before using fancier methods such as find, filter, map, reduce, etc. Because of that, it’s better to not c…

Edit fiddle - JSFiddle - Code Playground

There was a discussion done many years back I have attached the links. My question is in the above example when there is nested input under the label in that case the for property is useless because in an explicit label with input nested both label and input are bonded and for an ID property needs are not explicitly needed.

[Archibald]

@PaulOB

This simple example would be impossible for the nested approach.

There’s a challenge . . . . .

[PaulOB]

@Archibald

There’s a challenge

Ha ha well done

But my answer is still the same

[PaulOB]

@codeispoetry

the for property is useless

It’s redundant in that case as the label is naturally associated to the label.

However, I previously mentioned a bug with screen readers which I remembered from about 15 years ago and apparently the Dragon Speaking screen reader has no support for nested inputs and requires the for attribute to identify the input.

https://a11ysupport.io/tech/html/label_element

Therefore I stick to my guns a will continue to avoid nested inputs unless absolutely necessary. :).

[codeispoetry]

@PaulOB

Therefore I stick to my guns a will continue to avoid nested inputs unless absolutely necessary. :).

The example that I have shared in that case for/id, if instead of nested one I go with for/id combination, will become complicated when such things are handled by user inputs as in wp PLUGINS Where there is no limit to how many radio button options can be created. also in that case for/id combination has to be generated programmatically.

Also I do not go for nested CSS/HTML then, in this case, there are two inputs(Radio + Text) associated with the same label how can the two inputs be tied to one ID?

Edit fiddle - JSFiddle - Code Playground

[PaulOB]

@codeispoetry

Also I do not go for nested CSS/HTML then, in this case, there are two inputs(Radio + Text) associated with the same label

That’s not acceptable as a label element can only refer to one input. You cannot have two inputs inside a label.

Error : The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.

You can have two different (separate) labels pointing to the same input but you can’t have one label pointing or containing two inputs.

That structure will be very buggy as clicking on the label should activate the input but you have two inputs in there so what does the browsers do when you click the second input. Theoretically as its inside a label it should activate the first input and I believe you may find that some browsers won’t let you activate the second input at all.

I wouldn’t touch that structure with a barge pole You probably need fieldsets if you want to group things together.

Also your fiddle is already buggy anyway because if I change a value and then click on any other values only the changed value shows at the bottom. You may need to revisit your logic for that component.

[codeispoetry]

@PaulOB

Also, your fiddle is already buggy anyway because if I change a value and then click on any other values only the changed value shows at the bottom. You may need to revisit your logic for that component.

Sir, My original question was not for using a nested structure under the label, but for utilizing your suggested one where the label and input as siblings. so my question was when one label and two inputs are sibling does this structure exists and will work? But as you have said that this doesn’t. I am confused about how should I proceed.

Shall I follow this structure →

<div class="first">
  <input type="radio" name="" id="">
  <input type="number" name="" id="">
</div>

Sir, The JS fiddle that has bugs, can you do me a favor if you have to approach that how will you handle that markup?

[PaulOB]

@codeispoetry

Shall I follow this structure →

Define the purpose of the check box?

It looks superfluous to me.

If you are using it to determine which input is selected then it seems the input is the key element. However you then allow its value to be changed!

I think you need to define the requirements for me. :).

From my point of view it looks like you are offering a predefined set of choices or a custom value. If that’s the case then I would suggest simple checkboxes with defined values and then a simple input box if a custom value is required.

That would then work without js if submitted as back end logic could determine the value.

You could then of course manipulate the front end with js as required.

[PaulOB]

@PaulOB

That would then work without js if submitted as back end logic could determine the value.

e.g.

[codeispoetry]

On a website, there are multiple causes, each with its own dedicated page. However, all these causes are then consolidated onto a single page. Visitors can select a cause using radio buttons to indicate where they want to donate. Each cause has a predetermined fixed value for donation, but there is also an option for users to enter a custom amount if they wish to increase or decrease their donation for a specific cause.

A situation like this:

By clicking the radio button the animated bar above just shows how much target is achieved and may not have any affiliation to the markup of the radio button and custom input for each associated radio button chosen.

[PaulOB]

I’d probably mark it up like this to start with and then enhance the behaviour with js as needed. (Such as setting focus into the input when ever a row is clicked).

There are labels for the charity and for the custom button except I hide the custom label as its only there for screen readers.