HTML 폼(form)태그 및 속성 정리 get방식 post방식 label태그

HTML에서 사용자에게 데이터를 입력받아 처리할 때 사용되는 form 태그와 각종 컨트롤로 사용되는 input 태그에 대해 알아보겠습니다.

 

 

HTML 태그 정리표 보러가기

HTML 태그 정리표 HTML 주요 태그들 정리

 

입력 폼을 구성하는 <form> 태그

HTML 페이지에서 사용자에게 데이터를 입력받을 때, 사용자 입력 양식의 처음과 끝을 지정할 때, <form> 태그를 사용하며, <form>과 </form> 사이에 입력받을 폼 요소를 넣어서 사용하게 됩니다.

 

<form [속성 = '속성값']
	폼 요소 들 
 </form>

<form> 태그의 속성 값에는 몇 가지 있으며, 대부분 <form> 태그 안의 폼 요소 들을 어떻게 처리할 것인지에 대해서 설정하게 됩니다.

• method : 입력받은 데이터를 서버로 전달할 때, 전달되는 방식을 지정할 수 있습니다.
  • get : 겟 방식이라고 하며, 256 ~ 4,096byte의 용량 제한으로 보내며, URL의 매개변수 형식으로 데이터를 전달하며 데이터가 주소 URL에 포함되어 보내지기에 보안에 취약한 단점이 있습니다.
  • post : 포스트 방식이라고 하며, 보내는 데이터 용량에 제한이 없고, 사용자로 부터 전달받은 데이터 또한 드러나지 않습니다.
  • 두 가지 방법 외에도 PUT과 DELETE 방식도 있습니다.
• action : 태그 안의 데이터를 처리해 줄 서버 쪽 프로그램을 지정할 수 있습니다.
• target : action속성에서 서버 쪽 프로그램의 응답을 받는 위치를 지정할 수 있습니다.
  • _self : 응답을 현재 브라우저에서 진행(기본값)
  • _blank : 응답을 새로운 브라우저에서 진행
  • _parent : 응답을 현재 브라우저의 부모에 표시하며, 부모가 존재하지 않으면 _self와 동일
  • _top : 응답을 최상단의 브라우저에 표시하며 최상위의 브라우저가 없으실 _self와 동일
• autocomplete : 폼 안에서 자동완성 기능을 끌 수 있습니다.(기본값 on)

 

 

 

폼 요소 그룹 지정 <fieldset>, <legend> 태그

쇼핑몰에서 결제할 때, 배송지 입력 및 결제 방식 등 여러 가지 사항들이 있습니다. 배송지와 결제는 그 성격이 달라서 따로 관리하고 구분할 필요가 있는데요. 이렇게 입력 양식의 용도별로 구분하고 그룹화할 때 사용하는 것이 <fieldset>, <legend> 태그입니다. 

<form action="">
  <fieldset>
    <legend>배송지 입력</legend>
    <!-- ...입력 양식 -->
  </fieldset>

  <fieldset>
    <legend>결제 정보</legend>  
    <!-- ...입력 양식 -->
  </fieldset>

</form>

 

폼 요소 레이블 연결 <label> 태그

폼 요소중 하나인 텍스트 박스를 사용할 때, 사용자에게 해당 텍스트 박스에 어떤 것을 입력해야 하는지 명시해줘야 합니다. 이렇게 폼 요소가 어떤 요소인지 이름을 붙여줄 때 사용하는 게 <label> 태그입니다.

<form action="">
  <label for="userID">사용자 ID</label>
  <input type="text" id="userID">
  <br>
  <label for="passwd">비밀번호</label>
  <input type="password" id="passwd">
</form>

여기서 input 태그에서 지정한 id와 label 태그에서 지정한 for를 일치시켜 label 태그와 input 태그를 연결시킬 수 있습니다. 연결을 한다고 해서 HTML 페이지상 변화는 없지만, 소스코드상으로 레이블과 컨트롤 요소가 연결되어 있다는 것을 확인하여 코드가 붙어있지 않아도 연결성을 확인할 수 있습니다.