며칠 전에 나는 Go에서 브라우저에서 제출한 폼의 내용을 다른 REST 노드에 업로드하려고 했다. 다시 말하면Form in Browser ----> My GO Rest API ----> Another REST API이렇게 하는 과정에서 나는 마침내 HTML 폼 작업의 기초 지식을 배웠다.그래서 제가 배운 걸 공유하는 게 좋을 것 같아서 이 글을 올렸습니다.
양식의 인코딩 유형은 속성 enctype에 의해 결정됩니다.그것은 세 개의 값이 있을 수 있는데,

application/x-www-form-urlencoded - URL 인코딩을 나타내는 양식입니다.enctype 속성이 값으로 설정되지 않은 경우 이 속성이 기본값입니다.

multipart/form-data - 다중 양식을 나타냅니다.사용자가 파일

을 업로드하려고 할 때, 이런 종류의 폼을 사용합니다

text/plain - HTML5에 도입된 새로운 폼 유형은 말 그대로 데이터만 보내고 인코딩이 필요 없는

이제, 그것들을 더 잘 이해하기 위해, 각 표의 유형을 하나의 예로 살펴보자.

URL 인코딩 양식

말 그대로 이 양식을 사용하여 제출된 데이터는 URL에서 인코딩된 것입니다.다음과 같은 형식을 사용합니다.

<form action="/urlencoded?firstname=sid&lastname=sloth" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" value="sidthesloth"/>
    <input type="text" name="password" value="slothsecret"/>
    <input type="submit" value="Submit" />
</form>

여기서 폼은 POST 요청을 사용하여 서버에 제출하는 것을 볼 수 있습니다. 이것은 폼에 주체가 있다는 것을 의미합니다.그런데 몸은 어떻게 형성되나요?URL 인코딩입니다.기본적으로 (name, value) 쌍의 긴 문자열을 만들었습니다.각 (name, value) 쌍은 & (ampersand) 기호를 통해 서로 분리되고 각 (name, value) 쌍에 대해서는 name 쌍은 value 기호를 통해 = (equals) 쌍과 분리된다. 예를 들어key1=value1&key2=value2위의 표에 대해 말하자면,username=sidthesloth&password=slothsecret또한 작업 URL /urlencoded?firstname=sid&lastname=sloth에서 일부 질의 매개 변수를 전달했습니다.
URL 인코딩의 바디와 동작 URL에서 전달되는 쿼리 매개 변수는 매우 비슷해 보이지 않습니까?비슷하기 때문이다.그것들의 격식은 위에서 토론한 것과 같다.
위의 코드로 HTML 파일을 만들어서 개발 도구에 어떻게 제출하는지 보십시오.여기는 스냅숏입니다.

여기서 주의해야 할 것은 Content-Type 헤더입니다. 이것은 application/x-www-form-urlencoded을 표시하고, 검색 문자열과 폼 필드는 위에서 논의한 형식으로 서버에 전송됩니다.

Note: Don't get confused by the term Form Data in the screen shot. It's just how Google Chrome represents form fields.

모든 것이 다 좋지만 인코딩 과정은 아직 조금 있다.제출한 값에 공백을 도입하여 이전과 같은 아래 표를 사용하도록 하겠습니다. 그러나 firstname의 값은 sid에서 sid slayer1010username의 값은 sidthesloth에서 sid the sloth으로 변경되었습니다.

<form action="/urlencoded?firstname=sid slayer&lastname=sloth" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" value="sid the sloth"/>
    <input type="text" name="password" value="slothsecret"/>
    <input type="submit" value="Submit" />
</form>

이제 폼을 제출해 보고 폼 필드가 개발 도구에서 어떻게 전송되는지 봅시다.다음은 개발 도구 관리 장치인 Chrome입니다.

분명히 공백이 '% 20' 이나 '+' 으로 바뀐 것을 볼 수 있습니다.이 쿼리 매개 변수와 폼체는 모두 이렇다.
this을 읽고 + 및%20을 사용할 수 있는 시기를 확인하십시오.여기에는 URL 인코딩 프로세스가 포함됩니다.

