HTML 수업

웹의 신체

HTML 수업 웹의 신체

FORM

서버, 클라이언트

폼을 이해하기 위해서는 우선 서버와 클라이언트라는 개념을 이해해야 한다. 서버는 정보를 제공하는 쪽이고, 클라이언트는 정보를 제공 받는 쪽을 의미한다. 웹브라우저의 주소창에 생활코딩의 홈페이지인 http://opentutorials.org를 입력하면 웹브라우저는 opentutorials.org에 해당하는 컴퓨터에게 생활코딩 컨텐츠를 요청한다. 이 맥락에서 웹브라우저는 정보를 요청하는 쪽 다시 말해서 제공 받는 쪽이기 때문에 클라이언트가 되고, opentutorials.org의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기 때문에 서버가 된다.

아래 그림은 서버와 클라이언트의 관계를 나타낸 것이다.

폼 (form)

폼이란 사용자의 데이터를 서버에 전송하는 방법이다. 일반적으로 아래와 같은 작업을 하기 위해서는 폼을 이용한다.

  • 로그인을 위해서 아이디/비밀번호를 입력할 때
  • 회원가입을 하기 위해서 개인정보를 입력할 때
  • 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때

문법

form의 문법은 아래와 같다. <form> 태그 안쪽에 텍스트를 입력 받는 텍스트 필드나, 원하는 항목을 선택 할 수 있는 라디오 버튼등이 위치한다. 이러한 요소들을 컨트롤 (control)이라고 부른다. 사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송한다. 서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 된다.

<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">
    텍스트 필드, 라디오 버튼, 체크 박스와 같은 컨트롤을 생성하는 태그
</form>
  • action : 사용자가 입력한 데이터를 전송할 서버의 URL
  • method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다.
    • get : action에 입력한 URL에 파라미터의 형태로 전송
    • post : header의 body에 포함해서 전송

GET과 POST의 차이점

GET

  • URL에 정보가 담겨서 전송된다.
  • 전송할 수 있는 정보의 길이가 제한되어 있다.
  • 퍼머링크로 사용될 수 있다.

POST

  • header의 body에 담겨서 전송된다.
  • URL 상에 전달한 정보가 표시되지 않는다.
  • GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)
  • 전송할 수 있는 데이터의 길이 제한이 없다.
  • 퍼머링크로 사용할 수 없다.
  • 서버 쪽에 어떤 작업을 명령할 때 사용한다.
    (데이터의 기록, 삭제, 수정 등)

예제

example1.html - 사용자가 입력한 정보를 서버로 전송하는 예제 (github)

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<fieldset>
			<legend>
				GET
			</legend>
			<form action="./example2.php" method="GET">
				<p>
					닉네임 :
					<input type="text" name="nickname" />
					<br />
				</p>
				<p>
					직업 :
					<select name="job">
						<option value="designer">디자이너</option>
						<option value="programmer">프로그래머</option>
						<option value="planner">기획자</option>
					</select>
				</p>
				<input type="submit" value="전송"/>
			</form>
		</fieldset>
		<fieldset>
			<legend>
				POST
			</legend>
			<form action="./example2.php" method="POST">
				<p>
					닉네임 :
					<input type="text" name="nickname" />
					<br />
				</p>
				<p>
					직업 :
					<select name="job">
						<option value="designer">디자이너</option>
						<option value="programmer">프로그래머</option>
						<option value="planner">기획자</option>
					</select>
				</p>
				<input type="submit" value="전송"/>
			</form>

		</fieldset>
	</body>
</html>

example2.php - 사용자가 전송한 데이터를 받아서 화면에 표시해주는 예제 (github)

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        </head>
        <body>
                <?php
                echo $_REQUEST['nickname'].'님의 직업은 '.$_REQUEST['job'].'이군요!';
                ?>
        </body>
</html>

참고

 

댓글

