Médiaforma

PHP MySQL – Exercice 3

Print Friendly

Utilisez un tableau pour améliorer la mise en forme du formulaire précédent.

Voici le résultat à obtenir :

Vous pouvez mettre la vidéo sur Pause et modifier le code de l’exercice précédent. Poursuivez la vidéo lorsque tout le code aura été entré.

Solution

Les éléments qui composent le formulaire sont insérés dans un tableau, entre les balises <table> et </table>.

Le tableau comporte deux colonnes. La première est utilisée pour affichez le nom des champs et la deuxième pour afficher les champs.

Chacun des champs du formulaire est placé entre les balises <tr> et </tr> pour qu’il s’affiche sur une ligne distincte. Les libellés sont placés dans la première colonne, entre les balises <td> et </td>. Les champs sont placés dans la deuxième colonne, entre les champs <td> et </td>.

Enfin, pour améliorer la mise en forme du formulaire, les boutons Envoyer et Annuler sont également placés dans le tableau : le premier bouton dans la première colonne et le deuxième bouton dans la deuxième colonne.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <table>
        <tr><td>Prénom</td><td><input type="text" name="prenom"></td></tr>
        <tr><td>Nom</td><td><input type="text" name="nom"></td></tr>
        <tr><td>Mot de passe</td><td><input type="password" name="mdp"></td></tr>
        <tr>
          <td>Age</td>
          <td><select name="age">
            <option><20 ans</option>
            <option>20 à 50 ans</option>
            <option>>50 ans</option>
          </select></td></tr>
        <tr><td>Observations</td><td><textarea cols="40" rows="4"></textarea></td></tr>
        <tr><td><input type="submit" name="Nom" value="Envoyer"></td>
        <td><input type="reset" name="Nom" value="Annuler"></td></tr>
      </table>
    </form>
  </body>
</html>
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply