[폼 프로퍼티와 메서드] 본문 번역

yourankim · Violet-Bora-Lee · commit 3b0be5132b09 · 2020-07-05T18:41:39.000+09:00
diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md
@@ -1,23 +1,23 @@
-# Form properties and methods
+# 폼 프로퍼티와 메서드 
 
-Forms and control elements, such as `<input>` have a lot of special properties and events.
+`<input>`과 같이 폼(form) 조작에 사용되는 요소에는 특별한 프로퍼티와 이벤트가 많습니다.
 
-Working with forms will be much more convenient when we learn them.
+이 프로퍼티와 이벤트들을 익히고 나면 폼을 다루기가 훨씬 편리해질 겁니다.
 
-## Navigation: form and elements
+## 폼과 요소 탐색하기
 
-Document forms are members of the special collection `document.forms`.
+폼은 특수한 컬렉션인 `document.forms`의 구성원입니다.
 
-That's a so-called "named collection": it's both named and ordered. We can use both the name or the number in the document to get the form.
+`document.forms`는 이름과 순서가 있는 '기명 컬렉션(named collection)'입니다. 개발자는 이 이름이나 순서를 사용해 문서 내의 폼에 접근할 수 있습니다.
 
 ```js no-beautify
-document.forms.my - the form with name="my"
-document.forms[0] - the first form in the document
+document.forms.my - 이름이 'my'인 폼
+document.forms[0] - 문서 내의 첫 번째 폼
 ```
 
-When we have a form, then any element is available in the named collection `form.elements`.
+이름이나 순서를 사용해 원하는 폼을 가져온 다음에는 기명 컬렉션 `form.elements`를 사용해 폼의 요소를 얻을 수 있습니다.
 
-For instance:
+예시:
 
 ```html run height=40
 <form name="my">
@@ -26,19 +26,19 @@ For instance:
 </form>
 
 <script>
-  // get the form
-  let form = document.forms.my; // <form name="my"> element
+  // 폼 얻기
+  let form = document.forms.my; // <form name="my"> 요소
 
-  // get the element
-  let elem = form.elements.one; // <input name="one"> element
+  // 요소 얻기
+  let elem = form.elements.one; // <input name="one"> 요소
 
   alert(elem.value); // 1
 </script>
 ```
 
-There may be multiple elements with the same name, that's often the case with radio buttons.
+그런데 개발을 하다 보면 이름이 같은 요소 여러 개를 다뤄야 하는 경우가 생기기도 합니다. 라디오 버튼을 다룰 때 이런 상황이 자주 발생하죠.
 
-In that case `form.elements[name]` is a collection, for instance:
+이때 `form.elements[name]`은 컬렉션이 된다는 사실을 이용할 수 있습니다. 예시를 살펴봅시다.
 
 ```html run height=40
 <form>
@@ -57,13 +57,13 @@ alert(ageElems[0]); // [object HTMLInputElement]
 </script>
 ```
 
-These navigation properties do not depend on the tag structure. All control elements, no matter how deep they are in the form, are available in `form.elements`.
+폼 요소 탐색에 쓰이는 프로퍼티는 태그 구조에 의존하지 않습니다. 폼을 조작하는 데 쓰이는 요소들은 모두 태그 깊이에 상관없이 `form.elements`을 사용해 접근할 수 있습니다.
 
 
-````smart header="Fieldsets as \"subforms\""
-A form may have one or many `<fieldset>` elements inside it. They also have `elements` property that lists form controls inside them.
+````smart header="\'하위 폼\'처럼 쓰이는 fieldset"
+폼은 하나 이상의 `<fieldset>` 요소를 포함할 수 있습니다. 폼 내부에 있는 fieldset도 폼과 마찬가지로 자신의 내부에 있는 폼 조작 요소에 접근할 수 있도록 해주는 `elements` 프로퍼티를 지원합니다.
 
-For instance:
+예시:
 
 ```html run height=80
 <body>
@@ -81,57 +81,57 @@ For instance:
     let fieldset = form.elements.userFields;
     alert(fieldset); // HTMLFieldSetElement
 
-    // we can get the input by name both from the form and from the fieldset
+    // 이름을 사용해 form과 fieldset 모두에서 input을 구할 수 있습니다.
     alert(fieldset.elements.login == form.elements.login); // true
 */!*
   </script>
 </body>
 ```
 ````
 
