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?
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>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>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>