PinkCoding

CLASS web

HTML

체크박스 만들기

input 태그의 type 속성의 값 : checkbox

form 태그내에서 가장 많이 사용되는 태그로 input태그가 있습니다. input태그는 type속성의 값에 따라 여러 기능을 수행합니다. 웹서비스를 이용하면서 취미를 선택하거나 할 때 체크박스를 본 적이 있을것입니다.
체크박스를 생성하려면 input태그의 type속성의 값으로 checkbox를 사용합니다.

input태그의 type속성에 checkbox적용 방법

<input type='checkbox' name='서버에서 인식할 값' value='서버에 전송할 값'/>

name속성의 값은 서버에서 주로 사용할 예정으로 지금은 잘 몰라도 좋지만 우선 용도에 맞는 이름을 설정합니다.

다음은 checkbox의 기능이 취미 정보를 수집하는 목적으로 사용한다고 할 때 사용할 수 있는 name속성의 값으로 userHobby를 사용할 때의 코드입니다. value속성의 값은 해당 체크박스가 음악듣기라고 할 때를 가정하여 listeningMusic를 사용합니다.

<input type='checkbox' name='userHobby' value='listeningMusic'/>

다음은 form태그와 함께 사용한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>input 태그의 type속성 값 checkbox</title>
</head>
<body>
    <h1>당신의 취미는 ?</h1>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post">
        음악 듣기 <input type='checkbox' name='userHobby' value='listeningMusic'/>
    </form>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위의 소스 실행 버튼을 눌러 실행을 해보면 결과를 알 수 있습니다.
결과 화면에서 보면 음악 듣기 1개의 선택 문항이 나타나는것을 확인 할 수 있습니다. 보통 이러한 체크박스는 여러가지 선택지를 두고 사용합니다.
여러가지 선택지를 두려면 checkbox를 여러개 만들면 됩니다. 다음과 같이요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>input 태그의 type속성 값 checkbox</title>
</head>
<body>
    <h1>당신의 취미는 ?</h1>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post">
        음악 듣기 <input type='checkbox' name='userHobby' value='listeningMusic'/><br />
        잠자기 <input type='checkbox' name='userHobby' value='sleeping'/><br />
        멍때리기 <input type='checkbox' name='userHobby' value='brainFade'/><br />
        책쓰기<input type='checkbox' name='userHobby' value='writingBook'/>
    </form>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

결과를 보면 아래와 같은 폼이 나오는데요.

당신의 취미는 ?

특정 값을 기본 선택할 수도 있습니다. 특정 값을 기본선택하려면 checked속성을 사용합니다.
잠자기 항목에 기본값을 적용하면 다음과 같습니다.

잠자기 <input type='checkbox' name='userHobby' value='sleeping' checked/>

위와 같이 적용하면 아래의 결과를 얻을 수 있습니다.

잠자기

그럼 전체 코드를 적용하여 다시 한번 결과를 확인하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>input 태그의 type속성 값 checkbox</title>
</head>
<body>
    <h1>당신의 취미는 ?</h1>
    <form name="해당 폼의 이름" action="값을 보낼 주소" method="post">
        음악 듣기 <input type='checkbox' name='userHobby' value='listeningMusic'/><br />
        잠자기 <input type='checkbox' name='userHobby' value='sleeping' checked/><br />
        멍때리기 <input type='checkbox' name='userHobby' value='brainFade'/><br />
        책쓰기<input type='checkbox' name='userHobby' value='writingBook'/>
    </form>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

기본 값이 적용되어 다음과 같은 결과를 확인 할 수 있습니다.