diff --git a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md index 35fef2a518..d07d07579a 100644 --- a/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md +++ b/2-ui/4-forms-controls/1-form-elements/1-add-select-option/solution.md @@ -1,4 +1,4 @@ -The solution, step by step: +解决方案：逐步解决 ```html run `: +下面是一个 ` @@ -13,8 +13,8 @@ There's a ` ``` -Use JavaScript to: +使用 JavaScript 来实现以下效果： -1. Show the value and the text of the selected option. -2. Add an option: ``. -3. Make it selected. +1. 显示所选选项的值和文本。 +2. 增加一个选项：``。 +3. 使之变为可选的。 diff --git a/2-ui/4-forms-controls/1-form-elements/article.md b/2-ui/4-forms-controls/1-form-elements/article.md index 1a4009bcaa..5a7fd08363 100644 --- 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 `` have a lot of special properties and events. +表单以及例如 `` 的控制元素有大量特殊的属性和事件。 -Working with forms can be much more convenient if we know them. +如果我们知道这些，那么处理表单可以变得更加简单。 -## Navigation: form and elements +## 导航：表单和元素 -Document forms are members of the special collection `document.forms`. +文档中的表单是一个特殊集合 `document.forms` 中的成员。 -That's a *named* collection: we can use both the name and the number to get the form. +`document.forms` 是一个**命名**集合：我们既可以使用名字也可以使用索引来获取表单。 ```js no-beautify -document.forms.my - the form with name="my" -document.forms[0] - the first form in the document +document.forms.my - 包含了 name="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 ``` -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

@@ -51,17 +51,16 @@ let form = document.forms[0]; let ageElems = form.elements.age; -alert(ageElems[0].value); // 10, the first input value +alert(ageElems[0].value); // 10，第一个单选按钮的 value 值 ``` -These navigation properties do not depend on the tag structure. All elements, no matter how deep they are in the form, are available in `form.elements`. +这些导航属性并不依赖于标签的结构。所有的元素，无论它们在表单中嵌套的有多么深，都可以通过 `form.elements` 获取到。 +````smart header="Fieldsets 来作为 \"subforms\"" +一个表单会包含一个或者多个 `

` 元素。它们也支持 `elements` 属性。 -````smart header="Fieldsets as \"subforms\"" -A form may have one or many `

` elements inside it. They also support the `elements` property. - -For instance: +比如说： ```html run height=80 @@ -79,7 +78,7 @@ For instance: let fieldset = form.elements.userFields; alert(fieldset); // HTMLFieldSetElement - // we can get the input both from the form and from the fieldset + // 我们可以从 form 或者 fieldset 中获取输入 alert(fieldset.elements.login == form.elements.login); // true */!* @@ -87,14 +86,14 @@ For instance: ``` ```` -````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]` 来访问元素。 -Instead of `form.elements.login` we can write `form.login`. +使用这种表示方式我们可以写 `form.login` 而不是 `form.elements.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). +这也有效，但是会有一个小问题：如果我们访问一个元素，然后修改它的 `name`，它仍然可以通过旧的 name 访问到（当然也能通过新的 name 访问）。 -That's easy to see in an example: +我们可以很容易在一个例子中看到这个情况： ```html run height=40 @@ -103,34 +102,34 @@ That's easy to see in an example: ``` -That's usually not a problem, because we rarely change names of form elements. +这通常来说并不是一个问题，因为我们很少修改表单元素的 name。 ```` -## 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.png) -For instance: +比如说： ```html run height=40 @@ -148,44 +147,44 @@ For instance: ``` -## Form elements +## 表单元素 -Let's talk about form controls, pay attention to their specific features. +让我们来谈谈表单控件，主要关注于它们具体的特性。 -### input and textarea +### input 和 textarea -Normally, we can access the value as `input.value` or `input.checked` for checkboxes. +通常来说，我们可以使用 `input.value` 或者 `input.checked` 来访问复选框的值。 -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 we should never use `textarea.innerHTML`: it stores only the HTML that was initially on the page, not the current value. +```warn header="使用 `textarea.value` 而不是 `textarea.innerHTML`" +请注意我们永远不应该使用 `textarea.innerHTML`：它只储存了最初在页面上的 HTML 内容，而不是当前的。 ``` -### select and option +### select 和 option -A `` 元素有 3 个重要的属性： -1. `select.options` -- the collection of `