[문돌이의IT] HTML form태그와 get방식에 대해 알아보자

  HTML form태그는 클라이언트로부터 정보를 수렴해서 서버를 거쳐 DB에 연동할 때 사용 한다. 행과 열을 표현하는 table과는 차이가 있다.

form태그는 <form method="전송방식" action="경로">의 형태로 사용하며 <input type="submit">을 받는다.

 

 전송방식으로는 get방식과 post 방식이 있는데 get방식을 활용해보자. get방식은 기본 방식으로 주소입력줄에 값이 노출되며 속도가 빠르다는 특징이 있다. 사용해볼 형식은 아래와 같다.

 

<form method=”get” action="서버주소"> 

<input type="text"> 

<input type="button" value="일반"> 

<input type="submit" value="전송"> 

<input type="reset" value="취소"> 

</form> 

 

 먼저 예제 결과를 보면 텍스트 박스와 각 포탈의 검색 버튼이 있다. 텍스트 박스에 내용을 입력하고 검색을 누르면 해당포털에서 입력한 검색에 대한 결과가 나오도록 만들었다. 즉, 첫 번째 텍스트박스에 ‘어흥’ 을 입력하고 네이버 검색 버튼을 누르면 네이버 창이 뜨면서 어흥에 대한 검색 결과가 출력된다.

 이제 코드를 작성해보자.

<form method="get" action="https://search.naver.com/search.naver">

<input type="text" name="query" >

<input type="submit" value="네이버 검색">

</form>

 

<form method="get" action="http://search.daum.net/search">

<input type="text" name="q" >

<input type="submit" value="다음">

</form>

 

<form method="get" action="http://search.daum.net/nate">

<input type="text" name="q" >

<input type="submit" value="네이트">

</form>

 

<form method="get" action="http://search.daum.net/nate">

<input type="text" name="q">

<input type="image" src="enemy1.png" name="q" >

</form>

 

 검색 버튼에 대해서는 submit으로 입력한 내용을 전송하도록 했다. 마지막 코딩의 경우 유령 이미지를 클릭하면 이동하도록 만들었는데 image, src도 submit과 같은 효과가 있음을 알 수 있다. 이 기능은 디자인적으로 유용하다. 만약 회색의 검색 버튼이 칙칙하다면 돋보기 이미지 등으로 대체가능하기 때문이다. 

<관련글보기>

   - [문돌이의IT]HTML 문서에 링크 거는 두 가지 방법

   - [문돌이의IT] 자주 사용하는 CSS속성으로 HTML 표꾸미기