Form inside form with input problems

Question

I am with a project and I am developing a questionnaire. Each question has five alternatives and these questions are on the same page, within divs, and within it form. Follows the code:

<form method="post" name="form" action="#" class=""> <!-- Form -->
  <div class="pb-3 mt-2"> <!-- Questão 1 -->
    <h4 class="titulo border-bottom">Questão 1</h4>
    <p align="justify" class="my-2 mx-3">Pergunta</p>
    <div class="custom-control custom-radio mx-3 border-bottom mb-1"> <!-- Primeiro imput do tipo radio -->
      <input type="radio" id="customRadio1" name="customRadio" class="custom-   control-input">
      <label class="custom-control-label" for="customRadio1">Sim</label>
    </div>
    <div class="custom-control custom-radio mx-3 border-bottom mb-1"> <!-- Segundo imput do tipo radio -->
      <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
      <label class="custom-control-label" for="customRadio2">Não</label>
    </div>

    <div class="pb-3 mt-4"> <!-- Questão 2 -->
      <h4 class="titulo border-bottom">Questão 2</h4>
      <p align="justify" class="my-2 mx-3">Pergunta</p>
      <div class="custom-control custom-radio mx-3 border-bottom mb-1"> <!-- Primeiro imput do tipo radio -->
        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio1">Sim</label>
      </div>
      <div class="custom-control custom-radio mx-3 border-bottom mb-1"> <!-- Segundo imput do tipo radio -->
        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2">Não</label>
      </div>
      <input type="submit" name="enviar" value="Enviar" class="btn botao" style="float: right;">
</form> <!-- Fim do form -->

That way they’re willing, when the first input of the second question is marked, the first input of the first question that is marked. And so with the second one as well. It is always the first question that is being marked. I discovered that it is because of the IDs of the elements and tried to change to CLASS and continued with the problem.

How could I solve this? I would put each question as a form?

I want to send everything together at the end. I’m using the style of Forms bootstrap.

From now on, thank you very much.

Answer 1

I believe the problem is the value of the attribute for of label and in the name of the group of btns. Note that the for is used to link the text of label at the radio-button, so in case the user click on the text the radio is marked.

And the name is what makes the buttons belong to the same group. For example if you want the btns of the question one are only related to each other use the same name us radios of that question. If you want radios of question 1 and 2 are related to each other forming a group only use the same name in all the radios

To understand more about the attribute for read here: The for attribute of a label element serves something?

<form method="post" name="form" action="#" class="">
    <!-- Form -->
    <div class="pb-3 mt-2">
        <!-- Questão 1 -->
        <h4 class="titulo border-bottom">Questão 1</h4>
        <p align="justify" class="my-2 mx-3">Pergunta</p>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Primeiro imput do tipo radio -->
            <input type="radio" id="customRadio1" name="customRadio" class="custom-   control-input">
            <label class="custom-control-label" for="customRadio1">Sim</label>
        </div>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Segundo imput do tipo radio -->
            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
            <label class="custom-control-label" for="customRadio2">Não</label>
        </div>
    </div>
    <div class="pb-3 mt-4">
        <!-- Questão 2 -->
        <h4 class="titulo border-bottom">Questão 2</h4>
        <p align="justify" class="my-2 mx-3">Pergunta</p>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Primeiro imput do tipo radio -->
            <input type="radio" id="customRadio11" name="customRadio" class="custom-control-input">
            <label class="custom-control-label" for="customRadio11">Sim</label>
        </div>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Segundo imput do tipo radio -->
            <input type="radio" id="customRadio22" name="customRadio" class="custom-control-input">
            <label class="custom-control-label" for="customRadio22">Não</label>
        </div>
        <input type="submit" name="enviar" value="Enviar" class="btn botao" style="float: right;">
    </div>

</form> <!-- Fim do form -->

---

Separating the groups

Should you want them radios of question 2 are independent of radios question 1. Use the same name us radios of 1 and a different name in radios of question 2

<form method="post" name="form" action="#" class="">
    <!-- Form -->
    <div class="pb-3 mt-2">
        <!-- Questão 1 -->
        <h4 class="titulo border-bottom">Questão 1</h4>
        <p align="justify" class="my-2 mx-3">Pergunta</p>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Primeiro imput do tipo radio -->
            <input type="radio" id="customRadio1" name="customRadio" class="custom-   control-input">
            <label class="custom-control-label" for="customRadio1">Sim</label>
        </div>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Segundo imput do tipo radio -->
            <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
            <label class="custom-control-label" for="customRadio2">Não</label>
        </div>
    </div>
    <div class="pb-3 mt-4">
        <!-- Questão 2 -->
        <h4 class="titulo border-bottom">Questão 2</h4>
        <p align="justify" class="my-2 mx-3">Pergunta</p>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Primeiro imput do tipo radio -->
            <input type="radio" id="customRadio11" name="customRadio2" class="custom-control-input">
            <label class="custom-control-label" for="customRadio11">Sim</label>
        </div>
        <div class="custom-control custom-radio mx-3 border-bottom mb-1">
            <!-- Segundo imput do tipo radio -->
            <input type="radio" id="customRadio22" name="customRadio2" class="custom-control-input">
            <label class="custom-control-label" for="customRadio22">Não</label>
        </div>
        <input type="submit" name="enviar" value="Enviar" class="btn botao" style="float: right;">
    </div>

</form> <!-- Fim do form -->