Bootstrap - move to part of webpage when button is clicked-CodePudding

I have a webpage called index.html and I would like to be able to click on a button and move on a specific part of the webpage (where a form is located). The code I have looks like this:

Button:

<div href="#button1" >
                     <button type="submit" >
                         Reserve Table
                     </button>
 </div>

Part where I want to go to when button is clicked:

 <div >
     <div >
         <div  id="card1">
             <h3 >Reserve a Table</h3>
             <div >
                 <dl >
                     <dt >Number of Guests</dt>
                     <dd ><div  id="form1">
                         <input  type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                         <label  for="inlineRadio1">1</label>
                       </div>
                       <div >
                         <input  type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                         <label  for="inlineRadio2">2</label>
                       </div>
                       <div >
                         <input  type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                         <label  for="inlineRadio3">3</label>
                       </div>
                       <div >
                         <input  type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4">
                         <label  for="inlineRadio4">4</label>
                       </div>
                       <div >
                         <input  type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5">
                         <label  for="inlineRadio5">5</label>
                       </div>
                       <div >
                         <input  type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option6">
                         <label  for="inlineRadio6">6</label>
                       </div></dd>
                       </dl>
                       <dl >
                         <dt >Date and Time</dt>
                         <dd ><div >
                         <label for="telnum" ></label>
                         <div >
                             <input  type="tel" name="inlineRadioOptions" id="inlineRadio6" value="Date">
                             <label  for="inlineRadio6"></label>
                         </div>

                             <div >
                                 <input  type="tel" name="inlineRadioOptions" id="inlineRadio6" value="Time">
                                 <label  for="inlineRadio6"></label>
                             </div>       
                         </dd>            
                     </div>
                     </dd>   
                 </dl>                                                                                  
                 </dl>

                 <div >
                     <div >
                         <button type="submit"  id="button1">
                             Reserve
                         </button>
                     </div>
                 </div>
             </div>

         </div>
     </div>

          </form>
      </div>
       <div >
      </div>
 </div>

How can I set the ID correctly in order for when the button is pushed I will be going to the form part of the .html page?

I tried setting an ID and using the href command but it is not working!

CodePudding user response：

<div> tag doesn't have href attribute. use hyperlink instead. Use a valid id for from tag and use the same id for href attribute of the hyperlink

<a href="#form1" >  
    Reserve Table
</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<form id="form1">
  <div >
    <div >
      <div  id="card1">
        <h3 >Reserve a Table</h3>
        <div >
          <dl >
            <dt >Number of Guests</dt>
            <dd >
              <div  id="form1">
                <input  type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                <label  for="inlineRadio1">1</label>
              </div>
              <div >
                <input  type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                <label  for="inlineRadio2">2</label>
              </div>
              <div >
                <input  type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
                <label  for="inlineRadio3">3</label>
              </div>
              <div >
                <input  type="radio" name="inlineRadioOptions" id="inlineRadio4" value="option4">
                <label  for="inlineRadio4">4</label>
              </div>
              <div >
                <input  type="radio" name="inlineRadioOptions" id="inlineRadio5" value="option5">
                <label  for="inlineRadio5">5</label>
              </div>
              <div >
                <input  type="radio" name="inlineRadioOptions" id="inlineRadio6" value="option6">
                <label  for="inlineRadio6">6</label>
              </div>
            </dd>
          </dl>
          <dl >
            <dt >Date and Time</dt>
            <dd >
              <div >
                <label for="telnum" ></label>
                <div >
                  <input  type="tel" name="inlineRadioOptions" id="inlineRadio6" value="Date">
                  <label  for="inlineRadio6"></label>
                </div>

                <div >
                  <input  type="tel" name="inlineRadioOptions" id="inlineRadio6" value="Time">
                  <label  for="inlineRadio6"></label>
                </div>
              </div>
            </dd>
          </dl>
        </div>

        <div >
          <div >
            <button type="submit"  id="button1">
            Reserve
          </button>
          </div>
        </div>
      </div>

    </div>
  </div>

</form>