양식 요소

이전 모듈에서는 <form> 요소를 사용하는 방법을 알아봤습니다. 이 모듈에서는 양식의 작동 원리와 사용 시점을 알아봅니다.

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

브라우저 지원

  • Chrome: 1. <ph type="x-smartling-placeholder">
  • Edge: 12. <ph type="x-smartling-placeholder">
  • Firefox: 1. <ph type="x-smartling-placeholder">
  • Safari: 1. <ph type="x-smartling-placeholder">

소스

양식 컨트롤을 <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> 속성을 확인합니다. 데이터는 GET로 전송됩니다. 또는 method 속성에 따라 POST 요청을 처리합니다. method 속성이 없으면 현재 페이지의 URL에 GET 요청이 이루어집니다.

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

양식이 제출되면 브라우저가 action 속성의 값인 URL에 요청합니다. 또한 브라우저는 제출 버튼에 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> 없이 사용자 데이터를 전송할 수 있나요?

아니요
다시 시도해 보세요.
예, JavaScript를 사용할 수 있습니다.
🎉
예, 플래시에서 지원됩니다.
다시 시도해 보세요.
예, HTML5를 사용합니다.
다시 시도해 보세요.

<form>은 어떻게 제출할 수 있나요?

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

리소스