HTML input type 라디오 버튼 체크박스, radio check box

LoGinShin 2023. 6. 16. 15:53

사용자에게 데이터를 받을 때 여러 데이터 중 한 가지를 선택받거나 여러 개를 선택받을 수 있는 input type이 존재합니다.

웹 페이지 안에서 여러가지 항목들을 선택하거나 수정 또는 삭제 등의 작업을 수행해야 하는 경우에 자주 사용됩니다.

type="radio"	같은 value 중 한가지만 선택가능, 단일 선택
type="checkbox"	같은 value 중 다중 선택 가능, 다중 선택

radio button(라디오 버튼)

name, value 속성을 사용해서 서버로 보낼 값을 정해주면 한 개만 선택할 수 있는 라디오 버튼이 만들어집니다.

예시로 성향검사 할때 사용했었습니다.

<html>
    <body>
        <form action="">
            검정 : <input type="radio" name="color" value="black"><br>
            빨강 : <input type="radio" name="color" value="red"><br>
            파랑 : <input type="radio" name="color" value="blue"><br>
        </form>
    </body>
</html>

속성 중 checked를 적용시켜 두면 위에 사진처럼 사용자에게도 미리 선택돼 있는 모습입니다.

checkbox (체크박스)

체크박스는 라디오와 다르게 다중 선택을 필요로 할 때 주로 사용합니다.예시로 옷 사이즈를 고를 때 사용했었네요.

<html>
	<body>        
		 95 : <input type="checkbox" name="size" value="95">
		 100 : <input type="checkbox" name="size" value="100" checked>
		 105 : <input type="checkbox" name="size" value="105" checked>
    </body>
</html>

type을 checkbox로 지정하면 같은 name으로 지정해도 다중 선택이 가능한 것을 볼 수 있습니다.

기존 체크가 되어서 나오진 않지만 속성에 checked를 적어주면 첫 화면에 체크된 상태로 나옵니다.

728x90