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>
위의 소스 실행 버튼을 눌러 실행을 해보면 결과를 알 수 있습니다.
결과 화면에서 보면 음악 듣기 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>
결과를 보면 아래와 같은 폼이 나오는데요.
당신의 취미는 ?
특정 값을 기본 선택할 수도 있습니다. 특정 값을 기본선택하려면 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>
기본 값이 적용되어 다음과 같은 결과를 확인 할 수 있습니다.
당신의 취미는 ?
체크박스는 여러개의 값을 선택하는 특징이 있으며 다음에는 한개의 값만 선택할 수 있는 라디오박스에 대해서 알아보겠습니다.