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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
|
---
title: 'Attribut HTML : accept'
slug: Web/HTML/Attributes/accept
tags:
- Accept
- Attribute
- File
- HTML
- Input
- Reference
translation_of: Web/HTML/Attributes/accept
---
<p>{{HTMLSidebar}}</p>
<p>L'attribut <strong><code>accept</code></strong> prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une <a href="#unique_file_type_specifiers">spécification de type de fichier unique</a>, décrivant les types de fichiers à autoriser. La propriété <code>accept</code> est un attribut pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. Elle était prise en charge par l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a>, mais a été supprimée au profit de <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> dans HTML5.</p>
<p>Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.</p>
<p>Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un <code><input></code> comme celui-ci :</p>
<pre class="brush: html"><input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre>
<p>En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média :</p>
<pre class="brush: html"><input type="file" id="soundFile" accept="audio/*">
<input type="file" id="videoFile" accept="video/*">
<input type="file" id="imageFile" accept="image/*"></pre>
<p>L'attribut <code>accept</code> ne valide pas les types de fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des bons types de fichiers. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de passer outre et de sélectionner le fichier de leur choix, puis de choisir des types de fichiers incorrects.</p>
<p>Pour cette raison, vous devez vous assurer que les exigences attendues sont validées côté serveur.</p>
<h2 id="examples">Exemples</h2>
<p>Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.</p>
<pre class="brush: html"><p>
<label for="soundFile">Sélectionnez un fichier audio :</label>
<input type="file" id="soundFile" accept="audio/*">
</p>
<p>
<label for="videoFile">Sélectionnez un fichier vidéo :</label>
<input type="file" id="videoFile" accept="video/*">
</p>
<p>
<label for="imageFile">Sélectionner des images :</label>
<input type="file" id="imageFile" accept="image/*" multiple>
</p></pre>
<p>{{EmbedLiveSample('examples', '', 160)}}</p>
<p>Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut <a href="multiple"><code>multiple</code></a> pour plus d'informations.</p>
<h2 id="unique_file_type_specifiers">Spécification de type de fichier unique</h2>
<p>Un <strong>spécificateur de type de fichier unique</strong> est une chaîne qui décrit un type de fichier pouvant être sélectionné par l'utilisateur dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> de type <code>file</code>. Chaque spécificateur unique de type de fichier peut prendre l'une des formes suivantes :</p>
<ul>
<li>Une extension de nom de fichier valide et insensible à la casse, commençant par un caractère point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code>, ou <code>.doc</code>.</li>
<li>Une chaîne de type MIME valide, sans extension.</li>
<li>La chaîne de caractères <code>audio/*</code> signifiant "tout fichier audio".</li>
<li>La chaîne de caractères <code>vidéo/*</code> signifiant "tout fichier vidéo".</li>
<li>La chaîne de caractères <code>image/*</code> signifiant "tout fichier image".</li>
</ul>
<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :</p>
<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre>
<h2 id="using_file_inputs">Utilisation des champs pour saisir des fichiers</h2>
<h3 id="a_basic_example">Un exemple de base</h3>
<pre class="brush: html"><form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choisissez le fichier à téléverser</label>
<input type="file" id="file" name="file" multiple>
</div>
<div>
<button>Soumettre</button>
</div>
</form></pre>
<pre class="brush: css">div {
margin-bottom: 10px;
}</pre>
<p>Cela produit le résultat suivant :</p>
<p>{{EmbedLiveSample('a_basic_example', 650, 100)}}</p>
<div class="note">
<p><strong>Note :</strong> Vous pouvez trouver cet exemple sur GitHub également - voir le <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">code source</a>, et aussi <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">le fonctionnement en direct</a>.</p>
</div>
<p>Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.</p>
<p>L'inclusion de l'attribut <a href="multiple"><code>multiple</code></a>, comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd>, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par <code><input></code>, omettez l'attribut <code>multiple</code>.</p>
<h3 id="limiting_accepted_file_types">Restreindre les types de fichier acceptés</h3>
<p>Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que <a href="/fr/docs/Glossary/jpeg">JPEG</a> ou <a href="/fr/docs/Glossary/PNG">PNG</a>.</p>
<p>Les types de fichiers acceptables peuvent être spécifiés avec l'attribut <a href="/fr/docs/Web/HTML/Element/Input/file#attr-accept"><code>accept</code></a>, qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :</p>
<ul>
<li><code>accept="image/png"</code> ou <code>accept=".png"</code> — Accepter les fichiers PNG.</li>
<li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> — Accepter les fichiers PNG ou JPEG.</li>
<li><code>accept="image/*"</code> — Accepter tout fichier ayant un type MIME <code>image/*</code>. (De nombreux appareils mobiles permettent également à l'utilisateur de prendre une photo avec l'appareil photo lorsque cette option est utilisée).</li>
<li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Accepter tout ce qui ressemble à un document MS Word.</li>
</ul>
<p>Examinons un exemple plus complet :</p>
<pre class="brush: html"><form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Choisissez le fichier à téléverser</label>
<input type="file" id="profile_pic" name="profile_pic"
accept=".jpg, .jpeg, .png">
</div>
<div>
<button>Soumettre</button>
</div>
</form></pre>
<pre class="brush: css hidden">div {
margin-bottom: 10px;
}</pre>
<p>{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}</p>
<h2 id="specifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
</tr>
</tbody>
</table>
<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat("html.elements.attribute.accept")}}</p>
<h2 id="see_also">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a></li>
<li><a href="/fr/docs/Web/API/File">L'API File</a></li>
</ul>
|
