Back

Correction exercices les sélecteurs simples en CSS : Série 02

Correction exercices les sélecteurs simples en CSS : Série 02

  1. Exercice 01

    1. Énoncé
    2. Solution
      • <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>mes premier pas en css</title>
            <a href="http://www.w3.org/html/logo/">
           
         <style>
        div{background: linear-gradient(#e5e5e5, white);;
            width: 540px;
            padding-top: 20px;
            border-radius: 6px;}
        legend{
            background-color:#aaaaaa;
            color:white;
            border-radius: 6px;
            width:26%;
            margin-left: 20px;
            padding-left: 20px;
        
            }
            fieldset{
               border-radius: 10px;
               border:none;
               width: 480px;
               margin-left: 20px;
               background-color:white;
            }
            input{
                padding: 10px;
                width: 200px;
                border-radius: 6px;
                border: solid 1px silver;
                margin-top: 6px;
           }
           .submit{
                 background-color:#ee6600;
                 border-radius: 6px;
                 color:white;
          }
          html{
        	font-family: verdana ;
         }
         </style>
        </head>
        <body>
           
        <div>
                 <form>
                    <fieldset>
                        <legend><h3>Inscription:</h3></legend>
                    <table>
                    
                        <tr>
                        <td><label for="prenom">Prénom:</label></td>
                                  <td><input type="text" id="prenom" placeholder="Saisire votre prénom" required><br></td>
                        </tr>
                        <tr>
                            <td><label for="nom">Nom:</label></td>
                                      <td><input type="text" id="nom" placeholder="Saisire votre nom" required><br></td>
                            </tr>
        
                         <tr>
                             <td><label>Date de naissance:</label></td>
                             <td><input type="date" placeholder="Saisire votre date de naissance"></td>
                         </tr>
        
                         <tr>
                            <td><label>Adresse E-mail:</label></td>
                            <td><input type="email" placeholder="Saisire votre E-mail" required></td>
                        </tr>
        
                        <tr>
                            <td><label>Mot de passe:</label></td>
                            <td><input type="password" placeholder="Saisire votre mot de passe" required></td>
                        </tr>
        
                        <tr>
                            <td><label>Confirme:</label></td>
                            <td><input type="password" placeholder="confirme votre mot de passe" required></td>
                        </tr>
        
                        <tr>
                         <td></td>   <td><input type="submit" name="btnEnvoyer" value="S'inscrire" class="submit"></td>
                        </tr>
                    </fieldset>
                    </table>
        </form>
        </div>        
        </body>
        </html>



Riadh HAJJI

Laisser un commentaire

Abonnez vous à notre chaîne YouTube gratuitement