HTML 양식 속성

이 장에서는 HTML을 소개합니다 <form> 요소의 다른 속성.

Action 속성

action 속성은 양식을 제출할 때 수행할 작업을 정의합니다.

보통 사용자가 "제출" 버튼을 클릭할 때, 양식 데이터는 서버의 파일로 전송됩니다.

아래 예제에서 양식 데이터는 "action_page.php"라는 파일로 전송됩니다. 이 파일은 양식 데이터를 처리하는 서버 측 스크립트를 포함하고 있습니다:

예제

제출 후, 양식 데이터를 "action_page.php"로 보냅니다:

<form action="/action_page.php">
  <label for="fname">성:</label><br>
  <input type="text" id="fname" name="fname" value="Bill"><br>
  <label for="lname">이름:</label><br>
  <input type="text" id="lname" name="lname" value="Gates"><br><br>
  <input type="submit" value="제출">
</form>

직접 시도해 보세요

안내:action 속성을 제외하면, action을 현재 페이지로 설정합니다.

Target 속성

target 속성은 폼을 제출한 후 응답을 어디에 표시할지 정의합니다.

target 속성은 다음 중 하나의 값을 설정할 수 있습니다:

값 설명
_blank 응답이 새로운 창이나 탭에서 표시됩니다.
_self 응답이 현재 창에서 표시됩니다.
_parent 응답이 부모 프레임에서 표시됩니다.
_top 응답이 창의 전체 body에서 표시됩니다.
framename 응답이 명명된 iframe에서 표시됩니다.

기본 값은 _self이는 즉, 응답이 현재 창에서 열리는 것을 의미합니다.

예제

이 경우, 제출된 결과는 새로운 브라우저 탭에서 열립니다:

<form action="/action_page.php" target="_blank">

직접 시도해 보세요

Method 속성

method 속성은 폼 데이터를 제출할 때 사용할 HTTP 메서드를 지정합니다.

폼 데이터는 URL 변수(사용) method="get") 또는 HTTP POST 트랜잭션(사용) method="post")를 전송합니다.

폼 데이터를 제출할 때 기본적인 HTTP 메서드는 GET입니다.

예제

이 예제는 폼 데이터를 제출할 때 GET 메서드를 사용합니다:

<form action="/action_page.php" method="get">

직접 시도해 보세요

예제

이 예제는 폼 데이터를 제출할 때 POST 메서드를 사용합니다:

<form action="/action_page.php" method="post">

직접 시도해 보세요

GET에 대한 주의사항:

  • 폼 데이터를 이름/값 쌍의 형태로 URL에 추가합니다
  • 절대로 GET을 통해 민감한 데이터를 전송하지 마십시오!(제출된 폼 데이터는 URL에서 볼 수 있습니다!)
  • URL의 길이는 제한됩니다(2048 문자)
  • 사용자가 결과를 책갈이로 추가하고자 하는 폼 제출에 매우 유용합니다.
  • GET은 안전하지 않은 데이터(예: Google의 쿼리 문자열)에 적합합니다.

POST에 대한 주의사항:

  • 폼 데이터를 HTTP 요청의 본문에 추가합니다.(URL에서 제출된 폼 데이터는 표시되지 않습니다)
  • POST는 크기 제한이 없으며, 많은 데이터를 전송하는 데 사용할 수 있습니다.
  • POST를 포함한 폼 제출은 책갈이를 추가할 수 없습니다.

안내:폼 데이터가 민감한 정보나 개인 정보를 포함하고 있는 경우, 반드시 POST를 사용하십시오!

Autocomplete 속성

autocomplete 속성은 폼이 자동 완성 기능을 열어야 하는지를 정의합니다.

자동 완성 기능을 활성화하면, 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동으로 값을 입력합니다.

예제

자동 입력을 활성화한 폼:

<form action="/action_page.php" autocomplete="on">

직접 시도해 보세요

Novalidate 속성

novalidate 속성은 부울 속성입니다.

설정되어 있다면, 제출할 때 양식 데이터를 검증하지 않도록 지정합니다.

예제

novalidate 속성이 설정되지 않은 양식:

<form action="/action_page.php" novalidate>

직접 시도해 보세요

모든 <form> 속성 목록

속성 설명
accept-charset 양식 제출에 사용할 문자编码을 지정합니다.
action 양식을 제출할 때 양식 데이터를 어디로 전송할지 지정합니다.
autocomplete 양식이 자동 완성 기능을 활성화할지 여부를 지정합니다.
enctype 양식 데이터를 서버에 제출할 때 어떻게 인코딩할지 지정합니다（method="post"에만 적용됩니다）.
method 양식 데이터를 전송할 때 사용할 HTTP 메서드를 지정합니다.
name 양식 이름을 지정합니다.
novalidate 양식을 제출할 때 양식 데이터를 검증하지 않도록 지정합니다.
rel 링크 자원과 현재 문서 간의 관계를 지정합니다.
target 양식을 제출한 후 수신된 응답을 어디에 표시할지 지정합니다.