files/fr/web/guide/html/liens_email/index.html


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

---
title: Liens email
slug: Web/Guide/HTML/Liens_email
tags:
  - Beginner
  - Exemple
  - Guide
  - HTML
  - Web
translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links
---
<p><span class="seoSummary">Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL <code>mailto</code>.</span></p>

<h2 id="Bases_de_mailto">Bases de <code>mailto</code></h2>

<p>Dans sa forme la plus basique et la plus utilisée, un lien <code>mailto</code> indique simplement l'adresse e-mail du destinataire. Par exemple :</p>

<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org"&gt;Envoyer l'email nulle part&lt;/a&gt;</pre>

<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>.</p>

<p>En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.</p>

<h2 id="Précisions">Précisions</h2>

<p>En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL <code>mailto</code>. Les plus communément utilisés sont « <code>subject</code> », « <code>cc</code> » et « <code>body</code> » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.</p>

<div class="note">
<p><strong>Note :</strong> Les valeurs de chaque champ doivent être codées au <a href="https://en.wikipedia.org/wiki/Percent-encoding">format URL</a>.</p>
</div>

<h3 id="Échantillons_dURL_mailto">Échantillons d'URL <code>mailto</code></h3>

<p>Voici quelques échantillons d'URL <code>mailto</code>:</p>

<ul>
 <li><a href="mailto:">mailto:</a></li>
 <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li>
 <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li>
 <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li>
 <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org&amp;subject=Ceci%20est%20le%20sujet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&amp;subject=Ceci%20est%20le%20sujet</a></li>
</ul>

<p>Notez l'utilisation de l'esperluette (&amp;) pour séparer les champs de l'URL <code>mailto</code>. C'est le format standard d'écriture des URL.</p>

<h3 id="Exemple">Exemple</h3>

<p>Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien <code>mailto</code> comme ceci :</p>

<pre class="brush: html notranslate">&lt;a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&amp;body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F"&gt;
Inscrivez-vous à notre newsletter
&lt;/a&gt;</pre>

<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&amp;body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">Inscrivez-vous à notre newsletter</a>.</p>

<section id="Quick_Links">
<ol>
 <li>{{HTMLElement("a")}}</li>
 <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li>
 <li>{{RFC(5322, "Internet Message Format")}}</li>
 <li><a href="http://www.url-encode-decode.com/">Encodage/décodage d'URL en ligne</a></li>
</ol>
</section>