Radio buttons in HTML form not working properly-CodePudding

I'm learning Javascript and forms in HTML and I knew about radio buttons. But the problem is when I'm coding 3 radio buttons for testing, somehow it doesn't work, and when I check "1" (it's a name) and I choose another one like "2", it doesn't uncheck "1"! Does my browser have a problem, or my code is wrong? I'm using the Microsoft Edge browser, and this is my code:

<form>
  <label for="html">This one is Html </label>
  <input type="radio" name="html" id="html" value="HTML">
  <br>
  <label for="css">This one is Css</label>
  <input type="radio" name="css" id="css" value="CSS">
  <br>
  <label for="javscript">This one is Javascript</label>
  <input type="radio" name="javscript" id="javascript" value="JAVASCRIPT">
</form>

Anyone know what is my problem?

CodePudding user response：

name property is as a group. so if you set the same name on radio buttons, they are being in same group.

<form>
  <label for="html">This one is Html </label>
  <input type="radio" name="group1" id="html" value="HTML">
  <br>
  <label for="css">This one is Css</label>
  <input type="radio" name="group1" id="css" value="CSS">
  <br>
  <label for="javscript">This one is Javascript</label>
  <input type="radio" name="group1" id="javascript" value="JAVASCRIPT">
</form>

CodePudding user response：

This is simple, you just need to use the same name for each group, here i used codetype:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form>
        <label for="html">This one is Html </label>
        <input type="radio" name="codetype" id="html" value="HTML">
        <br>
        <label for="css">This one is Css</label>
        <input type="radio" name="codetype" id="css" value="CSS">
        <br>
        <label for="javscript">This one is Javascript</label>
        <input type="radio" name="codetype" id="javascript" value="JAVASCRIPT">
    </form>
</body>
</html>

CodePudding user response：

Please you can use radio button that time all radio button name set same then you select at that time one radio button.

  <form>
      <label for="html">This one is Html </label>
      <input type="radio" name="skill" id="html" value="HTML">
      <br>
      <label for="css">This one is Css</label>
      <input type="radio" name="skill" id="css" value="CSS">
      <br>
      <label for="javscript">This one is Javascript</label>
      <input type="radio" name="skill" id="javascript" value="JAVASCRIPT">
    </form>

CodePudding user response：

Just use the same name attribute value for each group.

<form>
  <label for="html">This one is Html </label>
  <input type="radio" name="radio_button" id="html" value="HTML">
  <br>
  <label for="css">This one is Css</label>
  <input type="radio" name="radio_button" id="css" value="CSS">
  <br>
  <label for="javscript">This one is Javascript</label>
  <input type="radio" name="radio_button" id="javascript" value="JAVASCRIPT">
</form>