Balises HTML méconnues

Stephan GIULIANI

24/10/2022 -

Saviez-vous que parfois, vous n'avez pas besoin de JavaScript ou de CSS funky pour créer des trucs sympas ? Vous pouvez le faire juste en HTML !

Trucs sympas à faire uniquement en HTML

Pourquoi faire simple quand on peut faire compliqué me direz-vous ? C'est vrai, mais on a souvent tendance à se torturer les neurones alors qu'il existe des solutions toutes simples et prêtes à l'emploi.

Alors, installez-vous confortablement, et prenez le temps de lire ces quelques astuces qui n'utilisent que le langage HTML.

Un mélangeur de couleurs

Dans un formulaire, il est possible d'intégrer un champ de type « Color Picker »

Code

<form>
    <label for="color-picker">Sélectionnez une couleur</label>
    <input type="color" id="color-picker" />
</form>

Voici le rendu :

Un accordion tout simple

Le langage HTML offre un composant assez « sympathique » avec la balise <details>.

En effet, ouvrez une balise <details> dans laquelle vous insérez un bloc <summary> qui sera la partie visible, suivi d'une division (<div>) qui contiendra le contenu et vous aurez implémenté un bloc qui pourra être ouvert ou fermé à volonté comme vous pouvez le voir dans le rendu.

Code

<details>
    <summary>
        <strong>Titre du block</strong><br />
        <small>Sous-titre ou brève description</small>
    </summary>
    <div class="mt-3 border-top">
        <p class="text-start">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Dolorum, asperiores eos porro voluptatem earum ipsa
            distinctio ratione nulla officiis amet suscipit aliquam
            expedita, cumque dicta magnam illo perspiciatis neque
            tenetur.
        </p>
    </div>
</details>

Pour info, l'exemple utilise des classes Bootstrap, mais celles-ci ne sont pas obligatoires. Ce qui est important c'est le respect de la structure : une balise <details> qui englobe une balise <summary> pour le titre, une explication brève, suivie d'une <div> dans laquelle vous y placez votre texte détaillé.

Rendu

Voici le rendu du bloc <details> qui produit un composant de type accordion. En cliquant sur le titre du bloc, vous l'ouvrez ou le fermez.

Titre du block
Sous-titre ou brève description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, asperiores eos porro voluptatem earum ipsa distinctio ratione nulla officiis amet suscipit aliquam expedita, cumque dicta magnam illo perspiciatis neque tenetur.

Relookin !
Apporter sa touche personnelle…

Vous pouvez bien entendu appliquer vos propres CSS sur ce composant histoire de le relooker.

Lien sur un numéro de téléphone

Une balise <a> ne fait pas que pointer vers un autre lien http, ftp, email. Vous pouvez lui indiquer un numéro de téléphone, et lorsque le visiteur cliquera dessus cela lui proposera d'ouvrir un client de téléphonie (Skype, What'sApp).

Code

<a href="tel:+33123456789">01 23 45 67 89</a>

Côté front, le numéro apparaît comme un lien et en cliquant dessus, l'utilisateur se verra proposer de choisir son application de téléphonie.

01 23 45 67 89

Essayez par vous-même… 😉

Liste avec autocomplétion

Saviez-vous qu'en couplant une balise <datalist> à un champ de formulaire de type <input> vous pouviez offrir à votre utilisateur une aide à la saisie ?

Non ? Démonstration !

Code

<form action="votre-action-du-formulaire" method="POST">
    <label for="language" class="form-label">
        Saisissez ou sélectionnez une techno
    </label>
    <input list="my-data" id="language" name="language" class="form-control form-control-sm" />
    <datalist id="my-data">
        <option value="PHP"></option>
        <option value="MySQL"></option>
        <option value="Symfony"></option>
        <option value="HTML"></option>
        <option value="CSS"></option>
        <option value="JavaScript"></option>
        <option value="JQuery"></option>
        <option value="VueJS"></option>
        <option value="React"></option>
        <option value="Java"></option>
    </datalist>
</form>

Imaginons un formulaire où votre utilisateur aurait à choisir une technologie de développement informatique

En fonction de ce que saisi votre utilisateur, une liste se constitue et lui propose des choix correspondant à sa saisie.

Il faut quand même admettre que ça peut être pratique… 👍

Une barre de progression

Très souvent un élément graphique est plus parlant qu'une longue explication.

C'est le cas des barres de progression. Elle peuvent indiquer un niveau d'avancement, évaluer un niveau de pratique ou d'expertise, etc. Bref en une courte ligne de code HTML vous pouvez présenter de façon ludique, intuitive une donnée.

Code

<label for="my-progress-bar">Progression</label><br />
<progress id="my-progress-bar" value="73" max="100"></progress> 73 %

Il vous sera ensuite facile d'interragir dynamiquement en pilotant, via JavaScript par exemple, sa valeur (value), mais également de le relooker avec le CSS.

Exemple non stylisé

Progression
73 %

Exemple stylisé

Progression
73 %

Cet exemple a été stylisé avec le CSS suivant :

background-color: #FFF;
border: 1px solid #C0C0C0;
border-radius: 4px;
height: 15px;
width: 70%;

Pour information, Bootstrap a un composant de type barre de progression, mais architecturé avec des <div> imbriquées.

La documentation se situe à cette adresse : https://getbootstrap.com/docs/5.2/components/progress/