-````warn header="Shorter notation: `form.name`"
-There's a shorter notation: we can access the element as `form[index/name]`.
+````warn header="짧은 표기법: `form.name`"
+짧은 표기법인 `form[index/name]`으로도 요소에 접근할 수 있습니다.
 
-In other words, instead of `form.elements.login` we can write `form.login`.
+`form.elements.login` 대신 `form.login`처럼 쓸 수 있죠.
 
-That also works, but there's a minor issue: if we access an element, and then change its `name`, then it is still available under the old name (as well as under the new one).
+`form.name`을 사용한 표기법은 잘 작동하긴 하지만 요소에 접근해 `name` 속성을 변경해도 변경 전 이름을 계속 사용할 수 있다는 문제가 있습니다(물론 새로운 이름도 사용할 수 있습니다).
 
-That's easy to see in an example:
+예시를 통해 확인해 봅시다.
 
 ```html run height=40
 <form id="form">
   <input name="login">
 </form>
 
 <script>
-  alert(form.elements.login == form.login); // true, the same <input>
+  alert(form.elements.login == form.login); // true, 동일한 <input>입니다.
 
-  form.login.name = "username"; // change the name of the input
+  form.login.name = "username"; //  input의 name 속성을 변경합니다.
 
-  // form.elements updated the name:
+  // form.elements에는 name 속성 변경이 반영되었습니다.
   alert(form.elements.login); // undefined
   alert(form.elements.username); // input
 
 *!*
-  // form allows both names: the new one and the old one
+  // form은 새로운 이름과 이전 이름을 모두 인식합니다.
   alert(form.username == form.login); // true
 */!*
 </script>
 ```
 
-That's usually not a problem, because we rarely change names of form elements.
+그런데 폼 요소의 이름을 변경하는 일은 드물기 때문에 보통은 이런 특징이 문제가 되지 않습니다.
 
 ````
 
-## Backreference: element.form
+## element.form으로 역참조 하기
 
-For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form.
+모든 요소는 `element.form`으로 폼에 접근할 수 있습니다. 폼이 내부에 있는 요소 모두를 참조할 수 있듯이 각 요소 또한 역으로 폼을 참조할 수 있죠.
 
-Here's the picture:
+그림으로 나타내면 다음과 같습니다.
 
 ![](form-navigation.svg)
 
-For instance:
+예시:
 
 ```html run height=40
 <form id="form">
@@ -140,55 +140,55 @@ For instance:
 
 <script>
 *!*
-  // form -> element
+  // 폼 -> 요소
   let login = form.login;
 
-  // element -> form
+  // 요소 -> 폼
   alert(login.form); // HTMLFormElement
 */!*
 </script>
 ```
 
-## Form elements
+## 폼 요소
 
-Let's talk about form controls.
+이제 폼 조작에 사용되는 요소들에 대해 살펴봅시다.
 
-### input and textarea
+### input과 textarea
 
-We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes.
+input과 textarea 요소의 값은 `input.value` (string) 또는 `input.checked`(boolean)을 사용해 얻을 수 있습니다.
 
-Like this:
+이렇게 말이죠.
 
 ```js
 input.value = "New value";
 textarea.value = "New text";
 
-input.checked = true; // for a checkbox or radio button
+input.checked = true; // 체크박스나 라디오 버튼에서 쓸 수 있습니다.
 ```
 
-```warn header="Use `textarea.value`, not `textarea.innerHTML`"
-Please note that even though `<textarea>...</textarea>` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it.
+```warn header="`textarea.innerHTML` 말고 `textarea.value`를 사용하세요."
+`<textarea>...</textarea>`안의 값이 HTML이더라도 값을 얻을 때  `textarea.innerHTML`을 사용하지 말아야 합니다.
 
