Envoi de mail et téléchargement de fichiers avec l’élément HTML a

L’élément a en HTML ne va pas uniquement être très utile pour créer des liens entre différentes pages ou de ramener à différents endroits d’une même page mais va également nous permettre de lier des ressources à nos pages.

Dans ce nouveau chapitre, nous allons étudier deux autres utilisations courantes de cet élément :

• Utiliser l’élément a pour permettre aux utilisateurs de nous envoyer un mail ;
• Utiliser l’élément a pour permettre aux utilisateurs de télécharger un fichier.

 

Utiliser l’élément a pour permettre l’envoi d’un mail

On peut utiliser l’élément a pour transmettre notre adresse mail à nos utilisateurs et leur permettre de nous envoyer simplement un mail.

Pour permettre l’envoi d’un mail en HTML, on va placer indiquer en valeur de l’attribut href de notre élément a la valeur mailto : suivie de notre adresse email.

Lorsqu’un visiteur va cliquer sur notre lien, sa messagerie par défaut va automatiquement s’ouvrir. Par exemple, si vous avez un Mac, ce sera certainement l’application « Mail » qui va s’ouvrir. De plus, le champ destinataire sera automatiquement rempli avec notre adresse email.

Note : si vous travaillez sous Windows, il est possible que rien ne se passe si vous n’avez configuré aucune messagerie par défaut.

Dès qu’un visiteur clique sur le texte de notre lien, sa messagerie par défaut s’ouvre s’il en a configuré une :

See the Pen Cours HTML CSS 2.10.2 by Pierre (@pierregiraud) on CodePen.

 

Utiliser l’élément a pour permettre le téléchargement d’un fichier

Vous pouvez encore utiliser l’élément a pour permettre à vos visiteurs de télécharger certains types de fichiers, comme des fichiers PDF ou Word par exemple.

Pour la plupart des fichiers, il va simplement suffire d’indiquer leur adresse (relative ou leur URL complète) en valeur de l’attribut href. Lorsqu’un utilisateur va cliquer sur le lien, le fichier lié va s’ouvrir dans le navigateur et l’utilisateur n’aura alors plus qu’à faire un clic droit sur le fichier ou utiliser les options de son navigateur pour l’enregistrer.

Cette première solution fonctionne mais demande à ce que l’utilisateur fasse lui-même la démarche de télécharger le fichier. On va également pouvoir « forcer » le téléchargement d’un fichier en ajoutant un attribut download dans l’élément a tout en indiquant l’adresse du fichier en question en valeur de l’attribut href.

L’attribut download peut prendre en valeur (facultative) le nom sous lequel on souhaite que les utilisateurs téléchargent le fichier.

Dès que l’utilisateur va cliquer sur le lien, l’attribut download va faire que le le téléchargement du fichier lié va se lancer automatiquement. Attention cependant, cet attribut n’a pendant très longtemps pas été supporté par certains navigateurs majeurs dont Safari. Certaines anciennes versions de Safari encore présentes aujourd’hui peuvent donc ne pas le reconnaitre.

Note : Vous n’allez pas pouvoir faire télécharger n’importe quel type de fichiers à vos visiteurs. En effet, les navigateurs récents vont bloquer le téléchargement de certains fichiers dont les extensions auront été jugées comme « potentiellement dangereuses ». De plus, certaines autres extensions de fichier vont être directement interprétées par le navigateur de vos visiteurs. Cela va être le cas si vous essayez de faire télécharger la source d’un fichier .html à vos visiteurs par exemple : le navigateur va ouvrir le fichier et interpréter son code comme pour n’importe quelle autre page et n’afficher donc que le résultat visuel lié au code HTML du fichier. Ici, une astuce simple consiste à compresser les fichiers que vous voulez faire télécharger en .zip par exemple.