Éléments de formulaire principaux

2.1 Élément <input>

Les formulaires sont une partie importante des pages Web et permettent aux utilisateurs d'entrer et d'envoyer des données. Les principaux éléments du formulaire sont <input>, <textarea> et <button>. Ces éléments permettent aux utilisateurs d'entrer du texte, de faire des sélections, de télécharger des fichiers et d'effectuer d'autres actions.

L'élément <input> est l'un des éléments de formulaire les plus couramment utilisés. Il prend en charge de nombreux types d'entrées de données et peut être utilisé pour diverses tâches, telles que l'entrée de texte, la sélection de fichiers, l'indication de dates, etc.

Synthaxe générale :

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

Attributs <input>

• type : définit le type d'entrée
• name : nom de l'élément de formulaire, utilisé pour identifier les données sur le serveur
• id : identifiant unique de l'élément
• value : valeur initiale de l'élément
• placeholder : texte d'indication affiché à l'intérieur de l'élément avant l'entrée des données
• required : indique que l'élément doit être rempli

Exemple <input>

input-text permet d'entrer du texte sur une seule ligne.

    
      <input type="text" name="username" id="username" placeholder="Entrez le nom d'utilisateur" required>
    
  

2.2 Élément <textarea>

L'élément <textarea> est utilisé pour entrer du texte multiligne. Il se distingue de <input type="text"> car il permet d'entrer du texte sur plusieurs lignes et peut être redimensionné.

Synthaxe générale :

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

Attributs <textarea>

• name : nom de l'élément de formulaire, utilisé pour identifier les données sur le serveur
• id : identifiant unique de l'élément
• rows : nombre de lignes de texte
• cols : nombre de caractères dans une ligne
• placeholder : texte d'indication affiché à l'intérieur de l'élément avant l'entrée des données
• required : indique que l'élément doit être rempli

Exemple d'utilisation :

    
      <label for="comments">Commentaires :</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Entrez vos commentaires ici..."
        required>
      </textarea>
    
  

Stylisation <textarea>

L'élément <textarea> peut être stylisé avec CSS pour améliorer l'apparence et l'expérience utilisateur.

Exemple de stylisation :

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize sera possible uniquement verticalement */
      }
    
  

    
      <label for="comments">Commentaires :</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Entrez vos commentaires ici..." required>
      </textarea>
    
  

2.3 Élément <button>

L'élément <button> est utilisé pour créer des boutons dans les formulaires. Contrairement à <input type="button">, l'élément <button> est plus flexible et permet d'incorporer divers éléments HTML dans les boutons, tels que du texte, des images, etc.

Synthaxe générale :

    
      <button type="type" name="name" id="id" value="value">Texte du bouton</button>
    
  

Exemple d'utilisation :

    
      <button type="submit">Envoyer</button>
      <button type="reset">Réinitialiser</button>
      <button type="button" onclick="alert('Bouton cliqué!')">Cliquez-moi</button>
    
  

Attributs <button>

1. type : définit le comportement du bouton. Valeurs possibles :
   • submit : soumet le formulaire (valeur par défaut)
   • reset : réinitialise le formulaire
   • button : bouton arbitraire, n'exécute aucune action par défaut
2. name : nom de l'élément de formulaire, utilisé pour identifier les données sur le serveur.
3. id : identifiant unique de l'élément.
4. value : valeur envoyée au serveur lors de la soumission du formulaire.

HTML imbriqué dans <button>

L'élément <button> permet d'insérer divers éléments HTML pour créer des boutons plus complexes.

Exemple avec HTML imbriqué :

    
      <button type="type" name="name" id="id" value="value">
        📨Envoyer
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Envoyer">
        Envoyer
      </button>
    
  

Stylisation <button>

L'élément <button> peut être stylisé avec CSS pour améliorer l'apparence et l'expérience utilisateur.

Exemple de stylisation :

    
      button {
        background-color: #4CAF50; /* Fond vert */
        color: white; /* Texte blanc */
        padding: 15px 20px; /* Espacement interne */
        border: none; /* Pas de bordure */
        border-radius: 4px; /* Coins arrondis */
        cursor: pointer; /* Curseur pointeur */
      }

      button:hover {
        background-color: #45a049; /* Fond vert foncé au survol */
      }
    
  

    
      <button type="submit">Envoyer</button>