-It stores only the HTML that was initially on the page, not the current value.
+`textarea.innerHTML`엔 페이지를 처음 열 당시의 HTML만 저장되어 최신 값을 구할 수 없기 때문입니다.
 ```
 
-### select and option
+### select와 option
 
-A `<select>` element has 3 important properties:
+`<select>` 요소에는 세 가지 중요 프로퍼티가 있습니다.
 
-1. `select.options` -- the collection of `<option>` subelements,
-2. `select.value` -- the value of the currently selected `<option>`,
-3. `select.selectedIndex` -- the number of the currently selected `<option>`.
+1. `select.options` -- `<option>` 하위 요소를 담고 있는 컬렉션
+2. `select.value` -- 현재 선택된 `<option>` 값
+3. `select.selectedIndex` -- 현재 선택된 `<option>`의 번호(인덱스)
 
-They provide three different ways of setting a value for a `<select>`:
+이 세 프로퍼티를 응용하면 아래와 같은 세 가지 방법으로 `<select>`의 값을 설정할 수 있습니다.
 
-1. Find the corresponding `<option>` element and set `option.selected` to `true`.
-2. Set `select.value` to the value.
-3. Set `select.selectedIndex` to the number of the option.
+1. 조건에 맞는 `<option>` 하위 요소를 찾아 `option.selected`속성을 `true`로 설정합니다.
+2. `select.value`를 원하는 값으로 설정합니다.
+3. `select.selectedIndex`를 원하는 option 번호로 설정합니다.
 
-The first way is the most obvious, but `(2)` and `(3)` are usually more convenient.
+세 방법 중 첫 번째 방법이 가장 확실하지만 두 번째나 세 번째 방법이 대체로 더 편리합니다.
 
-Here is an example:
+예시:
 
 ```html run
 <select id="select">
@@ -198,16 +198,16 @@ Here is an example:
 </select>
 
 <script>
-  // all three lines do the same thing
+  // 세 가지 코드의 실행 결과는 모두 같습니다.
   select.options[2].selected = true;
   select.selectedIndex = 2;
   select.value = 'banana';
 </script>
 ```
 
-Unlike most other controls, `<select>` allows to select multiple options at once if it has `multiple` attribute. That's feature is rarely used. In that case we need to use the first way: add/remove the `selected` property from `<option>` subelements.
+대부분의 다른 폼 조작 요소와 달리 `<select>`는 `multiple` 속성이 있는 경우 option을 다중 선택할 수 있습니다. `multiple` 속성을 쓰는 경우는 아주 드물지만, 쓰게 되다면 첫 번째 방법을 사용해 `<option>` 하위 요소에 있는 `selected` 프로퍼티를 추가·제거해야 합니다. 
 
-We can get their collection as `select.options`, for instance:
+선택된 여러 개의 option이 담긴 컬렉션은 다음 예시처럼 `select.options`를 사용해 얻을 수 있습니다. 
 
 ```html run
 <select id="select" *!*multiple*/!*>
@@ -217,7 +217,7 @@ We can get their collection as `select.options`, for instance:
 </select>
 
 <script>
-  // get all selected values from multi-select
+  // 선택한 값 전체
   let selected = Array.from(select.options)
     .filter(option => option.selected)
     .map(option => option.value);
