Bac à sable - Formulaires

Cette page présente le rendu des éléments de formulaire

Créés avec le constructeur php, vous pouvez également les ajouter en html .

Pour accéder aux déclarations PHP de chaque élément, vous pouvez lire le fichier fourni avec ce module, ou la documentation de l'API sur le site de PHPHBoost

Les champs marqués * sont obligatoires !

Champs texte
Textarea
Radio / checkbox
Sélecteurs
Tout sélectionner / Tout désélectionner Maintenez ctrl puis cliquez dans la liste pour faire un choix multiple
Tout sélectionner / Tout désélectionner Maintenez ctrl puis cliquez dans la liste pour faire un choix multiple
Divers
Ceci est une description
Ceci est un saut de ligne, il peut être affiché sans texte
Lorem ipsum
      Champs du module GoogleMaps
      Autorisation
      Tout sélectionner / Tout désélectionner Maintenez ctrl puis cliquez dans la liste pour faire un choix multiple Autorisations avancées
      Tout sélectionner / Tout désélectionner Maintenez ctrl puis cliquez dans la liste pour faire un choix multiple Autorisations avancées

      Formulaire vertical

      Formulaire horizontal
      Captchas
      Il faut être déconnecté pour voir ce champs en bas de page, avant la liste de codes source.
      Boutons
      Tous les boutons sont pré-définis avec la classe .button

      Avec une taille
      Avec une couleur
      Avec un lien
      Boutons alternatifs de validation
      Combien font 4 + cinq ?
      Voir le code source : form
      <form class="fieldset-content">
          <fieldset>
              <legend>...</legend>
              <div class="fieldset-inset">...</div>
          </fieldset>
      </form>
      Voir le code source : input
      <div class="form-element">
          <label for="[ID]">...</label>
          <div class="form-field form-field-[TYPE]"> // grouped-inputs
              <input type="[TYPE]" name="[NAME]" id="[ID]" class="button [OPTIONS]"> // grouped-element if grouped-inputs (add this class to all elements in div.grouped-inputs)
          </div>
      </div>
      Voir le code source : textarea
      <div class="form-element form-element-textarea">
          <label for="[ID]">...</label>
          <div class="form-field form-field-textarea">
              <textarea id="[ID]" name="[NAME]" rows="15" cols="40"></textarea>
          </div>
      </div>
      Voir le code source : checkbox
      <div class="form-element form-element-checkbox"> // mini-checkbox || custom-checkbox (with checkbox.css)
          <label for="[ID]">...</label>
          <div class="form-field form-field-checkbox">
              <label class="checkbox" for="[ID]">
                  <input type="checkbox" name="[NAME]" id="[ID]">
                  <span> <span class="sr-only">...</span></span>
              </label>
          </div>
      </div>
      // Multiple checkboxes
      <div class="form-element"> // inline-checkbox
          <label for="[ID]">...</label>
          <div id="[ID]" class="form-field form-field-multiple-checkbox">
              <div class="form-field-checkbox">
                  <label class="checkbox" for="[ID]_1">
                      <input type="checkbox" name="[NAME]_1" id="[ID]_1" checked="checked">
                      <span>...</span>
                  </label>
              </div>
              <div class="form-field-checkbox">
                  <label class="checkbox" for="[ID]_2">
                      <input type="checkbox" name="[NAME]_2" id="[ID]_2">
                      <span>...</span>
                  </label>
              </div>
          </div>
      </div>
      Voir le code source : radio
      <div class="form-element"> // inline-radio / custom-radio (with radio.css)
          <label for="[ID]">...</label>
          <div id="[ID]" class="form-field form-field-radio-button">
              <div class="form-field-radio">
                  <label class="radio" for="[ID]_1">
                      <input type="radio" name="[NAME]" id="[ID]_1" checked="checked">
                      <span>...</span>
                  </label>
              </div>
              <div class="form-field-radio">
                  <label class="radio" for="[ID]_2">
                      <input type="radio" name="[NAME]" id="[ID]_2">
                      <span>...</span>
                  </label>
              </div>
          </div>
      </div>
      Voir le code source : select
      <div class="form-element">
          <label for="[ID]">...</label>
          <div class="form-field form-field-select"> //  || form-field-multi-select
              <select name="[NAME]" id="[ID]"> // class="select-to-list" for options with images/font-icons / || name="[NAME][]" && multiple="multiple" for multiple options
                  <option value="[VALUE]_0" label="...">...</option> // data-option-img="path-to-picture" for images with "select-to-list"
                  <option value="[VALUE]_1" label="...">...</option> // data-option-icon="icon-values" for font-icons with "select-to-list"
              </select>
          </div>
      </div>
      Voir le code source : drag and drop / upload
      <div class="dnd-area">
          <div class="dnd-dropzone">
              <label for="inputfiles" class="dnd-label">
                  # IF C_MULTIPLE #
                      # IF IS_MOBILE_DEVICE #Cliquer ici pour ajouter des fichiers# ELSE #Cliquer ici ou déposer des fichiers# ENDIF #
                  # ELSE #
                      # IF IS_MOBILE_DEVICE #Cliquer ici pour ajouter un fichier# ELSE #Cliquer ici ou déposer un fichier# ENDIF #
                  # ENDIF #
                  <span class="d-block"></span>
              </label>
              <input type="file" name="${escape(NAME)}# IF C_MULTIPLE #[]# ENDIF #" id="${escape(HTML_ID)}" class="ufiles"# IF C_DISABLED # disabled="disabled" # ENDIF # />
          </div>
          <input type="hidden" name="max_file_size" value="{MAX_FILE_SIZE}">
          <div class="ready-to-load">
              <button type="button" class="button clear-list">Vider la liste</button>
              # IF C_MULTIPLE #
                  <span class="fa-stack fa-lg">
                      <i class="far fa-file fa-stack-2x "></i>
                      <strong class="fa-stack-1x files-nbr"></strong>
                  </span>
              # ENDIF #
          </div>
          <div class="modal-container">
              <button class="button upload-help" data-modal data-target="upload-helper" aria-label="Options autorisées pour l'upload"><i class="fa fa-question"></i></button>
              <div id="upload-helper" class="modal modal-animation">
                  <div class="close-modal" aria-label="Fermer"></div>
                  <div class="content-panel">
                      <h3>Options autorisées pour l'upload</h3>
                      # IF IS_ADMIN #
                          <p><strong>Taille maximum par fichier :</strong> {MAX_FILE_SIZE_TEXT}</p>
                      # ELSE #
                          <p><strong>Espace alloué :</strong> {MAX_FILES_SIZE_TEXT}</p>
                      # ENDIF #
                      <p><strong>Extensions de fichier autorisées :</strong> "{ALLOWED_EXTENSIONS}"</p>
                  </div>
              </div>
          </div>
      </div>
      <ul class="ulist"></ul>
      <script>
          jQuery('#${escape(HTML_ID)}').parents('form').first()[0].enctype = "multipart/form-data";
          jQuery('#${escape(HTML_ID)}').dndfiles({
              multiple:# IF C_MULTIPLE # true# ELSE # false# ENDIF #,
              maxFileSize: '{MAX_FILE_SIZE}',
              maxFilesSize: '{MAX_FILES_SIZE}',
              allowedExtensions: ["{ALLOWED_EXTENSIONS}"],
              warningText: 'L\'upload a été désactivé pour une des raisons suivantes : 
      ', warningExtension: ' : l\'extension de ce fichier n\'est pas autorisée.
      ', warningFileSize: ' : le poids de ce fichiers est trop important.
      ', warningFilesNbr: '
      - l\'ensemble des fichiers dépasse l\'espace alloué.
      ', }); </script>
      Voir le code source : button
      <fieldset class="fieldset-submit">
          <legend class="sr-only">lorem</legend>
          <div class="fieldset-inset">
              <button id="[ID]" class="button ..." type="[TYPE]" name="[NAME]">
                  ...
              </button>
          </div>
      </div>