댓글 본문
작성자
비밀번호
  1. NAMO
    감사합니다!
  2. 헤더의 바디라는 것이 무슨 의미인지 모르겠어요 ㅜㅜ
    형식상 헤더가 바디를 안고 있는 구문이지 않는데, 헤더의 바디라는 것이 어떤 뜻인가요?
    헤더가 관장하는 바디라는 의미인가요??? ㅜㅜ

    항상 감사히 보고 있습니다.
  3. JustStudy
    고맙습니다
  4. 효니
    너무 좋은 강의 입니다 ㅎㅎㅎ 책 보고도 사실 아리송한 내용이었는데, 이제 감을 잡은 듯 하네요 ㅎㅎ
  5. 유종수
    input 신기합니다.
  6. Jaeyoon Kim
    결국 문자그대로, GET은 서버에 기록되어 있는 데이터(가령 게시판)를 불러올때 사용하는 거고 POST는 서버에 데이터를 추가하거나 수정할 때 쓰는 거겠죠?
  7. asdfds1
    목소리가 너무 좋아서 게이가 될 것 같아요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  8. 이승훈
    슬슬 어려워 지는군요 ㅎ
    php도 봐야 될 때가 다가오는 듯
  9. 초심80
    php관련 페이지가 안나온다는 글이 많네요;;
    저도 웹서비스만들기 부터 여기까지 정주행 중인데요
    같은 증상이 나와서 매우 난감했던지라..나름 해결을 해보려고했습니다.
    결과만 말씀드리면 위 두개의 예제파일을 html_tutorials 폴더에 넣지말고
    htdocs폴더에 옮긴 후 http://locahost......tml 로 하시면 되네요.
  10. 보현
    get과 post
    영상 잘보고 갑니다!!
  11. 코코
    마지막 강의에서 POST랑 GET을 잘못 말하신 것 같네요..
  12. 신광섭
    좋은 강의 정말 감사합니다.
    한단계 한단계 따라가고 있습니다.
    전체적으로 다 볼 예정입니다.
    깔끔하고 이쁜 사이트 하나 만들고 싶네요.
  13. jerry
    좋은강의 감사합니다.
  14. 예시를 따라하면서 'submit'을 눌렀을 때 egoing님의 URL 처음부분(IP주소)이 저에겐 나타나지 않는 문제(예전 예문과 동일하게 폴더 경로만 나옵니다.)와, 아마도 이때문에 submit 클릭 후 동영상과 같은 "~님의 직업은 ~이군요"가 나타나지 않고 없는 페이지로 나옵니다.
    동영상을 그대로 따라하면 안되고 주소를 부여해 주어야 할 것 같은데 어떻게 해야 할까요.
  15. harama
    php자체는 서버쪽 코드입니다. 그래서 클라이언트 즉 브라우저로 그 페이지를 실행하게 되면 php코드는 보이지 않습니다.
    대화보기
    • 박한얼
      너무 잘 이해됩니다! 설명해주셔서 감사합니다.
    • YellowBall
      FORM(3/4) 잘 들었습니다.
      많이 얻고 갑니다.2015/4/29
    • 김진렬
      이고잉님 강의를 듣고 있으니 아내가 이고잉님 목소리가 너무 좋으시다고 하네요. 부럽습니다.^^
    • ㅣㅅㅇ
      이고잉님!! php파일을 예제의 echo 뒷내용만 다르게 했는데 아무것도 안떠서 개발자도구로 봤더니 php파일 안의body 태그 내부 내용 전체가 주석처리 되어있더라구요ㅠㅠ 댓글보니까 php엔진이 필요하다는데 주석처리되는것도 그런경우인가요...?ㅠ
    • egoing
      아파치 설치할 때 php도 함께 설치를 하게 됩니다. 만약 안된다면 아래 수업을 참고해주세요. 사실 여기서는 php를 설치하실 필요는 없고요. 구체적인 부분은 php 수업에서 공부하시면 될 것 같습니다.

      http://opentutorials.org......534
      대화보기
      • 메이플가이
        저도 아미쓔 박종길 님과 같은 문제점이 있습니다.
        웹서비스 만들기 수업 듣고
        HTML 로 넘어와서 한번 다 듣고 실습하는 단계입니다.
        php엔진이 설치되어야 php 가 브라우저 상에 표시된다고 하셨는데,
        php 엔진이라는 것을 따로 설치해야하나요 ?
        순차적인 수업을 듣는 과정에서 설치하라고 하신적이 없으십니다.

        그 때문에 example2.php 가 화면에 표시가 안되는것인지요 ?
        echo hello world; 등을 쳐봐도 그냥 빈 화면만 표시됩니다.
      • 이수곤
        동영상 강좌가 안나오네요.
      • egoing
        원래 그것을 쓰는게 권장입니다. request는 교육상의 편리를 위해 사용한 것이 아닐까 합니다.
        대화보기
        • 김트릿
          php파일에서
          $_REQEUST말고 $_GET이나 $_POST를 쓰면 안되는건가요?
          php강의에서는 겟이나 포스트를 썻던 기억이 나서..
        • egoing
          url에서 https를 http로 바꿔보시겠어요?
          대화보기
          • 유형찬
            GET , POST를 이렇게 쉽게 설명해 주시는 선생님은 더 이상 없다고 봅니다...최고이십니다! ^^*
          • egoing
            맞습니다. 알려주셔서 감사합니다!
            대화보기
            • Boterati
              크롬 개발자도구 Network 사용법 링크주소가 바뀐 것 같습니다. URL보니 test 페이지로 되어있네요
            • lovebang
              이해하기 너무 쉽네요~.~
              감사합니다!!!
            • huziya
              단순히 알고있던 내용을 정확하게 짚어볼수있어서 좋았습니다.
              더 열심히 공부해야겠어요^^
            • 최창원
              감사합니다.
            • egoing
              아미쓔님 안녕하세요. 강의를 만든지가 오래되었고 말씀하시는 상황이 정확하게 파악이 되지 않고 있습니다. 불편하시겠지만 screenr.com 과 같은 서비스로 스크린캐스트로 문의해주시면 더 정확하게 응대해드릴 수 있을 것 같습니다.
              대화보기
              • 아미쓔
                현재 php 엔진이 설치되지 않은 상태에서 공부를 하고 있습니다.
                form action = "~.html"이라고만 적어주었는데 되지 않더군요.
                박종길님이 이야기해주신 localhost를 추가해서 적는것 다시 알려시면 감사하겠습니다.
                대화보기
                • 복된장마비
                  쉽게 이해했어요~^^
                • egoing
                  저도 감사합니다 :)
                  대화보기
                  • 박종길
                    말씀 감사랍니다.
                    더 노력해 볼께요.
                    고생많으세요.
                    그래서 더욱 감사한 마음입니다.
                    좋은 하루되세요.
                    박종길.
                  • egoing
                    php를 실행하기 위해서는 php엔진이 설치되어 있어야 합니다. 그리고 단지 파일에 내용이 그렇게 다르다면 안될 이유가 없는데요. 저도 이상하네요. @@
                    대화보기
                    • 박종길
                      example2.php 를 타이핑하여 같은 폴더에 서버반응.php로 저장...
                      실행을 해보니 서버반응이 없습니다.
                      그래서 카피하여 붙여놓고 해보아도 안되요...
                      익스플로러에 이상이 있나 해서 파이어폭스로 해보아도 역시 결과는 같았습니다.
                      그래서 URL을 LOCALHOST로 하니까 말씀하신대로의 반응이 나타났습니다.
                      그런데 고잉님이 코딩하신대로는 아무 반응이 없는 이유가 궁금한니다.
                      차이가 있다면 <form action="./example2.php"와
                      <form action="http://localhost/opentutorials/htmlp1/폼html/서버반응.php" 이 차이일 뿐인데?????
                    • visual00
                      오우 예스잼입니다.
                    • 최민호
                      이고잉님!

                      method="GET"일 때는 echo($_REQUEST[])이고, method="POST"일 때는 echo($_POST[])처럼 사용하는 것 아닌가요? 아니면 GET 방식이든 POST 방식이든 모두 $_REQUEST[]를 사용하나요?
                    • Hyunduk Yi
                      그렇군요.. 잘 봤습니다.
                    • egoing
                      예를들어서 아래 URL을 한번 보시죠? http://phpschool.com......4...
                      wr_id=77064라고 되어있는 곳의 숫자를 77056로 바꿔보세요. 어떻게 되나요?
                      다른 글이 출력되지요?
                      그것은 wr_id 라는 값을 변경함으로써 태준님이 보고 싶은 글을 변경하고 있기 때문입니다.
                      이와 같이 어떤 프로그램에게 전달하는 입력값 (wr_id)을 파라미터라고하고, 프로그램은 파라미터에 따라서 다른 출력 값(이 경우는 서로 다른 글)을 출력하게 됩니다.
                      대화보기
                      • 권태준
                        강의 중에 나오는 파라미터가 무슨 말인가요?검색 해도 안 나와서 물어봅니다.. 강의 잘 듣고 있습니다...
                      • Darwin Park
                        와 재밋다~
                      • Chr0m3
                        post방식도 paros같은 프록시툴 이용하면 볼수있긴 하죠 ㅎㅎ
                      • goodbreath
                        firebug 사용법 짤렸네요 ㅠㅠ
                      • Jmogoon
                        get방식, post방식 완전 이해됐습니다.고맙습니다~
                      • 윤태원
                        수업 잘들었습니다.^^
                      • taiji202
                        GET과 POST가 그런 거였군요...!! 여태 몰랐네요;; 게시물 하나 링크 따야 하는데 주소창에 변동이 없으면.. 특히 관공서 사이트-_- 뭐 알아낼 수 없는 건 아니지만요. 왜 그런 건지 이제 알게 되었네요 감사합니다~~
                      • 아이링
                        와 정말 유용했습니다 ^^ 기획을 몇년해도 모르던 디테일이었어요. ㅎㅎ
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기