form에서 서버로 데이터 전송하기

form 에서 서버로 데이터를 보내는 방법은 두 가지가 있습니다. 먼저 form의 method를 get으로 보내는 것과 post로 보내는 것입니다.

 

get은 데이터를 보내면 url에 해당 parameter과 value값이 나타나게 됩니다. 당연히 url에 표시가 되기 때문에 전송 정보의 길이에 제한이 있습니다. 

 

post는 url에 데이터가 나타나지 않습니다. 이 특성 때문에 보안성이 높죠. 또 전송 정보 길이 제한이 없습니다. 

 

둘 중에 뭐가 더 좋다고 하는 질문은 바보같은 질문입니다. 그 이유는 그때 그때 마다 다르기 때문이죠. 쓰는 사람이 누구인지, 어떤 시스템인지 등에 따라서 달라질 수 있습니다.

 

get 방식은 그때그때마다 parameter과 value를 url에서 바꿀 수 있다는 장점이 있으나 보안성이 취약하다는 단점이 있습니다. 반대로 post같은 경우는 보안성이 높지만 어떤 parameter와 value를 가지는 지 알 수 없습니다. 즉 장점이 되는 동시에 단점이 되는 것이죠. 그래서 용도에 따라 다르게 사용한다는 것입니다.

 

form을 잘 만들기 위해서는 form tag를 연습을 하는 것이 매우 중요합니다. 그래서 w3school에서 연습을 충분히 하는 것이 무엇보다 중요하죠. 이것은 절대 공부가 아닙니다. 익히는 것이죠. 즉 다 몰라도 되고 필요할 때마다 잘 쓰는 게 중요합니다. 어차피 계속해서 html은 발전해나가고 계속 추가가 되니까요.

 

w3school에서 HTML으로 간 후 HTML Form에 들어가면 매우 간편하게 연습이 가능합니다. form 연습을 할때는 왼쪽의 소스를 보고 오른쪽을 보지않는게 좋습니다. 반대로 오른쪽의 구현된 모습을 보고 왼쪽의 코드를 보아야 왜 이렇게 되는지 이해하기 쉽고 도움이 됩니다. 예를 들면 label이라는 태그를 사용한다고 할때 왼쪽의 소스코드를 보지 말고 오른쪽에 구현된 모습을 보고 생각을 하고 예상을 한 다음 소스코드를 찾아가는 것이죠. 뭘 의미할지 대충 찍은 다음 확인하세요. 컴퓨터 업계 쪽은 직관이라는게 중요하다는 것이 바로 이런 것입니다.

 

form도 html과 마찬가지로 태그형식입니다. <>로 시작하여 </>로 끝나는 것이죠. 이 form태그는 여러 개를 만들어서 사용할 수 있습니다. 

 

input을 보겠습니다. input에서 value값을 넣는다는 것은 초기값을 지정해주는 것입니다. 만약에 초기값을 넣지 않고 유저가 직접 입력을 해서 데이터를 보내려면 value 자체를 삭제하면 됩니다.

value값을 지정

value 값을 default로 지정, 즉 입력값을 받기 위해 초기값을 없앰

input 타입은 현재 HTML이 업그레이드 되면서 매우 많아졌습니다. 한번씩 다 써보고 싶다는 생각이 드신다면 당신은 컴퓨터공학의 피가 흐른다고 할 수 있습니다^^. 

 

한 가지 소개하자면 input type='date'라고 한다면 달력의 형태로 나오게 됩니다. 과거에는 엄청 많은 노가다를 통해 개발자가 직접 구현했지만 지금은 단순히 type에 date라고 지정하기만 하면 아주 괜찮은 디자인의 달력이 나오며 날짜를 GUI기반으로 클릭을 통해 날짜 데이터를 넘기는 방식의 구현이 가능합니다.

 

Submit과 reset 타입은 각각 제출용, 초기화가 목적입니다. 

 

checkbox는 중복선택이 가능합니다.

 

그리고 input type에 따라 attribute가 다릅니다. 예를 들어 type이 date일 경우 min, max가 attribute로 적용됩니다. 

 

 

정리하면 소스를 화면을 통해 분석하는 것을 연습을 하는 것이 중요합니다.

 

팁을 드리자면 구현을 하실 때 입력 내부에 padding을 넣어 안정감을 높이고 주변에 색을 넣어서 입력부분을 좀 더 극대화하는 것, 입력부분의 테두리스타일을 바꾸고 placeholder 또한 스타일을 정하는 것 등이 나름 디자인 쪽에서 전략입니다. padding, animated search input, colored input등등 여러 기법들을 연습시키고 적용시켜보세요.

 

CSS form에서도 연습을 하는 것이 좋습니다. 

 

자바스크립트에는 event라는 것이 있습니다. w3school에는 onchange, onclick, onmouseover, onmouseout, onkeydown, onload, 총 6개 event가 있는데 각각 다른 기능이 있습니다. 3차원적인 느낌을 줄 수 있으니 적용시키면 좋습니다. 

 

w3school에서 PHP로 들어가서 PHP form handling을 들어가시면 상단에 form source와 php source를 찾아볼 수 있습니다.

 

여기서 포스팅 마무리 하겠습니다. 감사합니다.