We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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>
  <section>
 <img src="img_avatar.png" alt="Avatar" class="avatar">
  <fieldset>
    <ul>
   
    <li>
      <label for="titre">
      <input type="text" id="titre" name="titre" value="" />
      Madame
      </label>
    </li>
    </ul>
  </fieldset>
  
   <p>
    <label for="courriel">
    <span>E-mail&nbsp;:</span>
    <input type="email" id="courriel" name="courrielutilisateur" required />
    <strong><abbr title="required">*</abbr></strong>
    </label>
  </p>
  </section>
 
   
  <p>
    <label for="numero de telephone">
    <span>Numéro de telephone&nbsp;: </span>
    <input type="number" id="numero" name="numero de telephone" required />
    <strong><abbr title="obligatoire">*</abbr></strong>
    </label>
  </p>
  
  </section>
 
  <section>
  <p>
    <button>Valider</button>
  </p>
  </section>
</form>

Contenu CSS

h1 {
  margin-top: 0;
}

ul {
  margin : 0;
  padding: 0;
  list-style: none;
}

form {
  margin: 0 auto;
  width : 500px;

  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;
}

.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.text{
    police : Zilla Slab Bold, couleur : #5CC7D3
}

Résultat

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : elseydi, Dralyab, tregagnon, FredB
Dernière mise à jour par : elseydi,