& lt; form & gt의 동작 및 방법 속성은 무엇입니까? 꼬리표?

HTML의 <form></form> 태그는 사용자 입력을위한 HTML 양식을 작성하는 데 사용됩니다. 이 태그의 두 가지 중요한 속성은 action 및 method 속성입니다.

• 액션 속성 : action 속성은 양식이 제출 될 때 양식 데이터를 보낼 위치를 지정합니다. URL을 값으로 취합니다. 이 URL은 HTML 문서와 동일한 서버 또는 다른 서버에있을 수 있습니다. action 속성이 지정되지 않은 경우 양식 데이터는 양식을 포함하는 HTML 문서의 URL로 전송됩니다.
• 메소드 속성 : method 속성은 양식 데이터를 보낼 때 사용할 HTTP 메소드를 정의합니다. GET 또는 POST 두 가지 값 중 하나를 가질 수 있습니다. GET 메소드는 양식 데이터를 action 속성에 지정된 URL에 추가하여 A로 분리합니다 ? . POST 메소드는 HTTP 요청 본문의 일부로 양식 데이터를 보내며 URL에 표시되지 않습니다. GET 과 POST 간의 선택은 데이터의 특성과 해당 데이터의 의도 된 처리에 따라 다릅니다.

액션 속성은 양식 데이터가 전송되는 위치를 어떻게 결정합니까?

<form></form> 태그의 action 속성은 양식 데이터를 처리하기 위해 올바른 대상으로 지시하는 데 중요한 역할을합니다. 양식이 제출되면 브라우저는 HTTP 요청을 구성하여 action 속성에 지정된 URL로 보냅니다. 이 URL은 절대 URL (예 : https://example.com/process-form ) 또는 상대 URL (예 : /process-form ) 일 수 있습니다.

프로세스의 작동 방식은 다음과 같습니다.

1. 양식 제출 : 사용자가 제출 버튼을 클릭하면 브라우저가 양식 제출 프로세스를 시작합니다.
2. HTTP 요청 구성 : 브라우저는 method 속성에 지정된 메소드를 사용하여 HTTP 요청을 구성합니다. 양식 데이터는 메소드 ( GET 또는 POST )에 따라 인코딩됩니다.
3. 서버로 데이터 전송 : 양식 데이터를 포함하여 HTTP 요청은 action 속성에 지정된 URL로 전송됩니다.
4. 서버 처리 : 지정된 URL의 서버는 요청을 수신하고 서버 측 응용 프로그램의 논리에 따라 양식 데이터를 처리합니다.

올바른 action URL을 지정함으로써 개발자는 동일한 서버의 페이지이든 외부 서비스에 관계없이 양식 데이터가 처리를위한 의도 된 엔드 포인트에 도달하도록합니다.

양식 제출에서 GET와 Post 메소드의 차이점은 무엇입니까?

GET 및 POST 방법은 HTML에서 양식 데이터를 제출하는 주요 방법이며, 각각 고유 한 특성 및 사용 사례가 있습니다.

• 방법 얻기 :

  • 데이터 인코딩 : 데이터가 쿼리 매개 변수로 URL에 첨부되어 있습니까 ? . 예를 들어, 양식 데이터에 name=John&age=30 포함 된 경우 URL은 https://example.com/process-form?name=John&age=30 처럼 보일 수 있습니다.
  • 가시성 : 데이터가 URL에 표시되며 민감한 데이터가 전송되는 경우 보안 문제가 될 수 있습니다.
  • 북마크 및 캐싱 : 데이터가 URL의 일부이므로 GET 요청은 브라우저에 의해 북마크 및 캐싱 될 수 있습니다.
  • 데이터 제한 : URL 길이 제한으로 인해 일반적으로 2048 자 약 2048자를 보낼 수있는 데이터 양에는 제한이 있습니다.
  • Idempotency : 요청은 idempotent이므로 여러 동일한 요청이 단일 요청과 동일한 효과를 가져야합니다.

• 사후 방법 :

  • 데이터 인코딩 : 데이터는 HTTP 요청 본문의 일부로 전송되며 URL에는 표시되지 않습니다.
  • 가시성 : 데이터가 URL에 표시되지 않으므로 민감한 데이터를 전송하는 데 더 안전합니다.
  • 북마크 및 캐싱 : 사후 요청은 일반적으로 브라우저에서 북마크 또는 캐시되지 않습니다.
  • 데이터 제한 : 전송할 수있는 데이터 양에는 제한이 없으므로 대규모 데이터 제출에 적합합니다.
  • Idempotency : 사후 요청은 idempotent가 아니므로 여러 동일한 요청이 다른 영향을 미칠 수 있음을 의미합니다.

GET 과 POST 사이를 선택하는 것은 양식의 목적에 따라 다릅니다. GET 데이터를 검색하고 데이터를 숨길 필요가없는 양식에 적합한 반면, 민감한 데이터를 보내거나 서버 상태를 변경하는 작업을 수행하거나 많은 양의 데이터를 보내는 양식의 경우 POST 선호됩니다.

기능을 향상시키기 위해

다른 여러 속성을 <form></form> 태그와 함께 사용하여 기능 및 사용자 경험을 향상시킬 수 있습니다. 주요 속성은 다음과 같습니다.

• 이름 : 양식의 이름을 지정하여 JavaScript가 양식을 참조하는 데 유용 할 수 있습니다. 예 : <form name="myForm"></form> .
• ID : CSS 및 JavaScript에서 사용할 수있는 양식에 고유 식별자를 할당합니다. 예 : <form id="contactForm"></form> .

• ENCTYPE : 제출시 양식 데이터를 인코딩하는 방법을 지정합니다. 일반적인 값은 다음과 같습니다.

  • application/x-www-form-urlencoded (기본값) : 표준 인코딩.
  • multipart/form-data : 양식에 파일 업로드가 포함 된 경우 필요합니다.
  • text/plain : 평범한 텍스트 제출에 거의 사용되지 않습니다.

• 대상 : 양식을 제출 한 후받은 응답을 표시 할 위치를 지정합니다. 일반적인 값은 다음과 같습니다.

  • _self (기본값) : 같은 창/탭에서 열립니다.
  • _blank : 새 창/탭에서 열립니다.
  • _parent : 상위 프레임에서 열립니다.
  • _top : 창의 전체 바디에서 열립니다.
• 자동 완성 : 양식에 자동 완성이 활성화되어야하는지 여부를 제어합니다. 값은 on (기본값) 또는 off . 예 : <form autocomplete="off"></form> .
• Novalidate : 제출시 양식을 검증해서는 안된다고 지정합니다. 예 : <form novalidate></form> .
• accept-charset : 양식 제출에 사용될 문자 인코딩을 지정합니다. 예 : <form accept-charset="UTF-8"></form> .

이러한 속성을 통해 개발자는 양식 동작을 사용자 정의하고 보안을 향상 시키며 유용성을 향상 시키며 양식을보다 복잡한 웹 응용 프로그램에 통합 할 수 있습니다.