input 태그-2 (버튼)

Hush 2022. 5. 30. 12:28

체크박스와 라디오버튼

여러 항목 중 하나의 항목을 선택하려면 라디오버튼을,

2개 이상 선택하려면 체크 박스를 사용한다.

버튼에서 사용할 수 있는 속성은 다음과 같다

종류	설명
value	선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정합니다. 이 값은 영문이거나 숫자여야 하며 필수 속성입니다.
checked	버튼은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 만약 기본으로 선택해 놓고 싶은 항목이 있다면 사용합니다. 속성값은 따로 없습니다.

상품 주문을 넣는 폼을 체크바긋와 라디오버튼을 활용하여 만들어보겠다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>상품 주문</legend>
                <h3>주문할 상품을 선택해 주세요.</h3>
                <input type="checkbox" name="" id="present-3kg" value="p3">
                <label for="present-3kg">선물용 3kg</label>
                <input type="checkbox" name="" id="present-5kg" value="p5">
                <label for="present-5kg">선물용 5kg</label>
                <input type="checkbox" name="" id="family-3kg" value="f3">
                <label for="family-3kg">가정용 3kg</label>
                <input type="checkbox" name="" id="family-5kg" value="f5">
                <label for="family-5kg">가정용 5kg</label>

                <h3>선물포장 여부를 선택해 주세요.</h3>
                <input type="radio" name="present-pack" id="present-pack-yes" value="pp-yes">
                <label for="present-pack-yes">선물 포장</label>
                <input type="radio" name="present-pack" id="present-pack-no" value="pp-no">
                <label for="present-pack-no">선물 포장 안 함</label>
            </fieldset>
        </form>
    </body>
</html>

라디오 버튼에서 여러 버튼 중 하나의 버튼만 선택되도록 하려먼 여러 버튼의 name값을 동일하게 설정해주어야 한다. 위 예제에서 name값을 지정하지 않거나 각 버튼마다 다르게 지정했다면 라디오 버튼이라 할 지라도 여러 버튼이 동시에 선택될 수 있다.

저작자표시 (새창열림)