Formations

Formation HTML / CSS / PARTIE 3

Par Guillaume , le 20 août 2019 , mis à jour le 24 août 2019 — 2 commentaires — 11 minutes de lecture

Comment faire une navigation entre plusieurs page d’un site web ?

Comme nous l’avons vu précédemment, pour faire des lien en HTML, il s’agit d’utiliser la balise <a></a>

ex:

<ul>
  <li><a href=""></a>Lien 1</li>
  <li><a href=""></a>Lien 2</li>
  <li><a href=""></a>Lien 3</li>
  <li><a href=""></a>Lien 4</li>
</ul>

Dans notre exemple, nous avons l’attribut href de chaque lien vide, pour faire un lien il suffit de mettre l’adresse que l’on souhaite dans le href.

ex:

<a href="https://google.com">Google</a>

Ou pour un fichier local ex:

<a href="contact.html">Page contact</a>

Rien de plus simple, on peux également utiliser un autre attribut qui est le target, l’attribut target, sert à ouvrir le lien soit dans l’onglet actuel de notre navigateur, ou, d’ouvrir le lien dans un autre onglet du navagateur, afin de ne pas perdre le lien que nous avons actuellement:

ex:

<a href="https://google.com" target="_blank">Google</a>

Ouvrira google.com dans un autre onglet, _self pour rester sur le même onglet, si on ne mets pas target, par défaut le lien s’ouvrira dans le même onglet.

Les formulaires en HTML:

Désormais, nous allons nous attaquer à une grosse partie assez importante et longue à mémoriser, il s’agit des formulaires.

Les formulaires sont très présent dans le web, ils sont partout je dirais, sans eux, les sites seraient très limités.

Prenons exemple d’un formulaire de contact, au lieu de mettre un lien de votre adresse mail sur la page contact de votre site, pourquoi ne pas placer un formulaire avec plusieurs champs (ex: nom + prenom, mail, tel, sujet et message) ?

C’est ce que nous allons faire.

Les balises d’un formulaire HTML

Un formulaire comprends plusieurs balises, un peu comme notre document HTML, le formulaire est entouré d’un <form> et fini par un </form> rien de nouveau jusqu’ici,

il y a cependant des balises comme <legend></legend> et <fieldset></fieldset> ou encore <label></label>

qui permettent de « décorer » le formulaire, cela dit, elles ne sont pas obligatoires.

Un formulaire peux contenir des <div> des <p> ou autre balises, les plus importantes vont être les <input> et <textarea>:

Démonstration:

Je commence par faire un nouveau dossier, un fichier index.html et un styles.css

voici le début de mon nouveau document:


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon premier formulaire</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page contact</h1>
  <form action="" method="post">

  </form>
</body>
</html>

On peux voir, sous mon <h1> la balise <form> avec 2 attributs, le premier est action= » », l’action permet de dire, vers qu’elle adresse ou fichier j’envoi les données, ensuite l’attribut method= »post » permet de définir la méthode d’envoi des données, il existe plusieurs, GET, POST, PUT, DELETE nous y reviendrons plus tard, nous allons utilisez la post dans notre cas.

Création du champs nom:

<form action="" method="post">
    <fieldset>
      <legend>Formulaire de contact</legend>
      <label for="">Nom: </label>
      <input type="text" name="nom" id="nom" value="" placeholder="Entrez votre nom">
    </fieldset>
  </form>

Petit aperçu:

Le <fieldset> est la cadre noir du formulaire, la <legend> Permet de mettre un petit intitulé au formulaire,

vient ensuite le <label> qui permet de mettre un intitulé au champs, et, pour finir le champs text.

Un input en html peux être plusieurs type de champs, un champs texte, une case à cacher (checkbox, un button radio (radio), un mot de passe (password) etc…) il suffit de changer le type dans l’attribut type de l’input.

Pour les autres attributs, vous connaissez déjà l’ID, le name est essentiel pour envoyer les données (à PHP ou Python ou autre langage serveur) quant à l’attribut value il s’agit de donner une valeur à un champs par défaut et pour le placeholder, il permet de mettre un texte si la value est vide qui disparait lorsqu’on sélectionne le champs.

Ajoutons les autres champs,

<form action="" method="post">
    <fieldset>
      <legend>Formulaire de contact</legend>
      <label for="">Nom: </label>
      <input type="text" name="nom" id="nom" placeholder="Entrez votre nom">

      <label for="">Prénom: </label>
      <input type="text" name="prenom" id="prenom" placeholder="Entrez votre prénom">

      <label for="">Tél: </label>
      <input type="text" name="telephone" id="telephone" placeholder="Entrez votre telephone">


      <label for="">Sujet: </label>
      <input type="text" name="sujet" id="sujet" placeholder="Entrez votre sujet">

      <label for="">Message: </label>
      <input type="text" name="message" id="message" placeholder="Entrez votre message">

    </fieldset>
  </form>

