프론트엔드 센트럴파크 (☞ﾟヮﾟ)☞

<input> - radio 본문

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>

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

disabled, readonly  (0) 2022.06.04
autocomplete, required  (0) 2022.06.04
<input> - range  (0) 2022.06.01
<input> - minlength, maxlength  (0) 2022.06.01
<fieldset>, <legend>  (0) 2022.06.01
'HTML' Related Articles more
Comments