HTML 수업

웹의 신체

HTML 수업 웹의 신체

선택

라디오 버튼 

여러개의 항목 중에서 하나만을 선택 할 수 있도록 제한하는 컨트롤

문법

<input type="radio" name="값의 이름" value="값" checked="checked">

예제

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                    관심사 : <br />
                    <input type="radio" name="interest" value="programming" checked="checked" /> 프로그래밍<br />
                    <input type="radio" name="interest" value="design" /> 디자인<br />
                    <input type="radio" name="interest" value="planning" /> 기획<br />
                    <input type="submit" />
                </form>
        </body>
</html>

example_receive_single.php - 사용자가 전송한 데이터를 서버 쪽에서 처리한다. (github)

<html>
        <body>
                당신의 관심사는? <?=$_POST['interest']?>
        </body>
</html>

콤보박스

여러개의 항목 중에서 원하는 것을 하나만 선택하는 컨트롤로 흔히 콤보박스라고 부른다. 

문법

<select name="값의 이름" multiple="multiple">
   <option value="선택될 경우 name의 값이 됨" selected="selected">값에 대한 표시값</option>
   ...option 반복
</select>
  • multiple : 이 속성의 값을 mulitple로 지정하면 여러개의 항목을 선택할 수 있는 컨트롤이 된다. 

예제

example2.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_single.php" method="POST">
                        관심사 : <br />
                        <select name="interest">
                                <option value="programming">프로그래밍</option>
                                <option value="design" selected="selected">디자인</option>
                                <option value="planning">기획</option>
                        </select>
                        <input type="submit" />
                </form>
        </body>
</html>

체크 박스

여러개의 항목 중에서 원하는 것을 복수로 선택할 수 있게 하는 컨트롤로 체크박스라고 부른다.

문법

<input type="checkbox" name="값의 이름" value="값" />
  • checkbox는 여러개의 값을 같은 이름으로 전송해야 하기 때문에 연관된 항목들의 name 값을 같은 이름으로 지정한다. (예제참고)
  • name의 이름 끝에 '[]'를 붙이면 서버 쪽에서 실행되는 언어가 이 값을 배열로 인지한다. 

예제

example3.html (jsfiddle, github)

<!DOCTYPE html>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <form action="example_receive_multi.php" method="POST">
                    관심사 : <br />
                    <input type="checkbox" name="interest[]" value="programming" /> 프로그래밍<br />
                    <input type="checkbox" name="interest[]" value="design" /> 디자인<br />
                    <input type="checkbox" name="interest[]" value="planning" checked="checked" /> 기획<br />
                    <input type="submit" />
                </form>
        </body>
</html>​

example_receive_multi.php - (github)

<html>
	<body>
		당신의 관심사는? <br />
		<ul>
			<?php
			foreach($_POST['interest'] as $entry){
				echo "<li>$entry</li>";
			}
			?>
		</ul>
	</body>
</html>

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. 앙리
    value값에 한글 입력안되나요?ㅎㅎㅎ
  3. JustStudy
    고맙습니다
  4. 효니
    음.. 배열에 대해 더 알고 싶지만 php를 배워야 겠어요! ㅎㅎ 언제나 유익한 강의 감사드립니다 ㅎㅎ
  5. 이승훈
    php를 배워야 모든 것이 이해가 되겠구나...
  6. 쪼라리
    정말 이해하기 쉽게 너무설명이잘 되있어서 배우기 너무 좋습니다
  7. YellowBall
    잘 들었습니다.2015/4/30
  8. 유형찬
    감사합니다. 그런데 궁금한게 클라이언트가 서버로 데이터 전송할 때 form_data의 내용을 서버의 example_receive_multi.php로 보내는 것이 맞나요? 그래서 서버가 이 php파일을 해석해서 클라이언트가 보낸 form_data값을 적용시킨 후 서버가 다시 클라이언트로 php가 동적으로 생성한 example_receive_multi.php 를 보낸다는 것인가요? php를 안배워서 그런건지 어렵네요...
  9. 도로시
    유익한 강의 잘 보고 있습니다 ^^

    질문이 하나 있는데요..
    사용자가 '기획'을 선택하고 submit을 눌렀을 때
    '당신의 관심사는 기획(planning이라고 영어로 나오는 것이 아니라)입니다'라고 나오게 하려면
    value="기획"이라고 한글로 입력해야 하나요?
    태그 사이의 content가 출력되게끔 할 수는 없나요?
  10. huziya
    알듯모를듯..헷갈리는 부분도 있지만 설명을 잘해주셔서 공부가 됩니다.
    감사합니다^^
  11. egoing
    별 문제는 없는데 그렇게 사용하지 않는게 좋겠죠.
    수정하도록 할께요 :)
    대화보기
    • 아름소리
      강좌 감사히 보고 있습니다.

      각 태그는 닫는 태그가 있거나, <... /> 라는 식으로 끝나는 것으로 알고 있습니다.

      그런데 강좌 예제에 있는<input type="..." > 는 닫는 tag도 없고, <.../>로 끝나지 않는데요.
      괜찮은 것인지 궁금합니다.
    • 복된장마비
      감사합니다~~^^
    • egoing
      재생이 잘되고 있는 것 같은데요. 일시적인 현상이 아닐까 싶습니다. 어떤 현상이 발생하고 있나요?
      대화보기
      • alsqor123
        콤보박스 영상 오류나서 틀어지지가 않아요..ㅠㅠ
      • leehoo7
        너무 감사하게 잘보고있습니다~
      • 강의 하시는 말투가 부드럽네요 듣기좋고 알아듣기 좋습니다!~
      • egoing
        다시 인코딩해서 올렸습니다. 알려주셔서 고맙습니다.
        대화보기
        • 상범 김
          라디오버튼 편의 화질이 매우 안좋습니다
        • Jae Sung So
          잘 봤습니다.
          구글 설문지 작성기도 이렇게 명령어를 써서 만들어 졌군요. :)
          수고하셨습니다
        • Jae Sung So
          시작. 합니다.
        • Jmogoon
          수고하셨습니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기