Voici le résultat avec les nouveaux champs:

Nous avons juste faire du copier / coller du champs nom, en faisant attention de bien champs les valeurs des attributs name et ID, car il ne faut pas qu’il y ai plusieurs fois les même « name » cela faussera les données reçu pour les traiter.

Un peu de mise en page pour styliser le formulaire avec CSS.

body{
  font-family: "Open Sans", sans-serif;
}

form input[type=text]{
  display: block;
  
}

On ajoute un petit peu de css juste histoire de mettre les champs les un à la suite des autres, car ce n’est pas le but de l’exercice.

Nous avons donc un petit formulaire, qui n’est pas complet, en effet, il nous manque un bouton « valider », le champs message est trop petit, et il serait bien d’avoir un menu déroulant à la place du champs sujet.

Nous allons remplacer l’input message par un textarea comme ceci:

<label for="">Message: </label>
      <textarea name="message" id="message" placeholder="Entrez votre message"></textarea>

Le champs est plus gros et on peux le retailler depuis le navigateur.

Pour le sujet, nous allons faire un menu déroulant, il s’agit d’une balise <select></select> qui contiendra des <option></option> comme ceci:

  <select name="sujet" id="sujet">
        <option value="devis"> Demande de devis</option>
        <option value="partenariat"> Demande de partenariat</option>
        <option value="divers"> Autre </option>
      </select>

Voici le rendu:

Manque plus que le bouton.

Pour le bouton, il s’agit aussi d’un input mais de type submit, qui permet de soumettre les informations.

2 possibilités pour le faire:

<label for=""> </label>
      <input type="submit" name="submit" value="envoyer">

      <label for=""> </label>
      <button type="submit" name="submit">Envoyer les données</button>

Soit on utilise un input de type submit, ou soit un button de type submit, la différence entre les 2 c’est que la balise <button> est plus simple à designer, surtout si on veux y placer une image de font ou un icon.

Nous garderons uniquement que le <button>

Voici le code final et le rendu final:

<form action="" method="post">
    <fieldset>
      <legend>Formulaire de contact</legend>
      <label for="">Nom: </label>
      <input type="text" name="nom" id="nom" placeholder="Entrez votre nom">

      <label for="">Prénom: </label>
      <input type="text" name="prenom" id="prenom" placeholder="Entrez votre prénom">

      <label for="">Tél: </label>
      <input type="text" name="telephone" id="telephone" placeholder="Entrez votre telephone">


      <label for="">Sujet: </label>
      <select name="sujet" id="sujet">
        <option value="devis"> Demande de devis</option>
        <option value="partenariat"> Demande de partenariat</option>
        <option value="divers"> Autre </option>
      </select>
      <label for="">Message: </label>
      <textarea name="message" id="message" placeholder="Entrez votre message"></textarea>

      <label for=""> </label>
      <button type="submit" name="submit">Envoyer les données</button>
    </fieldset>
  </form>

Voila, vous savez désormais faire un formulaire de contact en HTML.

Bonus:

Intégrer un carte animée google map sur son site web

Et si vous ajoutiez une carte dynamique de google maps sur votre site pour aider vos clients à mieux vous repérer ?

Pour ce faire rien de plus simple.

Premièrement rdv sur google maps et tapez votre adresse

Pour ma part, je me focalise sur la ville de montpellier

J’appuie ensuite sur menu:

Puis sur intégrer la carte

et dans le popup qui s’ouvre sur intégrer la carte

Je copie le code qu’ils me fournissent et je le place dans mon HTML

Voici mon HTML

<body>
  <h1>Page contact</h1>
  <form action="" method="post">
    <fieldset>
      <legend>Formulaire de contact</legend>
      <label for="">Nom: </label>
      <input type="text" name="nom" id="nom" placeholder="Entrez votre nom">

      <label for="">Prénom: </label>
      <input type="text" name="prenom" id="prenom" placeholder="Entrez votre prénom">

      <label for="">Tél: </label>
      <input type="text" name="telephone" id="telephone" placeholder="Entrez votre telephone">


      <label for="">Sujet: </label>
      <select name="sujet" id="sujet">
        <option value="devis"> Demande de devis</option>
        <option value="partenariat"> Demande de partenariat</option>
        <option value="divers"> Autre </option>
      </select>
      <label for="">Message: </label>
      <textarea name="message" id="message" placeholder="Entrez votre message"></textarea>

      <label for=""> </label>
      <button type="submit" name="submit">Envoyer les données</button>
    </fieldset>
  </form>

  <iframe src="https://www.google.com/maps/embed?pb=!1m23!1m12!1m3!1d92442.492756524!2d3.8041214072730187!3d43.6101248658287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m8!3e6!4m0!4m5!1s0x12b6af0725dd9db1%3A0xad8756742894e802!2sMontpellier!3m2!1d43.610769!2d3.8767159999999996!5e0!3m2!1sfr!2sfr!4v1487594357700" 
    width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</body>