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 01af1f400..10d1b74e2 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 +# Metode dan properti form -Forms and control elements, such as `` have a lot of special properties and events. +Form dan elemen control, contohnya seperti `` memiliki banyak properti khusus dan event. -Working with forms will be much more convenient when we learn them. +Bekerja dengan form akan lebih mudah ketika kita mempelajarinya. -## Navigation: form and elements +## Navigasi: form dan elemen -Document forms are members of the special collection `document.forms`. +Form dokumen adalah anggota dari koleksi khusus `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. +Itu disebut _"named collection"_: itu keduanya memiliki nama(name) dan terurut(index). Kita bisa menggunakan keduanya baik dengan nama atau nomor pada dokumen untuk mendapatkan form . ```js no-beautify document.forms.my - the form with name="my" document.forms[0] - the first form in the document ``` -When we have a form, then any element is available in the named collection `form.elements`. +Ketika kita mempunyai sebuah form, maka elemen apapun tersedia di dalam _named collection/koleksi nama_ `form.elements`. -For instance: +Misalnya: ```html run height=40
@@ -26,19 +26,20 @@ For instance:
``` -There may be multiple elements with the same name, that's often the case with radio buttons. +Ada suatu saat dimana ada beberapa elemen dengan nama yang sama, hal itu sering terjadi dengan _radio buttons_. -In that case `form.elements[name]` is a collection, for instance: + +Dalam hal tersebut `form.elements[name]`adalah sebuah _collection/koleksi_, misalnya: ```html run height=40
@@ -57,13 +58,13 @@ alert(ageElems[0]); // [object HTMLInputElement] ``` -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`. +Navigasi properti ini tidak bergantung pada struktur tag. Semua elemen kontrol, tak peduli seberapa dalam mereka didalam form, mereka tersedia di dalam `form.elements`. -````smart header="Fieldsets as \"subforms\"" -A form may have one or many `
` elements inside it. They also have `elements` property that lists form controls inside them. +````smart header="Fieldsets sebagai "subforms"" +Sebuah form mungkin punya satu atau banyak elemen `
` didalamnya. Mereka juga punya `elements` properti yang mencatumkan form kontrol didalamnya. -For instance: +Misalnya: ```html run height=80 @@ -81,7 +82,7 @@ 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 + // kita bisa mendapatkan input dengan nama baik dari form maupun dari fieldset alert(fieldset.elements.login == form.elements.login); // true */!* @@ -89,14 +90,13 @@ For instance: ``` ```` -````warn header="Shorter notation: `form.name`" -There's a shorter notation: we can access the element as `form[index/name]`. +````warn header="Shorter notation: `form.name`" Ada notasi yang lebih ringkas: kita bisa akses/mendapatkan elemen dengan `form[index/name]`. -In other words, instead of `form.elements.login` we can write `form.login`. +Dengan kata lain, daripada menulisnya dengan `form.elements.login` kita bisa menulis `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). +Itu juga berkeja, tetapi disana ada sebuah kesalahan kecil: jika kita akses sebuah elemen, dan lalu mengubah `name`, maka elemen tersebut masih tersedia dengan nama lamanya (sama juga dengan nama barunya). -That's easy to see in an example: +Itu akan lebih mudah saat kita lihat pada sebuah contoh: ```html run height=40 @@ -104,34 +104,35 @@ That's easy to see in an example: ``` -That's usually not a problem, because we rarely change names of form elements. +Itu biasanya bukan sebuah masalah, karena kita jarang mengubah nama dari elemen form. ```` ## Backreference: element.form -For any element, the form is available as `element.form`. So a form references all elements, and elements reference the form. +Untuk elemen apapun, form tersedia sebagai `element.form`. Jadi sebuah form mereferensikan semua elemen, dan elemen referensi dari form. + -Here's the picture: +Ini gambarannya: ![](form-navigation.svg) -For instance: +Misalnya: ```html run height=40
@@ -140,55 +141,55 @@ For instance: ``` -## Form elements +## Element Form -Let's talk about form controls. +Mari bicara tentang kontrol form. -### input and textarea +### input dan textarea -We can access their value as `input.value` (string) or `input.checked` (boolean) for checkboxes. +Kita bisa akses nilai mereka dengan `input.value` (string) atau `input.checked` (boolean) untuk checkboxes. -Like this: +Seperti ini: ```js input.value = "New value"; textarea.value = "New text"; -input.checked = true; // for a checkbox or radio button +input.checked = true; // untuk checkbox atau radio button ``` ```warn header="Use `textarea.value`, not `textarea.innerHTML`" -Please note that even though `` holds its value as nested HTML, we should never use `textarea.innerHTML` to access it. +Harap dicatat, meskipun `` menyimpan nilainya sebagai HTML bersarang(nested), kita tidak boleh menggunakan `textarea.innerHTML` untuk mengaksesnya. -It stores only the HTML that was initially on the page, not the current value. +itu hanya menyimpan HTML yang mulanya ada di halaman, bukan nilai saat ini. ``` -### select and option +### select dan option -A `` mempunyai 3 properti penting: -1. `select.options` -- the collection of `