이전 모듈에서는 <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
요청이 전송됩니다.
양식 데이터에 어떻게 액세스하고 처리할 수 있나요?
제출된 데이터는 프런트엔드에서 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>
없이 사용자 데이터를 전송할 수 있나요?
<form>
을(를) 제출하려면 어떻게 해야 하나요?
<button>
를 클릭합니다.Enter
키를 누릅니다.<input type="image">
를 클릭합니다.