Merge pull request #46 from arthurbergmz/guide/forms

docs: update guide/forms translation

Author: arthurbergmz

src/guide/forms.md

@@ -2,33 +2,33 @@
 
 ## Uso Básico
 
-Você pode usar a diretiva `v-model` para criar interligações de dados de mão dupla _(two-way data binding)_ em elementos input, textarea e select de formulários. Ele automaticamente escolhe a maneira correta de atualizar o elemento baseado no tipo do _input_. Embora um pouco mágico, `v-model` é essencialmente uma forma simplificada _(syntax sugar)_ para atualizar dados nos eventos de entrada do usuário, além de cuidado especial com casos extremos.
+Você pode usar a diretiva `v-model` para criar interligações de dados de mão dupla _(two-way data binding)_ em elementos _input_, _textarea_ e _select_ de formulários. Ela, automaticamente, escolhe a maneira correta de atualizar o elemento baseado no tipo do _input_. Embora um pouco mágica, `v-model` é, essencialmente, uma forma simplificada _(syntax sugar)_ para atualizar dados nos eventos de entrada do usuário, além de cuidado especial com casos extremos.
 
 ::: tip Nota
-`v-model` irá ignorar o estado inicial dos atributos `value`, `checked` ou `selected` encontrado em qualquer elemento de formulário. Ele sempre irá tratar os dados da instância ativa com a fonte de verdade. Você pode declarar o valor inicial no lado do JavasScript, dentro da opção `data` do seu componente.
+`v-model` irá ignorar o estado inicial dos atributos `value`, `checked` ou `selected` encontrado em qualquer elemento de formulário. Ela sempre irá tratar os dados da instância ativa como a fonte de informação _(source of truth)_. Você pode declarar o valor inicial no lado do JavasScript, dentro da opção `data` de seu componente.
 :::
 
-`v-model` utiliza diferentes propriedades internamente e emite diferentes eventos para diferentes elementos input:
+`v-model` utiliza diferentes propriedades internamente e emite diferentes eventos para diferentes elementos _input_:
 
 - elementos _text_ e _textarea_ usam a propriedade `value` e o evento `input`;
 - _checkboxes_ e _radiobuttons_ utilizam a propriedade `checked` e o evento `change`;
 - campos de seleção utilizam `value` como propriedade e `change` como um evento.
 
 <span id="vmodel-ime-tip"></span>
 ::: tip Nota