@@ -226,72 +226,72 @@ We can get their collection as `select.options`, for instance:
 </script>
 ```
 
-The full specification of the `<select>` element is available in the specification <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
+`<select>` 요소에 대한 명세는 아래 링크에서 볼 수 있습니다 <https://html.spec.whatwg.org/multipage/forms.html#the-select-element>.
 
-### new Option
+### Option 생성자
 
-This is rarely used on its own. But there's still an interesting thing.
+Option 생성자는 잘 사용되지는 않지만 흥미로운 점이 있습니다.
 
-In the [specification](https://html.spec.whatwg.org/multipage/forms.html#the-option-element) there's a nice short syntax to create `<option>` elements:
+[명세서](https://html.spec.whatwg.org/multipage/forms.html#the-option-element)를 보면 `<option>` 요소를 생성하는 간단하고 멋진 문법을 찾을 수 있죠.
 
 ```js
 option = new Option(text, value, defaultSelected, selected);
 ```
 
-Parameters:
+매개변수:
 
-- `text` -- the text inside the option,
-- `value` -- the option value,
-- `defaultSelected` -- if `true`, then `selected` HTML-attribute is created,
-- `selected` -- if `true`, then the option is selected.
+- `text` -- option 내부의 텍스트
+- `value` -- option의 값
+- `defaultSelected` -- `true`이면 HTML 속성 `selected`가 생성됨
+- `selected` -- `true`이면 해당 option이 선택됨
 
-There may be a small confusion about `defaultSelected` and `selected`. That's simple: `defaultSelected` sets HTML-attribute, that we can get using `option.getAttribute('selected')`. And `selected` - whether the option is selected or not, that's more important. Usually both values are either set to `true` or not set (same as `false`).
+`defaultSelected`와 `selected`의 차이가 무엇인지 헷갈릴 수 있습니다. `defaultSelected`는 `option.getAttribute('selected')`를 사용해 얻을 수 있는 HTML 속성을 설정해 줍니다. 반면 `selected` 는 option의 선택 여부를 결정합니다. 그렇기 때문에 당연히 `selected`가 더 중요한 매개변수이죠. Option 생성자를 사용할 때는 대개 두 매개변수 모두를 `true`나 `false`로 설정합니다.
 
-For instance:
+예시:
 
 ```js
 let option = new Option("Text", "value");
-// creates <option value="value">Text</option>
+// <option value="value">Text</option> 가 생성됩니다.
 ```
 
-The same element selected:
+이번엔 같은 요소를 선택된 상태로 생성합니다.
 
 ```js
 let option = new Option("Text", "value", true, true);
 ```
 
-Option elements have properties:
+Option을 사용해 만든 요소에는 다음과 같은 프로퍼티가 있습니다.
 
 `option.selected`
-: Is the option selected.
+: option의 선택 여부
 
 `option.index`
-: The number of the option among the others in its `<select>`.
+: option 중 몇 번째인지를 나타내는 번호
 
 `option.text`
-: Text content of the option (seen by the visitor).
+: 사용자가 보게 될 텍스트
 
-## References
+## 참고 자료
 
-- Specification: <https://html.spec.whatwg.org/multipage/forms.html>.
+- 명세서: <https://html.spec.whatwg.org/multipage/forms.html>.
 
-## Summary
+## 요약
 
-Form navigation:
+폼 탐색하기
 
 `document.forms`
-: A form is available as `document.forms[name/index]`.
+: `document.forms[name/index]`로 폼에 접근할 수 있습니다.
 
 `form.elements`  
-: Form elements are available as `form.elements[name/index]`, or can use just `form[name/index]`. The `elements` property also works for `<fieldset>`.
+: 폼 요소는 `form.elements[name/index]` 또는 `form[name/index]`로 접근합니다. `elements` 프로퍼티는 `<fieldset>`에도 똑같이 작동합니다.
 
 `element.form`
-: Elements reference their form in the `form` property.
+: 요소는 `form` 프로퍼티에서 자신이 속한 폼을 참조합니다.
 
-Value is available as `input.value`, `textarea.value`, `select.value` etc, or `input.checked` for checkboxes and radio buttons.
+각 요소의 값은 `input.value`, `textarea.value`, `select.value` 등으로 접근할 수 있습니다. 체크박스와 라디오 버튼에서는 `input.checked`를 사용할 수 있습니다.
 
-For `<select>` we can also get the value by the index `select.selectedIndex` or through the options collection `select.options`.
+`<select>`에서는 인덱스 `select.selectedIndex`나 option 컬렉션 `select.options`을 통해 값을 구할 수도 있습니다.
 
-These are the basics to start working with forms. We'll meet many examples further in the tutorial.
+지금까지는 폼을 다루기 위한 기초적인 내용이었습니다. 이 튜토리얼에서 앞으로 더 많은 예시를 만날 것입니다.
 
-In the next chapter we'll cover `focus` and `blur` events that may occur on any element, but are mostly handled on forms.
+다음 챕터에서는 어느 요소에서든 발생할 수 있지만 대부분 폼에서 처리되는 `focus`와 `blur` 이벤트를 다루겠습니다. 
