HTML
<input> - radio
자라나라나무나무나
2022. 6. 1. 21:11
<!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" type="text/css" href="printpage.css" />
</head>
<body>
<h2>Form</h2>
<form action="" method="GET">
<label>
RADIO : <input type="radio" name="radio" value="r1" />
RADIO : <input type="radio" name="radio" value="r2" />
RADIO : <input type="radio" name="radio" value="r3" />
</label>
<button type="submit">제출</button>
</form>
</body>
</html>name의 값이 다를 경우에는 한개의 input 으로 생각하기 때문에 중복으로 선택이 가능 한 것 처럼 보이게 된다.
그렇기 때문에 radio를 여러개 할 경우 name 값은 동일하게 해주고 각 input 에 value값을 정해주어 제출하게 되면
어떤 radio를 선택했는지 알 수 있다. (get - url 보면 나온다)
기본값을 체크로 하는 방법
<!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" type="text/css" href="printpage.css" />
</head>
<body>
<h2>Form</h2>
<form action="" method="GET">
<label>
RADIO : <input type="radio" name="radio" value="r1" checked/>
RADIO : <input type="radio" name="radio" value="r2" />
RADIO : <input type="radio" name="radio" value="r3" />
</label>
<button type="submit">제출</button>
</form>
</body>
</html>