form 태그

form태그

form 태그는 웹 페이지에서 사용자로부터 정보를 수집하는 데 사용됩니다. 이 태그는 다양한 입력 요소와 함께 사용되며, 사용자가 데이터를 입력하고 제출할 때 웹 서버로 데이터를 전송하는 데 중요한 역할을 합니다.

form 태그 속성

action : 이 속성은 폼 데이터가 제출될 서버 측 스크립트 또는 웹 페이지의 URL을 지정합니다.

method: 이 속성은 HTTP 요청 방법을 설정합니다. 주로 사용되는 값은 "GET" 및 "POST"입니다. "GET" 방식은 데이터를 URL에 추가하여 전송하며, "POST" 방식은 요청 본문에 데이터를 추가하여 전송합니다. 보안 민감한 정보를 다룰 때는 "POST" 방식을 사용하는 것이 좋습니다.

name : 폼 요소의 이름을 정의하는 속성입니다. 서버에서는 이 이름을 사용하여 폼 데이터를 처리합니다. 각 입력 요소와 관련된 이름을 지정합니다.

id : 폼 요소의 고유한 식별자를 정의하는 속성입니다. 주로 CSS와 JavaScript에서 요소를 선택하고 조작하는 데 사용됩니다.

target : 폼을 제출한 후 결과를 표시할 위치를 지정하는 속성입니다. "_self"는 현재 창에서 결과를 표시하고, "_blank"는 새 창에서 결과를 표시합니다.

form 태그 안에 사용되는 태그들

fieldset , legend

fieldset 태그는 HTML 폼(form) 요소를 그룹화하고 그룹에 제목(legend)을 추가하는 데 사용됩니다. 이를 통해 사용자에게 폼의 섹션을 시각적으로 그룹화하고 설명할 수 있으며, 웹 접근성을 향상시키는 데 도움이 됩니다.

input

input 태그는 HTML에서 사용자로부터 데이터를 입력받는 데 주로 사용되는 요소입니다. 다양한 입력 형식을 지원하며, 웹 폼(form)을 만들 때 가장 일반적으로 사용되는 요소 중 하나입니다.

<form>
  <fieldset>
    <legend>개인 정보</legend>
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">이메일:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <fieldset>
    <legend>주소 정보</legend>
    <label for="address">주소:</label>
    <input type="text" id="address" name="address">
    <br>
    <label for="city">도시:</label>
    <input type="text" id="city" name="city">
  </fieldset>
  
  <input type="submit" value="제출">
</form>

이 예제에서는 "개인 정보"와 "주소 정보" 두 개의 그룹이 fieldset로 구성되었으며, 각 그룹에는 legend로 제목이 부여되어 있습니다. 이를 통해 사용자는 폼의 다른 섹션을 구분하고 이해하기 쉽게 됩니다.