서버와 클라이언트 간에 데이터를 주고 받으려면 GET, POST 메소드가 필요합니다. PHP GET 메소드와 POST 메소드를 다루기 전에 HTML From에 대해 미리 알아야 합니다.
웹은 기본적으로 클라이언트와 서버에 구조로 되어 있습니다. 아래 그림을 보듯이 HTTP 프로토콜을 사용해서 클라이언트가 서버에 어떤 요청을 보내면 HTTP 프로토콜을 이용해 그 요청에 응답합니다.
클라이언트가 서버로 데이터를 보낼 때 가장 편리하게 사용할 수 있는 것이 바로 HTML Form 폼입니다. HTML Form 폼은 클라이언트와 서버 간에 정보를 주고 받을 수 있는 강력한 도구이기도 하지요.
우리가 서버에 어떤 정보를 전달하기 위해서 어떤 행위를 할까요? 우리가 평소에 가장 많이하는 행위가 댓글 달기입니다. 댓글을 적기 위해서는 이름, 이메일, 내용이 필요한데요, HTML Form 폼은 이런 정보를 처리할 수 있습니다.
HTML 폼 스케치
HTML Form 폼은 다수의 위젯으로 구성되어 있습니다. 위젯은 위 그림처럼 이름을 입력하기 위해 에디터 박스, 옵션을 위한 체크 박스, 다자 택일을 위한 라디오 버튼, 최종 정보를 보내기 위한 버튼이 있습니다. 위 그림처럼 HTML Form 폼을 만들어 클라이언트에서 작성한 댓글을 서버에 전송하고 그 결과를 받는 것이 이 글의 목표입니다.
![[PHP] 강좌 #18 GET POST HTML Form 폼 개념 위젯 구성](https://t1.daumcdn.net/cfile/tistory/250247445591F0D610)
[PHP] 강좌 #18 GET POST HTML Form 폼 개념 위젯 구성
본격적으로 HTML Form 폼을 살펴보겠습니다.
<form> Element 요소
HTML 폼은 쉽게 이야기해 사용자의 입력을 모으기 위해 사용됩니다. HTML 폼을 의미하는 <form> 요소는 다음과 같이 구성됩니다.
.
form 요소들
.
</form>
<form>에서 action과 method 속성은 가장 중요합니다.
action 속성에 데이터를 보낼 URL를 입력합니다. 설정되지 않았다면 폼이 포함된 똑같은 페이지로 데이터가 보내집니다.
method 속성은 GET과 POST 중 어떤 HTTP 메소드를 사용할 것인지 입력합니다. 설정되지 않았다면 GET 방식으로 설정됩니다.
</form>
위 예제는 상대적인 주소를 썼는데 절대적인 주소를 사용해 표현할 수도 있습니다. 또 method에 post를 사용하여 다음과 같이 표현할 수 있습니다.
</form>
Name
이름 문자열 "Name"과 에디터 박스를 표현해보겠습니다. 문자열 "Name"은 라벨 <label>로 설정할 수 있습니다. 그냥 문자열을 표시해도 되지만 봏기 좋게 스타일을 적용하기 위해서는 <label>로 글자와 에디터 박스를 연결하는 것이 좋습니다. <label>에 for를 사용해 글자를 에디터 박스와 함께 묶을 수 있습니다.
에디터 박스는 <input>을 사용하면 됩니다. 속성 type에 일반 문자열인지 특수한 이메일 혹은 패스워드 형태인지 설정할 수 있습니다. <input>에 아이디(id)를 넣는 것은 <label>과 결합하기 위한 것입니다. 키값이 될 name을 설정합니다. 기본 값을 설정해주고 싶다면 value에 값을 설정합니다.
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" value ="Your name">
</div>
name이 키가 되고 value가 값이 됩니다. 위 내용이 다소 복잡해 보이는데요, 간단하게 쓰면 다음과 같이 쓸 수 있습니다.
<label>Name:</label>
<input type="text" name="user_name">
</div>
이메일에는 type이 email이라는 점외에는 똑같습니다.
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</div>
Message
메시지 여러 줄을 담기 위해 멀티라인을 지원하는 에디터 <textarea>를 사용합니다.
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
Button
<button>을 사용하고 type으로 submit를 설정합니다.
<button type="submit">Send your message</button>
</div>
간단하게 표현하고 싶다면 <button> 대신 <input>을 사용할 수도 있습니다.
전체 코드
<body>
<form action="test_Form.php" method="get"> <!-- post 메소드 사용하려면 get을 post로 교체-->
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name" value ="Your name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</body>
</html>
실행해보면
위 코드를 실행해보면 아래의 그림과 같습니다. 우리가 원래 계획했던 모양이 아니네요. HTML Form 폼 스케치한 것과 거리가 멉니다. 예쁘게 만들기 위해 style을 적용합니다. style 부분은 이 글의 주제가 아니므로 설명은 하지 않겠습니다.
스타일로 꾸며 보면
아래 css 코드를 적용하면 깔끔하고 아름다운 인터페이스가 만들어집니다.
form {
/* Just to center the form on the page */
margin: 0 auto;
width: 400px;
/* To see the limits of the form */
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
div + div {
margin-top: 1em;
}
label {
/* To make sure that all label have the same size and are properly align */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* To make sure that all text field have the same font settings
By default, textarea are set with a monospace font */
font: 1em sans-serif;
/* To give the same size to all text field */
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* To harmonize the look & feel of text field border */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* To give a little highligh on active elements */
border-color: #000;
}
textarea {
/* To properly align multiline text field with their label */
vertical-align: top;
/* To give enough room to type some text */
height: 5em;
/* To allow users to resize any textarea vertically
It works only on Chrome, Firefox and Safari */
resize: vertical;
}
.button {
/* To position the buttons to the same position of the text fields */
padding-left: 90px; /* same size as the label elements */
}
button {
/* This extra magin represent the same space as the space between
the labels and their text fields */
margin-left: .5em;
}
</style>
클라이언트는 작업은 끝났고 서버 php 파일을 작성해야합니다. PHP 강좌 #19에서 내용이 이어집니다.
[Copyright ⓒ 블로그채널 blogCHANNEL 무단전재 및 재배포 금지]
'컴퓨터 언어 > PHP' 카테고리의 다른 글
| [PHP] 강좌 #20 GET POST 장점 단점 비교 및 차이점 (0) | 2015.06.30 |
|---|---|
| [PHP] 강좌 #19 GET POST 키 밸류 슈퍼 글로벌 변수 사용 (1) | 2015.06.30 |
| [PHP] 강좌 #17 슈퍼 글로벌 변수 (0) | 2015.04.24 |
| [PHP] 강좌 #16 배열 정렬 함수 Sorting Array (0) | 2015.04.23 |
| [PHP] 강좌 #15 배열 Array (0) | 2015.04.22 |