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

양식 소개를 통해 웹에서 양식을 사용하기 위한 기본사항을 알아보세요. 요소가 포함됩니다.

웹사이트에서 사용자에게 좋아하는 동물에 대해 질문하고 싶다면 첫 단계로 데이터를 수집할 방법이 필요합니다.

HTML에서는 어떻게 하면 되나요?

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에서 스크립트를 실행한다고 가정해 보겠습니다. 어떻게 해야 할까요? 사용해 보기

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

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

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

기본적으로 양식 데이터는 GET 요청으로 전송됩니다. 제출한 데이터를 URL에 추가합니다. 사용자가 '개구리'를 제출하는 경우 위의 예에서 브라우저는 다음 URL로 요청합니다.

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

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

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

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

POST를 사용하면 데이터가 요청 본문입니다.

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

어떤 방법을 사용해야 하나요?

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

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

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

양식 요소 자체에 대해 배웠으므로 이제 양식 필드를 사용하여 양방향 양식을 만듭니다.

이해도 확인

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

리소스

<form> 요소