Translate Forms (#118)

Co-Authored-By: Veri Ferdiansyah <[email protected]>

Author: 2 people

content/docs/forms.md

@@ -1,6 +1,6 @@
 ---
 id: forms
-title: Forms
+title: Form
 permalink: docs/forms.html
 prev: lists-and-keys.html
 next: lifting-state-up.html
@@ -9,7 +9,7 @@ redirect_from:
   - "docs/forms-zh-CN.html"
 ---
 
-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
+Elemen form HTML bekerja sedikit berbeda dari elemen DOM lainnya di React, karena elemen form secara natural menyimpan beberapa _state_ internal. Sebagai contoh, form ini pada HTML biasa menerima nama tunggal:
 
 ```html
 <form>
@@ -21,15 +21,15 @@ HTML form elements work a little bit differently from other DOM elements in Reac
 </form>
 ```
 
-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
+Form ini memiliki perilaku dasar dari form HTML biasa yakni menuju ke laman baru ketika user mengirim form tersebut. Jika Anda menginginkan perilaku seperti ini di React, ini sebenarnya dapat bekerja. Namun di banyak kasus, akan lebih mudah untuk memiliki sebuah fungsi JavaScript yang menangani sebuah submisi dari sebuah form dan memiliki akses terhadap data yang dimasukkan pengguna ke dalam form. Cara standar untuk mencapai hal ini adalah dengan teknik yang disebut "_controlled component_".
 
-## Controlled Components {#controlled-components}
+## Controlled Component {#controlled-components}
 
-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
+Pada HTML, elemen form seperti `<input>`, `<textarea>`, dan `<select>` biasanya menyimpan _state_ mereka sendiri dan memperbaruinya berdasarkan masukan dari pengguna. Di React, _state_ yang dapat berubah seperti ini biasanya disimpan pada properti dari komponen, dan hanya akan diubah menggunakan [`setState()`](/docs/react-component.html#setstate).
 
-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
+Kita dapat menggabungkan keduanya dengan menggunakan _state_ pada React sebagai "sumber kebenaran satu-satunya". Kemudian komponen React yang me-_render_ sebuah form juga mengontrol apa yang terjadi dalam form tersebut pada masukan pengguna selanjutnya. Sebuah elemen masukan form yang nilainya dikontrol oleh React melalui cara seperti ini disebut sebagai "_controlled component_".
 
-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
+Sebagai contoh, jika kita ingin membuat form pada contoh sebelumnya mencatat sebuah nama ketika nama dikirim, kita dapat menuliskan form sebagai sebuah _controlled component_:
 
 ```javascript{4,10-12,24}
 class NameForm extends React.Component {
@@ -64,29 +64,29 @@ class NameForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
-Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
+Karena atribut `value` telah kita set pada elemen form, nilai yang ditampilkan akan selalu sama dengan `this.state.value`, yang menjadikan React sebagai sumber kebenaran tunggal dari _state_. Dan karena `handleChange` dijalankan setiap ketikan untuk memperbarui _state_ React, nilai yang ditampilkan akan terbarui ketika pengguna mengetik.
 
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
+Dengan sebuah _controlled component_, setiap perubahan _state_ akan memiliki sebuah fungsi _handler_ yang terkait. Hal ini memudahkan untuk memodifikasi atau memvalidasi masukan pengguna. Sebagai contoh, jika kita ingin mengharuskan nama untuk seluruhnya ditulis dengan huruf kapital, kita dapat menuliskan `handleChange` sebagai:
 
 ```javascript{2}
 handleChange(event) {
   this.setState({value: event.target.value.toUpperCase()});
 }
 ```
 
-## The textarea Tag {#the-textarea-tag}
+## Tag textarea {#the-textarea-tag}
 
-In HTML, a `<textarea>` element defines its text by its children:
+Pada HTML, elemen `<textarea>` mendefinisikan teks di dalamnya sebagai elemen anaknya:
 
 ```html
 <textarea>
   Hello there, this is some text in a text area
 </textarea>
 ```
 
-In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
+Di React, `<textarea>` menggunakan atribut `value`. Dengan cara ini, sebuah form yang menggunakan `<textarea>` dapat ditulis dengan cara yang sangat mirip dengan sebuah form yang menggunakan masukan satu baris:
 
 ```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
@@ -123,11 +123,11 @@ class EssayForm extends React.Component {
 }
 ```
 
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
+Perhatikan bahwa `this.state.value` diinisialisasi di constructor, sehingga area teks akan memiliki teks di dalamnya.
 
-## The select Tag {#the-select-tag}
+## Tag select {#the-select-tag}
 
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
+Pada HTML, `<select>` membuat sebuah daftar _drop-down_. Sebagai contoh, HTML ini membuat sebuah daftar _drop-down_ dari beberapa bumbu:
 
 ```html
 <select>
@@ -138,7 +138,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 </select>
 ```
 
-Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
+Perhatikan bahwa opsi Coconut mula-mula dipilih, karena adanya atribut `selected`. Di React, alih-alih menggunakan atribut `selected`, kita menggunakan atribut `value` di tag `select`. Hal ini lebih mudah dalam sebuah _controlled component_ karena Anda hanya perlu mengubahnya di satu tempat saja. Sebagai contoh:
 
 ```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
@@ -178,33 +178,33 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
-Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
+Secara keseluruhan, perubahan-perubahan ini membuat `<input type="text">`, `<textarea>`, dan `<select>` bekerja dengan cara yang mirip - mereka masing-masing menerima atribut `value` yang dapat Anda gunakan untuk mengimplementasikan _controlled component_.
 
-> Note
+> Catatan
 >
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
+> Anda bisa memasukan array ke atribut `value`, yang memungkinkan anda memilih beberapa opsi dalam tag `select`:
 >
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
 
-## The file input Tag {#the-file-input-tag}
+## Masukkan Tag File {#the-file-input-tag}
 
-In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
+Dalam HTML, sebuah `<input type="file">` membiarkan pengguna untuk memilih satu atau lebih berkas dari penyimpanan perangkat mereka untuk diunggah ke sebuah server atau dimanipulasi oleh JavaScript melalui [Berkas API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-Because its value is read-only, it is an **uncontrolled** component in React. It is discussed together with other uncontrolled components [later in the documentation](/docs/uncontrolled-components.html#the-file-input-tag).
+Karena nilai yang dimiliki adalah _read-only_, ini termasuk ke dalam _***uncontrolled*** component_ di React. Hal ini akan dibahas bersama dengan _uncontrolled component_ lainnya [selanjutnya di dokumentasi](/docs/uncontrolled-components.html#the-file-input-tag).
 
-## Handling Multiple Inputs {#handling-multiple-inputs}
+## Menangani Banyak Input {#handling-multiple-inputs}
 
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
+Ketika Anda membutuhkan penanganan banyak elemen `input` terkontrol, Anda dapat menambahkan atribut `name` pada setiap elemen dan membiarkan fungsi _handler_ memilih apa yang harus dilakukan berdasarkan nilai dari `event.target.name`.
 
-For example:
+Sebagai contoh:
 
 ```javascript{15,18,28,37}
 class Reservation extends React.Component {
@@ -254,31 +254,31 @@ class Reservation extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
 
-Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
+Perhatikan bagaimana kita meggunakan sintaks [_computed property name_](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) ES6 untuk mengubah _state_ dengan _key_ yang sesuai dengan nama dari masukan:
 
 ```js{2}
 this.setState({
   [name]: value
 });
 ```
 
-It is equivalent to this ES5 code:
+Kode diatas setara dengan kode ES5 berikut:
 
 ```js{2}
 var partialState = {};
 partialState[name] = value;
 this.setState(partialState);
 ```
 
-Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
+Dan juga, karena `setState()` secara otomatis [menggabungkan _state_ parsial ke _state_ yang sudah ada](/docs/state-and-lifecycle.html#state-updates-are-merged), kita hanya perlu memanggilnya dengan bagian yang berubah saja.
 
-## Controlled Input Null Value {#controlled-input-null-value}
+## Mengendalikan Masukkan Nilai Kosong {#controlled-input-null-value}
 
-Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`.
+Menentukan nilai _prop_ pada [controlled component](/docs/forms.html#controlled-components) mencegah pengguna mengubah masukan kecuali Anda menginginkannya. Jika Anda telah menetapkan nilai `value` namun masukan masih dapat diubah, Anda mungkin telah secara tidak sengaja menetapkan `value` ke `undefined` atau `null`.
 
-The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)
+Kode berikut menunjukkan contoh ini. (Mula-mula masukan terkunci tetapi menjadi dapat diubah setelah jeda singkat.)
 
 ```javascript
 ReactDOM.render(<input value="hi" />, mountNode);
@@ -289,10 +289,10 @@ setTimeout(function() {
 
 ```
 
-## Alternatives to Controlled Components {#alternatives-to-controlled-components}
+## Alternatif dari Controlled Components {#alternatives-to-controlled-components}
 
-It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
+Terkadang akan menjadi sulit untuk menggunakan _controlled components_, karena Anda perlu menulis _event handler_ untuk setiap cara data Anda berubah dan menyalurkan semua masukan _state_ melalui komponen React. Ini dapat menjadi sangat menjengkelkan ketika anda sedang mengkonversi basis kode yang sudah ada ke React, atau mengintegrasikan sebuah aplikasi React dengan sebuah _library_ bukan-React. Pada situasi seperti ini, Anda mungkin ingin menggunakan [uncontrolled components](/docs/uncontrolled-components.html), sebuah teknik alternatif untuk mengimplementasikan masukan form.
 
-## Fully-Fledged Solutions {#fully-fledged-solutions}
+## Solusi Selengkapnya {#fully-fledged-solutions}
 
-If you're looking for a complete solution including validation, keeping track of the visited fields, and handling form submission, [Formik](https://jaredpalmer.com/formik) is one of the popular choices. However, it is built on the same principles of controlled components and managing state — so don't neglect to learn them.
+Jika anda mencari solusi komplit termasuk validasi, melacak _fields_ yang dikunjungi, dan menangani pengiriman form, [Formik](https://jaredpalmer.com/formik) adalah salah satu pilihan populer. Namun, itu dibuat dengan prinsip yang sama dengan _controlled components_ dan pengelolaan _state_ — jadi jangan lalai untuk mempelajarinya.