-Para idiomas que requerem um [IME](https://en.wikipedia.org/wiki/Input_method) (Chinês, Japonês, Koreano etc.), você notará que o `v-model` não é atualizado durante a composição IME. Se você também quiser atender a essas atualizações, use o evento do `input` ao invés do `v-model`.
+Você pode notar que `v-model` não é atualizada durante a composição através de um editor de método de entrada ([IME](https://en.wikipedia.org/wiki/Input_method)), como em Chinês, Japonês, Coreano, etc. Se você também quiser atender a essas atualizações, use diretamente o evento de `input` ao invés da `v-model`.
 :::
 
 ### Input
 
 ```html
-<input v-model="message" placeholder="me edite" />
+<input v-model="message" placeholder="Me edite" />
 <p>A mensagem é: {{ message }}</p>
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="eYNPEqj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com formulários: v-model simples">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="rNeqvjd" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com formulários: v-model simples">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/rNeqvjd">
-  Lidadndo com Fomulários: v-model simples</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Fomulários: v-model simples</a> Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
@@ -42,9 +42,9 @@ Para idiomas que requerem um [IME](https://en.wikipedia.org/wiki/Input_method) (
 <textarea v-model="message" placeholder="Escreva bastante"></textarea>
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="xxGyXaG" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: textarea">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="bGpmMqw" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: textarea">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/bGpmMqw">
-  Lidando com Formulários: textarea</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: textarea</a> Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
@@ -61,21 +61,21 @@ Interpolação em _textareas_ (`<textarea>{{text}}</textarea>`) não funcionará
 
 ### Checkbox
 
-Caixa de seleção única, valor booleano:
+Caixa de seleção única, valor do tipo _boolean_:
 
 ```html
 <input type="checkbox" id="checkbox" v-model="checked" />
 <label for="checkbox">{{ checked }}</label>
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="PoqyJVE" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: checkbox">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="KKzGRWq" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: checkbox">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/details/KKzGRWq">
-  Lidando com Formulários: checkbox</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: checkbox</a> Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
-Múltiplos _checkboxes_, associados ao mesmo Array:
+Múltiplos _checkboxes_, associados ao mesmo _array_:
 
 ```html
 <div id="v-model-multiple-checkboxes">
@@ -100,9 +100,9 @@ Vue.createApp({
 }).mount('#v-model-multiple-checkboxes')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="bGdmoyj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: multiplos checkboxes">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="ExKdLWp" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: múltiplos checkboxes">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/ExKdLWp">
-  Lidando com Formulários: múltiplos <i>checkboxes</i></a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: múltiplos <i>checkboxes</i></a> Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
@@ -111,10 +111,10 @@ Vue.createApp({
 
 ```html
 <div id="v-model-radiobutton">
-  <input type="radio" id="one" value="One" v-model="picked" />
+  <input type="radio" id="one" value="Primeiro" v-model="picked" />
   <label for="one">Um</label>
   <br />
-  <input type="radio" id="two" value="Two" v-model="picked" />
+  <input type="radio" id="two" value="Segundo" v-model="picked" />
   <label for="two">Dois</label>
   <br />
   <span>Escolhido: {{ picked }}</span>
@@ -131,9 +131,9 @@ Vue.createApp({
 }).mount('#v-model-radiobutton')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="MWwPEMM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: radiobutton">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="dyMgeRE" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: radiobutton">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/dyMgeRE">
-  Lidando com Formulários: radiobutton</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: radiobutton</a> Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
@@ -164,18 +164,18 @@ Vue.createApp({
 }).mount('#v-model-select')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="KKpGydL" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: select">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="VwaExpO" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: select">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/VwaExpO">
-  Lidando com Formulários: select</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: select</a> Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 :::tip Nota
-Se o valor inicial da expressão `v-model` não corresponder match nenhuma das optções, o element `<select>` será renderizado em um estado "não selecionado". No iOS, isso impedirá o usuário de selecionar o primeiro item, pois não há disparo do evento `change` neste caso. Portanto é recomendado fornecer uma opção desabilitada com um valor vazio, como demonstrado no exemplo acima.
+Se o valor inicial da expressão `v-model` não corresponder a nenhuma das opções, o elemento `<select>` será renderizado em um estado "não selecionado". No iOS, isso impedirá o usuário de selecionar o primeiro item, já que, neste caso, não há disparo do evento `change`. Portanto, é recomendado fornecer uma opção desabilitada com um valor vazio, como demonstrado no exemplo acima.
 :::
 
-Seleção de múltiplos itens (vinculando a um Array):
+Seleção de múltiplos itens (vinculando a um _array_):
 
 ```html
 <select v-model="selected" multiple>
@@ -187,9 +187,9 @@ Seleção de múltiplos itens (vinculando a um Array):
 <span>Selecionado: {{ selected }}</span>
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="gOpBXPz" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: seleção de múltiplos itens (vinculando a um Array)">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="vuejs-br" data-slug-hash="abNRGWR" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: seleção de múltiplos itens (vinculando a um Array)">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/abNRGWR">
-  Lidando com Formulários: seleção de múltiplos itens (vinculando a um Array)</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: seleção de múltiplos itens (vinculando a um array)</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
@@ -215,23 +215,23 @@ Vue.createApp({
       options: [
         { text: 'Um', value: 'A' },
         { text: 'Dois', value: 'B' },
-        { text: 'Três', value: 'C' },
+        { text: 'Três', value: 'C' }
       ]
     }
   }
 }).mount('#v-model-select-dynamic')
 ```
 
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="abORVZm" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: select com opções dinâmicas">
+<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="vuejs-br" data-slug-hash="BaKqxRK" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Lidando com Formulários: select com opções dinâmicas">
   <span>Veja o <i>Pen</i> <a href="https://codepen.io/vuejs-br/pen/BaKqxRK">
-  Lidando com Formulários: select com opções dinâmicas</a> por Vue (<a href="https://codepen.io/Vue">@Vue</a>)
+  Lidando com Formulários: select com opções dinâmicas</a> por Vue.js Brasil (<a href="https://codepen.io/vuejs-br">@vuejs-br</a>)
   no <a href="https://codepen.io">CodePen</a>.</span>
 </p>
 <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
 
 ## Interligação de Valores
 
-Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` são sempre _strings_ estáticas (ou valores _boolean_ no caso do _checkbox_):
+Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` são sempre _strings_ estáticas (ou valores do tipo _boolean_, em _checkboxes_):
 
 ```html
 <!-- `picked` é uma string "a" quando assinalado -->
@@ -246,7 +246,7 @@ Para _radio_, _checkbox_ e _select_, a interligação de valores do `v-model` s
 </select>
 ```
 
-Mas às vezes podemos querer vincular o valor à uma propriedade dinâmica na atual instância ativa. Nós podemos utilizar `v-bind` para alcançar isso. Além disso, utilizando `v-bind` nos permite vincular o valor de um _input_ para valores que não são uma _string_ _(non-string values)_.
+Porém, às vezes, podemos querer vincular o valor a uma propriedade dinâmica na atual instância ativa. Nós podemos utilizar `v-bind` para alcançar isso. Além disso, utilizando `v-bind` nos permite vincular o valor de um _input_ para valores que não são uma _string_ _(non-string values)_.
 
 ### Checkbox
 
@@ -295,7 +295,7 @@ vm.selected.number // => 123
 
 ### `.lazy`
 
-Por padrão, `v-model` sincroniza o elemento _input_ com os dados após cada evento `input` (exceto para o caso de composição IME [descrito anteriormente](#vmodel-ime-tip)). Você pode adicionar o modificador `lazy` para sincronizar depois do evento `change`:
+Por padrão, `v-model` sincroniza o elemento _input_ com os dados após cada evento `input` (exceto para o caso de composição _IME_, [como descrito anteriormente](#vmodel-ime-tip)). Você pode adicionar o modificador `lazy` para sincronizar depois do evento `change`:
 
 ```html
 <!-- sincronizado depois do "change" ao invés de "input" -->
@@ -322,6 +322,6 @@ Se você quiser que os espaços em branco excedentes de um _input_ sejam automat
 
 ## `v-model` com Componentes
 
-> Se você ainda não está familiarizado com os componentes Vue, pode pular isto por enquanto.
+> Se você ainda não está familiarizado com os componentes Vue, pode pular esta parte, por enquanto.
 
-Os tipos de _input_ nativos do HTML nem sempre atendem as suas necessidades. Felizmente, os componentes Vue te permitem construir _inputs_ reutilizáveis com comportamento completamente costumizável. Estes componentes também funcionam com `v-model`! Para saber mais, leia sobre [_inputs_ customizados](./component-basics.html#using-v-model-on-components) no guia de Componentes.
+Os tipos de _input_ nativos do HTML nem sempre atendem as suas necessidades. Felizmente, os componentes Vue te permitem construir _inputs_ reutilizáveis com comportamento completamente customizável. Estes componentes também funcionam com `v-model`! Para saber mais, leia sobre [_inputs_ customizados](./component-basics.html#using-v-model-on-components) no guia de Componentes.