# Survey Form checkbox: id vs value

**URL:** <https://forum.freecodecamp.org/t/survey-form-checkbox-id-vs-value/324130>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [October 26, 2019, 10:10am UTC](https://forum.freecodecamp.org/t/survey-form-checkbox-id-vs-value/324130 "2019-10-26T10:10:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![smile1120](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smile1120/32/126045_2.png) [@smile1120](https://forum.freecodecamp.org/u/smile1120)\
**Post date:** [October 26, 2019, 10:10am UTC](https://forum.freecodecamp.org/t/survey-form-checkbox-id-vs-value/324130/1 "2019-10-26T10:10:49Z")

</div>

Previously, I’ve learned to create checkbox with `for` and `id` in [Basic HTML and HTML5: Create a Set of Checkboxes](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes).

Now, I’m doing [Responsive Web Design Projects - Build a Survey Form](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form). I saw **User Story #14** , it says

> each of which must have a `value` attribute.

So now I have noticed there are 2 ways to create checkbox.

Solution 1: create checkbox with `for` and `id`.

```auto
<label for="loving">
  <input
    type="checkbox"
    name="personality"
    id="loving">
  Loving
</label>

```

Solution 2: create checkbox with `value`.

```auto
<label>
  <input
    type="checkbox"
    name="personality"
    value="loving">
  Loving
</label>

```

Question: What is the difference between “Solution 1” and “Solution 2”? Do they work the same?

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [October 26, 2019, 11:01am UTC](https://forum.freecodecamp.org/t/survey-form-checkbox-id-vs-value/324130/2 "2019-10-26T11:01:58Z")

</div>

You can omit the `for` attribute if the input is nested in a label element.

If the input is not nested, it’s better to use the `for` attribute:

```auto
<input type="checkbox" value="loving" id="loving">
<label for="loving">Loving</label>

```

The `value` attribute is _not_ the same as the `id`. The value contains the data that will be used when the form is submitted. For example, when making a post in this forum, the text that you type on the textarea will be its value. For checkboxes, their value will be included in the submitted data if they are marked as checked.

On the other hand the `id` is just a unique identifier for that element, mostly used when referring to an element in HTML (like in a label’s `for` attribute), or in JavaScript (like when using `document.getElementById()`).

---

<div class="post-metadata">

**Author:** ![smile1120](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smile1120/32/126045_2.png) [@smile1120](https://forum.freecodecamp.org/u/smile1120)\
**Post date:** [October 27, 2019, 8:18am UTC](https://forum.freecodecamp.org/t/survey-form-checkbox-id-vs-value/324130/3 "2019-10-27T08:18:55Z")

</div>

[Basic HTML and HTML5: Use the value attribute with Radio Buttons and Checkboxes](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [February 6, 2021, 9:16pm UTC](https://forum.freecodecamp.org/t/survey-form-checkbox-id-vs-value/324130/4 "2021-02-06T21:16:59Z")

</div>

Closed on February 6, 2021, 9:16pm UTC