Expand your HTML skills through an MDN Fellowship - Apply by April 1 http://mzl.la/MDNFellowship

mozilla
Vos résultats de recherche

    Exemple Redirection 4

    Ceci est un exemple de formulaire de paiement basique extrait de l'article Comment structurer un formulaire HTML.

    Un formulaire de paiement

    Contenu HTML

    <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post">
      <h1>Formulaire de paiement</h1>
      <p>Les champs obligatoires sont suivis par <strong><abbr title="obligatoire">*</abbr></strong>.</p>
     
      <section>
      <h2>Information de contact</h2>
     
      <fieldset>
        <legend>Titre</legend>
        <ul>
        <li>
          <label for="titre_1">
          <input type="radio" id="titre_1" name="titre" value="M." />
          Monsieur
          </label>
        </li>
        <li>
          <label for="titre_2">
          <input type="radio" id="titre_2" name="titre" value="Mme" />
          Madame
          </label>
        </li>
        </ul>
      </fieldset>
     
      <p>
        <label for="nom">
        <span>Nom&nbsp;:</span>
        <input type="text" id="nom" name="nomdutilisateur" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
        </label>
      </p>
     
       <p>
        <label for="courriel">
        <span>Courriel&nbsp;:</span>
        <input type="email" id="courriel" name="courrielutilisateur" required />
        <strong><abbr title="required">*</abbr></strong>
        </label>
      </p>
      </section>
     
      <section>
      <h2>Information de paiement</h2>
     
      <p>
        <label for="carte">
        <span>Type de carte&nbsp;:</span>
        <select id="card" name="carteutilisateur">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
        </label>
      </p>
      <p>
        <label for="numero">
        <span>Numéro de la carte&nbsp;:</span>
        <input type="text" id="numero" name="numerocarte" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
        </label>
      </p>
      <p>
        <label for="date">
        <span>Date d'expiration&nbsp;:</span>
        <input type="text" id="date" name="expiration" required />
        <strong><abbr title="obligatoire">*</abbr></strong>
        <em>au format mm/aa</em>
        </label>
      </p>
      </section>
     
      <section>
      <p>
        <button>Confirmer le paiement</button>
      </p>
      </section>
    </form>

    Contenu CSS

    h1 {
      margin-top: 0;
    }
    
    ul {
      margin : 0;
      padding: 0;
      list-style: none;
    }
    
    form {
      margin: 0 auto;
      width : 400px;
    
      padding: 1em;
      border : 1px solid #CCC;
      border-radius: 1em;
    }
    
    div + div {
      margin-top: 1em;
    }
    
    label span{
      display: inline-block;
      width  : 120px;
      text-align: right;
    }
    
    input, textarea {
      font: 1em sans-serif;
    
      width: 250px;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    
      border: 1px solid #999;
    }
    
    input[type=checkbox], input[type=radio] {
      width : auto;
      border: none;
    }
    
    input:focus, textarea:focus {
      border-color: #000;
    }
    
    textarea {
      vertical-align: top;
    
      height: 5em;
    
      resize: vertical;
    }
    
    fieldset {
      width: 250px;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
    
      margin-left: 124px;
     
      border: 1px solid #999;
    }
    
    button {
      margin-left: 124px;
    }

    Résultat

     

    Étiquettes et contributeurs liés au document

    Contributors to this page: tregagnon
    Dernière mise à jour par : tregagnon,