diff --git a/src/v2/guide/forms.md b/src/v2/guide/forms.md
index 31885e59e1..e9ce045aa4 100644
--- a/src/v2/guide/forms.md
+++ b/src/v2/guide/forms.md
@@ -1,28 +1,28 @@
---
-title: Form Input Bindings
+title: Liaisons sur les champs de formulaire
type: guide
order: 10
---
-## Basic Usage
+## Usage basique
-
**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**
You can use the `v-model` directive to create two-way data bindings on form input and textarea elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
+Vous pouvez utiliser la directive `v-model` pour créer une liaison de données bidirectionnelle sur les champs de formulaire (input, select ou textarea). Elle choisira automatiquement la bonne manière de mettre à jour l'élément en fonction du type de champ. Bien qu'un peu magique, `v-model` est essentiellement du sucre syntaxique pour mettre à jour les données lors des évènements de saisie utilisateur sur les champs, ainsi que quelques traitements spéciaux pour certains cas particuliers.
-
`v-model` doesn't care about the initial value provided to an input or a textarea. It will always treat the Vue instance data as the source of truth.
+
`v-model` ne prend pas en compte la valeur initiale (attribut "value") fournie pour un champ. Elle traitera toujours les données de l'instance de vue comme la source de vérité.
-
For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.
+
Pour les langues qui requièrent une [méthode de saisie (IME)](https://fr.wikipedia.org/wiki/M%C3%A9thode_d%27entr%C3%A9e) (chinois, japonais, coréen etc...), vous remarquerez que `v-model` ne sera pas mise à jour durant l'exécution de la méthode de saisie.
-### Text
+### Texte
``` html
-
-
Message is: {{ message }}
+
+
Le message est : {{ message }}
```
{% raw %}
-
-
Message is: {{ message }}
+
+
Le message est : {{ message }}
{% endraw %}
-### Multiline text
+### Texte multiligne
``` html
-Multiline message is:
+Le message multiligne est :
{{ message }}
-
+
```
{% raw %}
- Multiline message is:
+ Le message multiligne est :
{{ message }}
-
+
{% endraw %}
-Multiple checkboxes, bound to the same Array:
+Checkboxes multiples, liées au même tableau (Array) :
``` html
@@ -98,7 +98,7 @@ Multiple checkboxes, bound to the same Array:
-Checked names: {{ checkedNames }}
+Noms cochés : {{ checkedNames }}
```
``` js
@@ -119,7 +119,7 @@ new Vue({
- Checked names: {{ checkedNames }}
+ Noms cochés : {{ checkedNames }}
{% endraw %}
-Multiple select (bound to Array):
+Select à choix multiples (lié à un tableau) :
``` html
-Selected: {{ selected }}
+Sélectionné(s) : {{ selected }}
```
{% raw %}
{% endraw %}
-Dynamic options rendered with `v-for`:
+Options dynamiques générées avec `v-for` :
``` html
-Selected: {{ selected }}
+Sélectionné : {{ selected }}
```
``` js
new Vue({
@@ -241,9 +241,9 @@ new Vue({
data: {
selected: 'A',
options: [
- { text: 'One', value: 'A' },
- { text: 'Two', value: 'B' },
- { text: 'Three', value: 'C' }
+ { text: 'Un', value: 'A' },
+ { text: 'Deux', value: 'B' },
+ { text: 'Trois', value: 'C' }
]
}
})
@@ -255,7 +255,7 @@ new Vue({
{{ option.text }}
- Selected: {{ selected }}
+ Sélectionné : {{ selected }}
{% endraw %}
-## Value Bindings
+## Liaisons des attributs value
-For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkbox):
+Pour les boutons radio, les cases à cocher et les listes d'options, les valeurs de liaison de `v-model` sont habituellement des chaînes de caractères statiques (ou des booléens pour une case à cocher) :
``` html
-
+
-
+
-
+
```
-But sometimes we may want to bind the value to a dynamic property on the Vue instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values.
+Mais parfois nous pouvons souhaiter lier la valeur à une propriété dynamique de l'instance de Vue. Nous pouvons réaliser cela en utilisant `v-bind`. De plus, utiliser `v-bind` nous permet de lier la valeur de l'input à des valeurs qui ne sont pas des chaînes de caractères.
### Checkbox
@@ -303,9 +303,9 @@ But sometimes we may want to bind the value to a dynamic property on the Vue ins
```
``` js
-// when checked:
+// lorsque c'est coché :
vm.toggle === vm.a
-// when unchecked:
+// lorsque que c'est décoché :
vm.toggle === vm.b
```
@@ -316,59 +316,59 @@ vm.toggle === vm.b
```
``` js
-// when checked:
+// lorsque c'est choisi :
vm.pick === vm.a
```
-### Select Options
+### Options de select
``` html
```
``` js
-// when selected:
+// lorsque c'est sélectionné :
typeof vm.selected // -> 'object'
vm.selected.number // -> 123
```
-## Modifiers
+## Modificateurs
### `.lazy`
-By default, `v-model` syncs the input with the data after each `input` event (with the exception of IME composition as [stated above](#vmodel-ime-tip)). You can add the `lazy` modifier to instead sync after `change` events:
+Par défaut, `v-model` synchronise le champ avec les données après chaque évènement `input` (à l'exception de l'exécution d'une méthode de saisie comme [mentionné plus haut](#vmodel-ime-tip)). Vous pouvez ajouter le modificateur `lazy` pour synchroniser après les évènements `change` à la place :
``` html
-
+
```
### `.number`
-If you want user input to be automatically typecast as a number, you can add the `number` modifier to your `v-model` managed inputs:
+Si vous voulez que la saisie utilisateur soit automatiquement convertie en nombre, vous pouvez ajouter le modificateur `number` à vos champs gérés par `v-model` :
``` html
```
-This is often useful, because even with `type="number"`, the value of HTML input elements always returns a string.
+C'est souvent utile, parce que même avec `type="number"`, la valeur des éléments input HTML retourne toujours une chaîne de caractères.
### `.trim`
-If you want user input to be trimmed automatically, you can add the `trim` modifier to your `v-model` managed inputs:
+Si vous voulez que les espaces superflus des saisies utilisateur soient automatiquement retirés, vous pouvez ajouter le modificateur `trim` à vos champs gérés par `v-model` :
```html
```
-## `v-model` with Components
+## `v-model` avec les composants
-> If you're not yet familiar with Vue's components, just skip this for now.
+> Si vous n'êtes pas encore familier avec les composants de Vue, passez cette section pour le moment.
-HTML's built-in input types won't always meet your needs. Fortunately, Vue components allow you to build reusable inputs with completely customized behavior. These inputs even work with `v-model`! To learn more, read about [custom inputs](components.html#Form-Input-Components-using-Custom-Events) in the Components guide.
+Les types de champ standards HTML ne couvriront pas toujours vos besoins. Heureusement, les composants de Vue vous permettent de construire des champs avec un comportement complètement personnalisé. Ces champs fonctionnent même avec `v-model` ! Pour en apprendre plus, lisez la section ["champs personnalisés"](components.html#Form-Input-Components-using-Custom-Events) dans le guide des composants.