방문해 주셔서 감사합니다.
form 태그내에서 가장 많이 사용되는 태그로 input태그가 있습니다.
input태그는 type속성의 값에 따라 여러 기능을 수행합니다.
웹서비스를 이용하면서 취미를 선택하거나 할 때 체크박스를 본 적이 있을것입니다.
체크박스를 생성하려면 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>
결과는 바로 아래에서 확인하겠습니다.
기본 값이 적용되어 다음과 같은 결과를 확인 할 수 있습니다.
체크박스는 여러개의 값을 선택하는 특징이 있으며 다음에는 한개의 값만 선택할 수 있는 라디오박스에 대해서 알아보겠습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
컨텐츠의 내용을 더 보려면 바로 아래에서 확인할 수 있습니다.
컨텐츠
더보기
댓글 0개
정렬기준
