양식 요소

이전 모듈에서는 <form> 요소를 사용하는 방법을 알아봤습니다. 이 모듈에서는 양식의 작동 방식과 양식이 사용되는 경우를 알아봅니다.

<form> 요소를 사용해야 하나요?

브라우저 지원

  • 1
  • 12
  • 1
  • 1

소스

양식 컨트롤을 항상 <form> 요소에 배치할 필요는 없습니다. 예를 들어 사용자가 제품 카테고리를 선택할 수 있도록 <select> 요소를 제공할 수 있습니다. 백엔드에서 데이터를 저장하거나 처리하지 않으므로 여기에서는 <form> 요소가 필요하지 않습니다.

그러나 사용자의 데이터를 저장하거나 처리할 때 대부분의 경우 <form> 요소를 사용해야 합니다. 이 모듈에서 알아볼 것처럼 <form>를 사용하면 직접 빌드해야 하는 브라우저의 기본 제공 기능을 많이 얻을 수 있습니다. <form>에는 기본적으로 내장된 여러 접근성 기능도 있습니다. 사용자가 양식을 제출할 때 페이지가 새로고침되지 않도록 하려면 <form> 요소를 계속 사용하되 JavaScript로 개선합니다.

<form>의 작동 방식

<form>가 사용자 데이터를 처리하는 가장 좋은 방법이라는 것을 배웠습니다. 이제 양식이 어떻게 작동하는지 궁금할 수 있습니다.

<form>는 대화형 양식 컨트롤의 컨테이너입니다.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

양식 제출은 어떻게 이루어지나요?

<form>를 제출하면 브라우저는 <form> 속성을 확인합니다. 데이터는 method 속성에 따라 GET 또는 POST 요청으로 전송됩니다. method 속성이 없으면 현재 페이지의 URL에 GET 요청이 전송됩니다.

양식 데이터에 어떻게 액세스하고 처리할 수 있나요? 제출된 데이터는 프런트엔드에서 GET 요청을 사용하여 JavaScript로 처리하거나 GET 또는 POST 요청을 사용하여 백엔드의 코드로 처리할 수 있습니다. 요청 유형 및 양식 데이터 전송에 대해 자세히 알아보세요.

양식이 제출되면 브라우저에서 action 속성의 값인 URL에 요청합니다. 또한 브라우저는 Submit 버튼에 formaction 속성이 있는지 확인합니다. 이 경우 정의된 URL이 사용됩니다.

또한 브라우저는 <form> 요소에서 추가 속성을 조회합니다. 예를 들어 양식을 검증해야 하는지 (novalidate), 자동 완성을 사용해야 하는지 (autocomplete="off"), 어떤 인코딩을 사용해야 하는지 (accept-charset) 결정합니다.

사용자가 자신이 좋아하는 색을 제출할 수 있는 양식을 만들어 보세요. 데이터는 POST 요청으로 전송되어야 하며 데이터가 처리될 URL은 /color여야 합니다.

양식 표시

한 가지 가능한 해결 방법은 다음 양식을 사용하는 것입니다.

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

사용자가 양식을 제출할 수 있도록 허용하기

양식을 제출하는 방법에는 두 가지가 있습니다. 제출 버튼을 클릭하거나 양식 컨트롤을 사용하는 동안 Enter 키를 누르면 됩니다.

다양한 방법으로 제출 버튼을 추가할 수 있습니다. 한 가지 옵션은 양식 내에서 <button> 요소를 사용하는 것입니다. type="button"를 사용하지 않는 한 Submit 버튼으로 작동합니다. 또 다른 옵션은 <input type="submit" value="Submit">를 사용하는 것입니다.

세 번째 옵션은 <input type="image" alt="Submit" src="submit.png">를 사용하여 그래픽 Submit 버튼을 만드는 것입니다. 하지만 이제 CSS로 그래픽 버튼을 만들 수 있으므로 type="image"를 사용하지 않는 것이 좋습니다.

사용자가 파일을 제출할 수 있도록 설정

<input type="file">를 사용하여 필요한 경우 사용자가 파일을 업로드하고 제출할 수 있게 합니다.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

먼저 type="file"가 있는 <input> 요소를 양식에 추가합니다. 사용자가 여러 파일을 업로드할 수 있어야 하는 경우 multiple 속성을 추가합니다.

사용자가 파일을 업로드할 수 있으려면 한 가지를 더 변경해야 합니다. 양식에서 enctype 속성을 설정하세요. 기본값은 application/x-www-form-urlencoded입니다.

<form method="post" enctype="multipart/form-data">
…
</form>

파일이 제출될 수 있도록 파일을 multipart/form-data로 변경하세요. 이 인코딩이 없으면 POST 요청과 함께 파일을 전송할 수 없습니다.

이해도 테스트

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

파일을 제출하려면 enctype의 어떤 값이 필요한가요?

multipart/form-data
🎉
multipart/form-files
다시 시도해 보세요.
form-data
다시 시도해 보세요.
form-files
다시 시도해 보세요.

<form> 없이 사용자 데이터를 전송할 수 있나요?

아니요
다시 시도해 보세요.
예, 자바스크립트를 사용합니다.
🎉
예, 플래시를 사용합니다.
다시 시도해 보세요.
예, HTML5를 사용합니다.
다시 시도해 보세요.

<form>을(를) 제출하려면 어떻게 해야 하나요?

<button>를 클릭합니다.
다시 시도해 보세요.
Enter 키를 누릅니다.
다시 시도해 보세요.
<input type="image">를 클릭합니다.
다시 시도해 보세요.
위 항목 모두
🎉

자료