[번역] submit 이벤트와 메서드

Author: Violet-Bora-Lee

2-ui/4-forms-controls/4-forms-submit/article.md

@@ -1,64 +1,64 @@
-# Forms: event and method submit
+# submit 이벤트와 메서드
 
-The `submit` event triggers when the form is submitted, it is usually used to validate the form before sending it to the server or to abort the submission and process it in JavaScript.
+`submit` 이벤트는 폼을 제출할 때 트리거 되는데, 주로 폼을 서버로 전송하기 전에 내용을 검증하거나 폼 전송을 취소할 때 사용합니다.
 
-The method `form.submit()` allows to initiate form sending from JavaScript. We can use it to dynamically create and send our own forms to server.
+한편, `form.submit()` 메서드는 자바스크립트만으로 폼 전송을 하고자 할 때 사용합니다. `submit()`메서드는 동적으로 폼을 생성하고 서버에 보내고자 할 때 사용합니다.
 
-Let's see more details of them.
+개괄적인 설명은 여기서 마치고 이제 submit 이벤트와 메서드에 대해 자세히 살펴봅시다.
 
-## Event: submit
+## submit 이벤트
 
-There are two main ways to submit a form:
+폼을 전송하는 방법은 크게 두 가지가 있습니다.
 
-1. The first -- to click `<input type="submit">` or `<input type="image">`.
-2. The second -- press `key:Enter` on an input field.
+1. `<input type="submit">`이나 `<input type="image">` 클릭하기
+2. 인풋 필드에서 `key:Enter` 키 누르기
 
-Both actions lead to `submit` event on the form. The handler can check the data, and if there are errors, show them and call `event.preventDefault()`, then the form won't be sent to the server.
+두 방법 모두 폼의 `submit` 이벤트를 트리거합니다. 이벤트 핸들러에선 데이터를 체크하는데, 데이터에 에러가 있는 경우 에러를 출력한 다음 `event.preventDefault()`를 호출하곤 합니다. 이렇게 되면 폼은 서버에 전송되지 않습니다.
 
-In the form below:
-1. Go into the text field and press `key:Enter`.
-2. Click `<input type="submit">`.
+아래 폼에서 두 동작을 각각 수행해 보세요.
+1. 텍스트 필드로 이동해 `key:Enter` 키를 누릅니다.
+2. `<input type="submit">`을 클릭합니다.
 
-Both actions show `alert` and the form is not sent anywhere due to `return false`:
+참고로 두 동작 모두 `alert` 창을 보여주는데, `return false` 때문에 폼은 전송되지 않습니다.
 
 ```html autorun height=60 no-beautify
 <form onsubmit="alert('submit!');return false">
-  First: Enter in the input field <input type="text" value="text"><br>
-  Second: Click "submit": <input type="submit" value="Submit">
+  1. input 필드에 포커스를 준 다음 Enter 키 누르기: <input type="text" value="text"><br>
+  2. '제출' 버튼 누르기: <input type="submit" value="제출">
 </form>
 ```
 
-````smart header="Relation between `submit` and `click`"
-When a form is sent using `key:Enter` on an input field, a `click` event triggers on the `<input type="submit">`.
+````smart header="`submit`과 `click`의 관계"
+input 필드에서 `key:Enter` 키를 눌러 폼을 전송하면 `<input type="submit">`에 있는 `click` 이벤트가 트리거 됩니다.
 
-That's rather funny, because there was no click at all.
+클릭을 하지 않았는데도 `click` 이벤트가 트리거 되니까 좀 이상해 보이긴 하네요.
 
-Here's the demo:
+데모를 살펴봅시다.
 ```html autorun height=60
 <form onsubmit="return false">
- <input type="text" size="30" value="Focus here and press enter">
- <input type="submit" value="Submit" *!*onclick="alert('click')"*/!*>
+ <input type="text" size="30" value="여기에 포커스를 준 다음에 Enter 키 누르기">
+ <input type="submit" value="제출" *!*onclick="alert('클릭 이벤트가 트리거 되었습니다!')"*/!*>
 </form>
 ```
 
 ````
 
-## Method: submit
+## submit 메서드
 
-To submit a form to the server manually, we can call `form.submit()`.
+`form.submit()`을 호출하면 자바스크립트로 직접 폼을 서버에 전송할 수 있습니다.
 
-Then the `submit` event is not generated. It is assumed that if the programmer calls `form.submit()`, then the script already did all related processing.
+`form.submit()` 메서드가 호출된 다음엔 `submit` 이벤트는 생성되지 않습니다. 개발자가 `form.submit()`을 호출했다면 스크립트에서 이미 필요한 모든 조치를 했다고 가정하기 때문입니다.
 
-Sometimes that's used to manually create and send a form, like this:
+이런 submit 메서드의 특징은 다음과 같이 폼을 직접 만들고 전송하길 원할 때 응용할 수 있습니다.
 
 ```js run
 let form = document.createElement('form');
 form.action = 'https://google.com/search';
 form.method = 'GET';
 
-form.innerHTML = '<input name="q" value="test">';
+form.innerHTML = '<input name="q" value="테스트">';
 
-// the form must be in the document to submit it
+// 폼을 제출하려면 반드시 폼이 문서 안에 있어야 합니다.
 document.body.append(form);
 
 form.submit();