1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: Zone de saisie
slug: Web/Apps/Design/Building_Blocks/zone_saisie
translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Input_area
---
<p><span id="result_box" lang="fr"><span class="hps">Une zone</span> <span class="hps">de saisie est un</span> <span class="hps">champ d'entrée de</span> <span class="hps">données</span><span>.</span> <span class="hps">Il peut y avoir beaucoup de</span> <span class="hps">variations sur</span> <span class="hps">ce à quoi une zone de saisie</span><span class="hps"> peut</span> <span class="hps">ressembler</span><span>, elles peuvent être</span> <span class="hps atn">aussi simple que d'</span><span>un champ</span> <span class="hps">de saisie de texte</span><span>,</span> <span class="hps">et</span> <span class="hps">aussi complexe qu'un</span> <span class="hps">champ de saisie</span> <span class="hps atn">multi-</span><span>partie</span> <span class="hps">avec</span> <span class="hps">une entrée de texte</span><span>, des sélecteurs de</span> <span class="hps">valeur</span> <span class="hps">et des boutons</span><span>.</span> <span class="hps">Consultez le <a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Guide</a></span><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding"> <span class="hps">de codage</span></a> <span class="hps">pour les détails sur</span> <span class="hps">la mise en œuvre</span> <span class="hps">des zones</span> <span class="hps">de saisie.</span></span></p>
<h2 id="Caractéristiques">Caractéristiques</h2>
<p><strong>Détails à venir.</strong></p>
<h2 id="Captures_d'écrans">Captures d'écrans</h2>
<p><span id="result_box" lang="fr"><span class="hps">Ici vous pouvez voir</span> <span class="hps">une</span> <span class="hps">variété de</span> <span class="hps">zones de saisie</span><span>, qui suggère différentes utilisations possibles.</span></span></p>
<h3 id="Entrées_génériques">Entrées génériques</h3>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps">Ce sont</span> <span class="hps">de simples boîtes</span> <span class="hps">de saisie de texte</span><span>.</span></span></p>
<table class="fxosScreenGrid">
<tbody>
<tr>
<td style="vertical-align: top;">
<h4 id="Entrée_générique_vide"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrée</span> <span class="hps">générique:</span> <span class="hps">vide</span></span></h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4879/input-generic-empty.png" style="width: 266px; height: 41px;"></p>
<p><span lang="fr"><span class="hps">Voici une</span> <span class="hps">boîte</span> <span class="hps">de saisie</span> <span class="hps">simple, sans</span> <span class="hps">texte saisi à l'intérieur</span><span>,</span> seulement du <span class="hps">texte générique pour</span><span class="hps"> l'espace réservé</span><span>.</span></span></p>
</td>
<td style="vertical-align: top;">
<h4 id="Entrée_générique_remplie"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrée</span> <span class="hps">générique:</span> <span class="hps">rempli</span></span>e</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4881/input-generic-full.png" style="width: 266px; height: 41px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Ici,</span> <span class="hps">l'entrée</span> <span class="hps">générique</span> <span class="hps">est préremplie</span><span class="hps">.</span> <span class="hps">Notez la</span> <span class="hps">présence du bouton</span> <span class="hps">"effacer"</span> <span class="hps">à l'extrémité droite</span> <span class="hps">du</span> <span class="hps">champ de saisie.</span></span></p>
</td>
</tr>
</tbody>
</table>
<h3 id="Entrées_dans_le_haut_de_la_vue"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrées</span> <span class="hps">dans le haut de</span> <span class="hps">la vue</span></span></h3>
<p><span id="result_box" lang="fr"><span class="hps">Ces entrées</span> <span class="hps">sont situées</span> <span class="hps">dans la partie supérieure</span> <span class="hps atn">de la vue (</span><span>soit</span> <span class="hps">tout en haut</span> <span class="hps">de l'écran,</span> <span class="hps">ou</span> <span class="hps">immédiatement sous</span> <span class="hps">un en-tête</span><span>)</span><span>.</span></span></p>
<table class="fxosScreenGrid">
<tbody>
<tr>
<td style="vertical-align: top;">
<h4 id="Haut_vide">Haut : vide</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4885/input-top-idle" style="width: 320px; height: 40px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Voici un</span> <span class="hps">champ de saisie de</span> <span class="hps">texte en haut</span> <span class="hps">d'une page</span><span>, qui devrait</span> <span class="hps">être utilisé sous</span> <span class="hps">un en-tête</span><span>.</span></span></p>
</td>
<td style="vertical-align: top;">
<h4 id="Haut_actif">Haut : actif</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4883/input-top-active.png" style="width: 320px; height: 40px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Ce champ</span> <span class="hps">de saisie de texte</span> <span class="hps">du haut de</span> <span class="hps">vue</span> <span class="hps">est actif</span><span>, il</span> <span class="hps">dispose d'un bouton</span> <span class="hps">actif</span> <span class="hps">"Annuler"</span> <span class="hps">à côté de lui</span><span>,</span> <span class="hps">et le bouton</span> <span class="hps">"Effacer"</span> <span class="hps">dans le</span> <span class="hps">champ de saisie est</span> <span class="hps">visible.</span></span></p>
<p><span class="short_text" id="result_box" lang="fr"><span class="hps atn">Ce style d'</span><span>entrée doit être utilisée</span> <span class="hps">sans en-tête</span><span>.</span></span></p>
<div class="note">
<p><strong>Note:</strong> <span id="result_box" lang="fr"><span class="hps">Ceci nécessite</span> <span class="hps">plus d'explications</span><span>, de quelle façon</span> <span class="hps">est</span><span>-ce différent de</span> <span class="hps">la forme</span> <span class="hps">«vide»</span> <span class="hps">en termes d'utilisation</span> <span class="hps">d'en-tête</span><span> ?</span></span></p>
</div>
</td>
</tr>
</tbody>
</table>
<h3 id="Entrées_dans_le_bas_de_la_vue"><span class="short_text" id="result_box" lang="fr"><span class="hps">Entrées</span> <span class="hps">dans le bas de</span> <span class="hps">la vue</span></span></h3>
<p>Ces entrées sont situées dans le bas de la vue.</p>
<table class="fxosScreenGrid">
<tbody>
<tr>
<td style="vertical-align: top;">
<h4 id="Boîte_de_saisie_de_texte_vide"><span class="short_text" id="result_box" lang="fr"><span class="hps">Boîte</span> <span class="hps">de saisie de texte</span> <span class="hps">vide</span></span></h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4865/input-bottom-send-disabled.png" style="width: 320px; height: 40px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Cette zone de</span> <span class="hps">saisie en bas</span> <span class="hps">de</span> <span class="hps">vue</span> <span class="hps">comporte un bouton</span> <span class="hps">"Envoyer"</span> <span class="hps">(qui vient</span><span class="hps"> d'une</span> <span class="hps">application</span> <span class="hps">SMS).</span> <span class="hps">Notez que le bouton</span> <span class="hps">"Envoyer"</span> <span class="hps">est désactivée</span> <span class="hps">car l'entrée</span> <span class="hps">est vide.</span></span></p>
</td>
<td style="vertical-align: top;">
<h4 id="Boîte_de_saisie_de_texte_pleine"><span class="short_text" id="result_box" lang="fr"><span class="hps">Boîte</span> <span class="hps">de saisie de texte</span> <span class="hps">pleine</span></span></h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4863/input-bottom-normal.png" style="width: 320px; height: 40px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Maintenant,</span> <span class="hps">la zone de saisie</span> <span class="hps">est remplie</span><span class="hps">,</span> <span class="hps">et</span> <span class="hps">le</span> <span class="hps">bouton "Envoyer"</span> <span class="hps">est activé.</span></span></p>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<h4 id="Boîte_de_saisie_de_texte_multi-lignes"><span class="short_text" id="result_box" lang="fr"><span class="hps">Boîte</span> <span class="hps">de saisie de texte</span> <span class="hps">multi-lignes</span></span></h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4861/input-bottom-max.png" style="width: 320px; height: 113px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Étant donné que la quantité de</span> <span class="hps">texte saisi</span> <span class="hps">par l'utilisateur</span> <span class="hps">augmente,</span> <span class="hps">la zone de saisie</span> <span class="hps">en bas de</span> <span class="hps">vue</span> <span class="hps">s'étend</span> <span class="hps">vers le haut pour</span> <span class="hps">faire de la place</span> à <span class="hps">plus de contenu,</span> <span class="hps">comme on le voit</span> <span class="hps">ici</span><span>.</span></span></p>
</td>
<td style="vertical-align: top;"> </td>
</tr>
</tbody>
</table>
<h3 id="Fieldsets_simples">Fieldsets simples</h3>
<p><span id="result_box" lang="fr"><span class="hps">Ces</span> <span class="hps">fieldsets</span> <span class="hps">comprennent</span> une<span class="hps atn"> combinaison d'</span><span>un <a href="/fr/docs/">sélecteur de</a></span><a href="/fr/docs/"> </a><a href="/docs/Mozilla/Firefox_OS/UX/Building_blocks/Value_selector"><span class="hps">valeur</span></a> <span class="hps">et d'une</span> <span class="hps">zone de saisie</span><span>.</span> <span class="hps">Dans cet exemple,</span> <span class="hps">le bouton de sélection</span> <span class="hps">de</span> <span class="hps">valeur est utilisée</span> <span class="hps">pour ouvrir</span> <span class="hps">un sélecteur de</span> <span class="hps">choisir</span> <span class="hps">de type de contact</span> <span class="hps">dans l'application</span> <span class="hps">contacts</span> <span class="hps atn">(</span><span>travail, maison,</span> <span class="hps">etc</span><span>)</span><span>,</span> <span class="hps">et la zone</span> <span class="hps">de saisie </span><span class="hps">est utilisé</span> <span class="hps">pour entrer l'adresse</span> <span class="hps">e-mail</span> <span class="hps">correspondante</span><span>.</span></span></p>
<table class="fxosScreenGrid">
<tbody>
<tr>
<td style="vertical-align: top;">
<h4 id="Vide">Vide</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4867/input-fieldset-empty.png" style="width: 265px; height: 41px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Ici,</span> <span class="hps">la zone de saisie</span> <span class="hps">de texte est vide</span><span>,</span> <span class="hps">ne montrant que</span> <span class="hps">le texte</span> <span class="hps">de l'espace réservé</span><span>.</span></span></p>
</td>
<td style="vertical-align: top;">
<h4 id="Avec_du_texte">Avec du texte</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4875/input-fieldset-with-data.png" style="width: 295px; height: 42px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Ici,</span> <span class="hps">l'utilisateur a entré</span> <span class="hps">une adresse email. </span><span class="hps">Un</span> <span class="hps">bouton Supprimer</span> <span class="hps">se trouve à côté du champ</span><span>,</span><span> afin de permettre</span> <span class="hps">la suppression de</span> l'<span class="hps">adresse de courriel</span> <span class="hps">à partir de</span> <span class="hps">l'enregistrement de contact</span><span>.</span></span></p>
<p> </p>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<h4 id="Avec_le_bouton_de_sélection_de_valeurs_pressé">Avec le bouton de sélection de valeurs pressé</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4873/input-fieldset-with-data-selector-pressed.png" style="width: 295px; height: 42px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Ici, l'utilisateur</span> <span class="hps">a appuyé sur le</span> <span class="hps">bouton de sélection</span> <span class="hps">de valeur</span><span>, quand il sera relâché</span><span class="hps">,</span> <span class="hps">le sélecteur de</span> <span class="hps">valeur</span> s'<span class="hps">ouvrira</span> pour<span class="hps"> laisser choisir</span> <span class="hps">le</span> <span class="hps">type de contact.</span></span></p>
</td>
<td style="vertical-align: top;">
<h4 id="Désactivé_avec_le_bouton_annuler">Désactivé, avec le bouton annuler</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4869/input-fieldset-small-with-undo.png" style="width: 296px; height: 42px;"></p>
<p>Ici, l'entrée est désactivée, mais possède un bouton annuler.</p>
<div class="note">
<p><strong>Note:</strong> Besoin d'explication pour les cas d'utilisation de cet objet.</p>
</div>
</td>
</tr>
</tbody>
</table>
<h3 id="Fieldsets_complexes">Fieldsets complexes</h3>
<p>Les fieldsets plus complexes peuvent contenir</p>
<table class="fxosScreenGrid">
<tbody>
<tr>
<td style="vertical-align: top;">
<h4 id="Avec_du_contenu_entré">Avec du contenu entré</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4871/input-fieldset-with-button.png" style="width: 292px; height: 118px;"></p>
<p><span id="result_box" lang="fr"><span class="hps">Ici, nous</span> <span class="hps">avons une zone</span> <span class="hps">d'entrée pour laquelle</span> <span class="hps">plusieurs valeurs</span> <span class="hps">de saisie de texte</span> <span class="hps">sont associés à</span> <span class="hps">la catégorie</span> <span class="hps">"Maison"</span><span>:</span> <span class="hps">un numéro de téléphone</span> <span class="hps">et un nom</span><span>.</span> <span class="hps">Un bouton</span> <span class="hps">est inclus</span> <span class="hps">pour ajouter une adresse</span> à<span class="hps"> cette catégorie.</span></span></p>
<p> </p>
</td>
<td style="vertical-align: top;">
<h4 id="Désactivé_avec_un_bouton_annuler">Désactivé, avec un bouton annuler</h4>
<p><img alt="" src="https://mdn.mozillademos.org/files/4877/input-fieldset-with-undo.png" style="width: 320px; height: 80px;"></p>
<p>Dans cet exemple, l'entrée est désactivée, avec un bouton annuler.</p>
<div class="note">
<p><strong>Note:</strong> Besoin d'explication pour les cas d'utilisation de cet objet.</p>
</div>
<p> </p>
</td>
</tr>
</tbody>
</table>
<h2 id="Interaction">Interaction</h2>
<p>Ci dessous vous pouvez voir une série d'interaction dans le but de créer une nouvelle entrée de calendrier.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/4887/input-areas-interaction.png"></p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Input_area/Coding">Input area coding guide</a></li>
<li><a href="/fr/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">expérience utilisateur Firefox OS</a></li>
</ul>
|
