양식 소개를 통해 웹에서 양식을 사용하기 위한 기본사항을 알아보세요. 요소가 포함됩니다.
웹사이트에서 사용자에게 좋아하는 동물에 대해 질문하고 싶다면 첫 단계로 데이터를 수집할 방법이 필요합니다.
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