양식 요소에 관한 이 소개를 통해 웹에서 양식 사용에 관한 기본사항을 알아봅니다.
웹사이트에서 사용자에게 가장 좋아하는 동물에 대해 물어보고 싶다고 가정해 보겠습니다. 먼저 데이터를 수집할 방법이 필요합니다.
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에서 실행되는 스크립트가 필요하다면 어떻게 해야 할까요?
지금 사용해 보세요.
action 속성을 사용하여 스크립트의 위치를 선택할 수 있습니다.
<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><form> 요소의 종료 태그입니다.<form-container><form><form-element><form>가 처리되는 위치를 정의하는 데 사용할 수 있는 속성은 무엇인가요?
whereactionaction 속성은 <form>가 처리되는 위치를 정의합니다.hrefurl기본 요청 방법은 무엇인가요?
GETPOST