다중 부분 테이블

여러 개의 폼은 일반적으로 사용자가 파일을 서버 환경에 업로드해야 하는 데 사용됩니다.그러나, 우리는 간단한 텍스트 필드 기반의 폼에만 주목할 것이다. 왜냐하면 그것이 어떻게 작동하는지 아는 것만으로도 충분하기 때문이다.
상기 폼을 여러 부분의 폼으로 바꾸려면 폼에 표시된 enctype 속성을 application/x-www-form-urlencoded에서 multipart/form-data으로 변경하면 된다.

<form action="/multipart?firstname=sid slayer&lastname=sloth" method="POST" enctype="multipart/form-data">
    <input type="text" name="username" value="sid the sloth"/>
    <input type="text" name="password" value="slothsecret"/>
    <input type="submit" value="Submit" />
</form>

개발 도구에서 어떻게 나타나는지 계속해서 제출합시다.
Content-Type 헤더와 폼 요청의 유효 부하에 주의해야 할 두 가지가 있습니다.우리 하나씩 하나씩 봅시다.

컨텐츠 유형 제목

Content-Type마리의 값은 분명히 multipart/form-data이다.그러나 boundary의 또 다른 값이 있다.상기 예시의 값은 브라우저에 의해 생성되지만 사용자도 그것을 잘 정의할 수 있다. 예를 들어 boundary=sidtheslothboundary이다.우리는 다음 절에서 그것의 용도를 볼 것이다.

요청 주체

요청 부하는 폼 필드 자체를 포함합니다.각 쌍의 (name, value)은 다음 형식의 MIME 메시지 섹션으로 변환됩니다.--<<boundary_value>>Content-Disposition: form-data; name="<<field_name>>"<<field_value>>(name, value) 쌍당 위 형식을 반복합니다.
마지막으로 전체 유효 부하는 boundary값으로 종료되고 이 값의 접미사는 --이다.그래서 모든 부탁이--<<boundary_value>>Content-Disposition: form-data; name="<<field_name>>"<<field_value>>--<<boundary_value>>Content-Disposition: form-data; name="<<field_name>>"<<field_value>>--<<boundary_value>>--이제 경계치를 어떻게 사용하는지 봅시다.application/x-www-form-urlencoded표의 경우 &과 유형의 기호는 각 (name, value)쌍 사이의 구분자를 충당하여 서버가 파라미터 값의 시작과 끝의 시간과 위치를 이해할 수 있도록 한다.username=sidthelsloth&password=slothsecretmultipart/form-data 테이블의 경우 경계 값이 사용됩니다.경계 값이 XXX인 경우 요청된 유효 부하는 다음과 같습니다.--XXXContent-Disposition: form-data; name="username"sidthesloth--XXXContent-Disposition: form-data; name="password"slothsecret--XXX--하이픈 자체는 경계 값의 일부분이 아니라 요청 형식의 일부분입니다.위 요청의 Content-Type 헤더는Content-Type: multipart/form-data; boundary=XXX이것은 브라우저로 하여금 모든 필드의 시작과 끝 시간과 장소를 이해할 수 있게 한다.

텍스트/일반 형식

이러한 양식은 URL 인코딩된 양식과 거의 동일하지만 양식 필드는 서버로 전송될 때 URL 인코딩되지 않습니다.일반적으로 그것들은 광범위하게 사용되지 않았지만, 그것들은 이미 HTML5 규범의 일부분으로 도입되었다.
기계가 아니라 인간의 이해를 위한 것이기 때문에 사용을 피한다.
spec의 말을 인용하면,

Payloads using the text/plain format are intended to be human readable. They are not reliably interpretable by computer, as the format is ambiguous (for example, there is no way to distinguish a literal newline in a value from the newline at
the end of the value).

호프, 나는 내가 배운 것을 분명히 설명했다.다음에 또 봐요, 친구들.평화...)
나의 website에서 나에 대한 더 많은 정보를 얻을 수 있다.✨