양식을 사용하여 사용자로부터 데이터 가져오기

양식 요소에 관한 이 소개를 통해 웹에서 양식을 사용하는 기본사항을 알아보세요.

웹사이트 사용자에게 가장 좋아하는 동물을 묻고 싶다고 가정해 보겠습니다. 첫 번째 단계로 데이터를 수집할 방법이 필요합니다.

HTML에서는 양식 요소 (<form>), <label>이 있는 <input>, 제출 <button>를 사용하여 이를 빌드할 수 있습니다.

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

양식 요소란 무엇인가요?

양식 요소는 시작 태그 <form>, 시작 태그에 정의된 선택적 속성, 종료 태그 </form>로 구성됩니다.

시작 태그와 종료 태그 사이에는 다양한 유형의 사용자 입력을 위한 <input> 및 <textarea>과 같은 양식 요소를 포함할 수 있습니다. 양식 요소에 대해서는 다음 모듈에서 자세히 알아봅니다.

데이터는 어디에서 처리되나요?

양식이 제출되면 (예: 사용자가 제출 버튼을 클릭할 때) 브라우저에서 요청을 합니다. 스크립트는 해당 요청에 응답하고 데이터를 처리할 수 있습니다.

기본적으로 요청은 양식이 표시되는 페이지로 전송됩니다.

https://web.dev에서 실행되는 스크립트로 양식 데이터를 처리한다고 가정해 보겠습니다. 어떻게 해야 할까요? CodePen에서 사용해 보세요.

      <form action="https://example.com/animals"></form>

위의 예시에서는 https://example.com/animals에 요청합니다. example.com 백엔드의 스크립트는 /animals 요청을 처리하고 양식의 데이터를 처리할 수 있습니다.

데이터는 어떻게 전송되나요?

기본적으로 양식 데이터는 제출된 데이터가 URL에 추가된 GET 요청으로 전송됩니다. 이전 예에서 사용자가 'frog'를 제출하면 브라우저가 다음 URL에 요청을 보냅니다.

https://example.com/animals?animal=frog

이 경우 URL에서 데이터를 가져와 프런트엔드 또는 백엔드에서 데이터에 액세스할 수 있습니다.

원하는 경우 메서드 속성을 변경하여 POST 요청을 사용하도록 양식에 지시할 수 있습니다.

<form method="post">
...
</form>

POST을 사용하면 데이터가 요청 본문에 포함됩니다.

데이터는 URL에 표시되지 않으며 프런트엔드 또는 백엔드 스크립트에서만 액세스할 수 있습니다.

어떤 방법을 사용해야 할까요?

두 방법 모두 사용 사례가 있습니다.

민감한 정보를 처리하는 양식의 경우 POST 메서드를 사용합니다. 데이터는 암호화되며 (HTTPS를 사용하는 경우) 요청을 처리하는 백엔드 스크립트만 액세스할 수 있습니다. 데이터가 URL에 표시되지 않습니다. 일반적인 예는 로그인 양식입니다.

데이터를 공유할 수 있는 경우 GET 메서드를 사용할 수 있습니다. 그런 다음 URL에 포함되어 있으므로 데이터가 브라우저 기록에 추가됩니다. 검색 양식에서 자주 사용됩니다. 이렇게 하면 검색 결과 페이지를 북마크할 수 있습니다.

이제 양식 요소 자체에 대해 알아봤으니 양식을 대화형으로 만들기 위한 양식 필드에 대해 알아볼 차례입니다.

이해도 확인

양식 요소에 대한 지식 테스트

리소스

<form> 요소