When to use Id and class in the same element

Question

The code below:

<form>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  </div>
  <div class="form-group">
    <label class="form-check-label"><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

I know what an id and what a class attribute, However, I am confused about why you use both in an element?

For example the above is in bootstrap, why is this: class="form-control with the id="inputPassword"

I would like an explanation why and when to use it because I would just use the class and not the id for this situation.

this `id="inputPassword"` is related to `for` attribute in `label` , it focus the input when you click on the label text — Ahmed El-sayed, Feb 27 '20 at 06:02
Does this answer your question? [Difference between id and class in CSS and when to use it](https://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it) — Kiran Mistry, Feb 27 '20 at 06:18

score 1 · Answer 1 · answered Feb 27 '20 at 06:03

This can help you in case when you are using generic styles for certain elements and you want an element to have some different properties then generic ones then you can specify the same using id on that element. Ids also make it easier to access the particular element using JavaScript and jQuery.

SAMUEL · Accepted Answer · 2020-02-27T06:13:29.380

1

The id and class attributes can be used to any element without any restriction.

The id attributes gives an element a unique identification across the page where the class attribute adds element to a class of elements that share same properties.

The id attribute value must be unique across the HTML page where class attribute can be reused where ever you want to apply the same properties

Coming to your example, class="form-control" is used to apply the input with the CSS properties of a form control where id="inputPassword" is used to uniquely identify the input to fetch its value.

edited Feb 27 '20 at 06:13

answered Feb 27 '20 at 06:11

SAMUEL

8,098
3
42
42

I understand what they are but more why in this situation is there an id and a class? Whats their roles here. – user218030 Feb 27 '20 at 06:13
@user218030 answer is updated – SAMUEL Feb 27 '20 at 06:16

score -1 · Answer 3 · answered Feb 27 '20 at 06:05

-1

i think if the inputPassword dont have a function then your id is useless. For me when using class if that function can will be use in many object. but for id is for one specific object.

answered Feb 27 '20 at 06:05

Alfredo Ramirez Jr.

30
8

When to use Id and class in the same element

3 Answers3