HTML 입력 양식 태그 / 개요

HTML 입력 양식 태그

안녕하세요 AimHo 입니다. 이번에는 입력 양식 태그를 다뤄보도록 하겠습니다.

입력양식 태그는 로그인, 회원가입 등 사용자에게 데이터를 입력받을 때 사용합니다.

<입력양식 태그가 사용된 예시. Naver 메인>

입력 양식 태그

입력 양식은 사용자에게 정보를 입력받는 공간을 말하며 입력 양식 태그를 사용해서 만듭니다.

입력 양식을 제대로 다루려면 서버와 관련된 기술도 알아야 하지만, 지금은 입력 양식과 관련된 기본 내용만 다루도록 하겠습니다.

입력 양식에 대해 알려면 우선 서버와 클라이언트라는 용어를 알아야 합니다.

간략하게 정리하면 아래와 같습니다.

서버(제공자): 웹 페이지를 제공해주는 대상

클라이언트(고객): 웹 페이지를 받는 대상

일반적으로 서버에서 클라이언트로 데이터가 전달됩니다. 하지만 회원가입과 로그인, 검색과 관련된 버튼을 클릭하는 순간에는 클라이언트가 서버로 데이터를 보내야 합니다. 입력 양식을 사용하는 것은 클라이언트가 서버로 데이터를 보내는 가장 기본적인 방법입니다.

입력 양식은 form 태그를 사용해 생성합니다. form 태그는 서버와 관련된 내용이 있으니 웹 프로그래밍 입문자는 무엇이 있는지 정도만 알고 넘어가도 좋습니다.

그럼 예제코드를 한번 볼까요?

---

입력 양식에 데이터를 입력하고 <submit>(쿼리 전송) 버튼을 클릭하면 지정된 방법으로 지정된 장소에 데이터가 전달됩니다. 장소와 방법은 form 태그의 2가지 속성 method와 action을 이용해 지정합니다.

method 속성만 간단히 언급해보겠습니다.

웹에서 데이터를 전송할 때 가장 많이 사용되는 전송 방식은 다음과 같습니다.

아까 작성한 예제 코드에서 <form> 태그에 <form method="post"> 이런 식으로 get or post 속성을 추가해주면 됩니다.

get 방식으로 데이터를 전달하면 주소창의 URL이 변동되게 됩니다. 네이버에 'AimHo'를 검색하면  'https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=aimho' 이런식으로 주소창이 변하는 것도 get 방식을 사용하기 때문입니다.

반면, post 방식은 주소가 변경되지 않습니다. get 방식과 달리 비밀스럽게 데이터를 전달합니다.

get 방식은 주소에 데이터를 입력하므로 크기가 한정되어 있습니다. 하지만 post 방식은 별도로 택배를 붙여 데이터를 전송하기 때문에 용량 제한이 없습니다.

get/post 방식은 웹과 관련된 상식이므로 간략하게 다루어보았습니다.

더 깊게 들어가려면 서버와 관련된 내용을 살펴봐야 하므로, action 속성은 주소, method 속성은 일반 편지와 택배 등의 배송방식을 구분한다고 이해하시기 바랍니다.

입력 양식 태그는 text 외에도 다양한 입력양식을 지원하는데, 오늘은 여기까지하고 다음에 이어서 작성하도록 하겠습니다.