Should input elements go inside a label element?

HTML & CSS
1

Which is the preferred way of doing it if there is one?

Should a label element be wrapped around an input element?

Like it is here?

<div class="info">
  <label class="label">Text
  <input class="input">
  <input class="sent" type="submit" value="Set">
  </label>
</div>

Where it’s not here:

<div class="info">
  <label class="label">Text </label>
  <input class="input">
  <input class="sent" type="submit" value="Set">
</div>
2

Hi there asasass,

there is no correct way.

How you do it really depends on your requirements.

Note though that a label element may only have
one child element unlike your first example.

In your second the label requires a for attribute…

<label for="someIdHere">

and the input requires the appropriate id attribute…

<input id="someIdHere" type="text">

coothead

1 Like
3

I’m still working on the code, but this is what I have:


<div class="info">
  <label class="label">Text</label>
  <input class="input" value=""/>
  <input class="sent" type="submit" value="Set">
</div>

So then, like this?

<div class="info">
  <label class="label" for="someIdHere">Text</label>
  <input class="input" value=""/>
  <input class="sent" type="submit" value="Set">
</div>
4

Hi there asasass,

you code it like this…

  <label class="label" for="someIdHere">Text</label>
  <input class="input" id="someIdHere"  name="someNameHere" value="">

Note :-

The name attribute is required if the input element’s value
is going to be submitted. :winky:

coothead

1 Like
5

I have 2 inputs, not 1 though?

6

Where is type text supposed to go?

type="text"

Code:

<div class="info">
 <label class="label" for="someIdHere">Text</label>
  <input class="input" id="someIdHere"  name="someNameHere" value="">
  <input class="sent" type="submit" value="Set">
</div>
7

Hi there asasass,

This is what I wrote in post #2…

It also means that each form element must have it’s own label.

In other words, they come as pairs. :biggrin:

coothead

8

What does that mean?

each form element must have it’s own label.

9

It is the attribute of the input element.

If it is omitted the input element will take the default value of “text”.

Other values, though, must be defined.

Personally, I always use it. :winky:

coothead

2 Likes
10

Also,
This class here:
<input class="input" id="someIdHere" name="someNameHere" value="">

Goes with this:
const value = document.querySelector('.input');

And this:

.input {
  font-size: 22px;
  width: 200px;
  margin-top: 30px;
  background: black;
  color: blue;
}

What is this id being used for then, and is it needed?

id="someIdHere"

Does that go with the for?

The for, is supposed to match the id?

Can the for match the class instead?

And then I would remove this?

id="someIdHere"

<div class="info">
  <label class="label" for="someIdHere">Text</label>
  <input class="input" id="someIdHere" type="text" name="someNameHere" value="" />
  <input class="sent" type="submit" value="Set" />
</div>
11

Yes.

No.

IDs are unique.
Classes are reuable.
Referencing the class (if it were possible in this context) would be ambiguous to what the label was “for”.

2 Likes
12

The reason why I’m using these as classes is because I’m using them in the CSS also.
.sent
.input

And that’s fine I think.

Just as long as the id in the input matches the same one that’s specified in the for.
Those have to match.

<div class="info">
  <label class="label" for="someIdHere">Text</label>
  <input class="input" id="someIdHere" type="text" name="someNameHere" value="" />
  <input class="sent" type="submit" value="Set" />
</div>
13

Yes, but naming classes the same as the element can be confusing.
It is easy to mistake an element named class for the element itself in the CSS.

Not a good practice. :wink:

2 Likes
14

What would a better way to do it be?

Like this:

<div class="info">
  <label class="label" for="example">Text</label>
  <input class="input" id="example" type="text" name="someNameHere" value="" />
  <input class="sent" id="sent" type="submit" value="Set" />
</div>

document.getElementById('sent')
document.getElementById('example'

15

Any naming you associate with your purpose with it. But avoid ambiguous names like those.

16

I’m so confused right now.

1 Like
17

Hi there asasass,

don’t get confused, get MDN - ( this must not be confused with DMT ). :eyebrows:.

Check it out here…

  1. MDN - HTML label element

coothead

2 Likes
18

Would this be better?

Then the CSS would be separated from the elements.

Like this:

<div class="info">
  <label class="label" for="aid">Text</label>
  <input class="input" id="aid" type="text" name="someNameHere" value="" />
  <input class="sent" id="mailed" type="submit" value="Set" />
</div>

document.getElementById('mailed')
document.getElementById('aid'

or would it be set up this way instead?

document.querySelector('#mailed')
document.querySelector('#aid');

The MDN documentation says that querySelector is preferred.

Document.querySelector() is the recommended modern approach,

There are older methods available for grabbing element references, such as:

Document.getElementById(),

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

And here I read this:

getElementById is faster and better supported than querySelector .

https://whatabouthtml.com/difference-between-getelementbyid-and-queryselector-180

19

Here is the official specification.
https://www.w3.org/TR/html5/sec-forms.html#the-label-element

20

You could rather use the same name for class as for id if you want it simple. That’s more like what I meant when I said “the purpose with it”.

Like this:

<div class="info">
  <label class="aid" for="aid">Text</label>
  <input class="aid" id="aid" type="text" name="someNameHere" value="" />
  <input class="mailed" id="mailed" type="submit" value="Set" />
</div>