How to select only one radio box.. and why do my fieldsets look so weird?

[Elindo]

For example, I have this code section below:

<input type="radio" name="pump1" id= pump1 value="singlePump" checked>
  <label for="pump1"> Single Pump</label><br>
  
  <input type="radio" name="pump2" id= pump2 value="doublePump">
  <label for="pump2"> Double Pump</label><br>
  
  <input type="radio" name="pump3" id = pump3 value="Triplepump">
  <label for="pump3"> Triple Pump</label><br><br>

^^^ For this code I only want to have the option for the user to only select ONE of the options, but in my codepen I can select them all, which is not what I want to do… a similar code works good from 3W schools… why is my code able to select multiple options instead of just one??

Also… this other code here:

I want to apply a javascript function to get add/remove sections of a form within a fieldset… but again… seems like the fieldsets go all the way to the bottom of the code and not just within the fieldset tags I made… why would it be?

If you want to look at how the fieldsets look on the entire form, you can just check out this codepen with lines going all the way to the bottom of the form…

Pump form

  <fieldset id = fieldsetpump1> 
  
    <lengend>
  <h4> <u> Information for single pump. </u></h4>
      </legend>
  
  <label for="gpmPump1" style= "margin-bottom:20px">* GPM (single pump): </label>
  <input type="number" id="gpmPump1" style = "bottom-margin:3px" name="gpmPump1" placeholder = "GPM required" required ><br>
  
  <label for="pressure" style= "margin-bottom:20px"> * Pressure (psi):</label>
  <input type="number" id="pressure" name="pressure" placeholder = "Max Cont. pressure" required> <br>
  
  <label for="rpm" style= "margin-bottom:20px">* RPM: </label>
  <input type="number" id="rpm" name="rpm" placeholder = "Max Cont. RPM" required ><br> <br>
  
  <h4>
    Type of pump
  </h4>
  
  <input type="radio" name="p1Fixed" value="p1fixed" checked>
  <label for="p1fixed"> Fixed displacement </label>
  
  <input type="radio" name="p1variable" value="p1variable">
  <label for="p1variable"> Variable displacement</label><br> 
  
  
  <h4>
     Controls for variable displacement pump
  </h4>
  
  <input type="radio" name="p1pressurecomp" value="p1pressurecomp" checked>
  <label for="p1pressurecomp"> Pressure Compensated </label>
  
  <input type="radio" name="p1loadsensing" value="p1loadsensing">
  <label for="p1loadsensing"> Load Sensing</label><br>
  
  <input type="radio" name="p1pressurecompwithremote" value="p1pressurecompwithremote">
  <label for="p1pressurecompwithremote"> Pressure Compensated with Remote Control </label>
  
  <input type="radio" name="p1hplimiter" value="p1hplimiter">
  <label for="p1hplimiter"> HP Limiter </label><br> 
  
   <input type="radio" name="p1other" value="p1other">
  <label for="p1other"> Other (please comment in notes below) </label><br> <br> <br>
    
   <fieldset>

[bbsmooth]

@Elindo

why is my code able to select multiple options instead of just one??

Try making the name attribute the same value on all three of them.

[Elindo]

Thanks… that worked! I placed the same name for all of the buttons and now only one can be selected.

[lasjorg]

This was taught in the challenge Create a Set of Radio Buttons if you want to revisit it.

Edit: as for the other question, you never closed (i.e. </fieldset>) any of the fieldsets.

[Elindo]

OMGoodness!!!

Never closed the </fieldset> …

[jwilkins.oboe]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).