양식 요소 자세히 알아보기

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

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

항상 <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 요청이 이루어집니다.

양식 데이터에 액세스하고 처리하려면 어떻게 해야 하나요? 제출된 데이터는 프런트엔드의 JavaScript에서 GET 요청을 사용하여 처리하거나 백엔드의 코드에서 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"를 사용하지 않는 한 제출 버튼으로 작동합니다. <input type="submit" value="Submit">를 사용하는 방법도 있습니다.

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

마지막으로 타임아웃을 추가하지 마세요. 사용자가 원하는 만큼의 시간을 두고 양식을 제출하도록 합니다. 타임아웃은 데이터 손실을 유발하고 사용자에게 불편을 초래합니다. W3C 양식 제한 시간 가이드라인을 읽어보세요.

사용자가 파일을 제출할 수 있도록 지원

필요한 경우 <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 요청으로 파일을 전송할 수 없습니다.

이해도 확인

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

리소스

• 양식 HTML 요소
• 제출 버튼 권장사항