HTML
            


            
PUG
            
.form-group
  .field-label
    label(for="field-text") Champ par défaut sans valeur définie (avec ou sans picto)
  .field-item
    i.maificon.maificon-loupe(aria-hidden='true')
    input(type='text' value='' placeholder='Brève indication')#field-text/
  .field-label
    label(for="field-text") Champ par défaut avec valeur définie (avec ou sans picto)
  .field-item
    i.maificon.maificon-loupe(aria-hidden='true')
    input(type='text' value='Valeur de champ' placeholder='Brève indication')#field-text/
.form-group
  .field-label
    label(for="field-disabled") Champ en lecture seule
  .field-item
    input(type='text' value='Valeur en champ en lecture seule' readonly="readonly")#field-disabled/
.form-group
  .field-label
    label(for="field-disabled") Champ désactivé
  .field-item
    input(type='text' value='Valeur de champ désactivé' disabled)#field-disabled/
.form-group.has-success
  .field-label
    label(for="field-validated") Champ validé
  .field-item
    input(type="text" placeholder='Validé')#field-validated/
.form-group.has-error
  .field-label
    label(for="field-error") Champ en erreur
  .field-item
    input(type='text', aria-required="true", aria-invalid="true", aria-describedby="error-input-msg")#field-error/
  p.help-block#error-input-msg Message d'erreur.
.form-group.has-warning
  .field-label
    label(for="field-warning") Champ en attention
  .field-item
    input(type="text" , aria-describedby="warning-input-msg")#field-warning/
  p.help-block#warning-input-msg Message d'attention.
.form-group
  .field-label
    label(for="field-prefix-suffix") Champ avec prefix et suffix
  .field-item
    p.prefix#pref-input-1 Prefixe
    input(type="text", aria-describedby="pref-input-1 suf-input-1")#field-prefix-suffix/
    p.suffix#suf-input-1 Suffixe
.form-group.has-error
  .field-label
    label(for="field-reducted") Champ réduit MD-4
  .row
    .col-md-4
      .field-item
        p.prefix#pref-input-2 Prefixe
        input(type="text", aria-describedby="pref-input-2 suf-input-1")#field-reducted/
        p.suffix#suf-input-2 Suffixe
  p.help-block Message d'erreur.
.form-group
  .field-label
    label(for="field-euro-1") Champ Montant signe Euro exterieur
  .field-item
    input(type="text", aria-describedby="#currency-1")#field-euro-1/
    p#currency-1.unite €
.form-group.champ-texte
  .field-label
    label(for="field-euro-2") Champ Montant signe Euro interieur
  .field-item
    input(type="text", aria-describedby="#currency-2")#field-euro-2/
    p#currency-2.unite €
.form-group
  .field-label
    label(for="field-reducted-btn") Champ réduit avec bouton
  .row
    .col-8.col-md-4
      .field-item
        input(type="text")#field-reducted-btn/
    .col-4
      .wrapper-cta
        button(type='button') Modifier
.form-group
  .field-label
    label(for="field-reducted-btn") Champ réduit avec bouton
  .row
    .col-8.col-md-4
      .field-item
        input(type="text")#field-reducted-btn/
    .col-4
      .wrapper-cta
        button.button.-primary(type='button') Valider