Formulaires

Boutons radio

Utilisés pour les questions à choix unique.

Quel sauce pour votre kebab ? 
<div class="form-group">
    <legend>Quel sauce pour votre kebab ?</legend>
    <div class="custom-control-buttons options-group">
        <div class="custom-control custom-radio">
            <input name="radio-buttons" id="radio-1" type="radio" class="custom-control-input" value="blanche" required />
            <label for="radio-1" class="custom-control-label">blanche</label>
        </div>
        <div class="custom-control custom-radio">
            <input name="radio-buttons" id="radio-2" type="radio" class="custom-control-input" value="samuraï" required />
            <label for="radio-2" class="custom-control-label">samuraï</label>
        </div>
        <div class="custom-control custom-radio">
            <input name="radio-buttons" id="radio-3" type="radio" class="custom-control-input" value="ketchup" required />
            <label for="radio-3" class="custom-control-label">ketchup</label>
        </div>
        <div class="custom-control custom-radio">
            <input name="radio-buttons" id="radio-4" type="radio" class="custom-control-input" value="mayonnaise" required />
            <label for="radio-4" class="custom-control-label">mayonnaise</label>
        </div>
    </div>
</div>
<?php

// dans un formtype Symfony
...
->add('value', ChoiceType::class, [
    'choices' => $values,
    'multiple' => false,
    'expanded' => true,
    'required' => true, // pour indiquer que le champ est obligatoire ou non
    'label' => 'form.field.label', // pour indiquer le label associé au champ pour traduction
    'attr' => ['class' => 'custom-control-buttons'],
    'label_attr' => ['class' => 'radio-custom'],
    'placeholder' => 'false',
    'choice_label' => function ($key, $choice) use $data) {
        return 'form.field.option.' .strtolower($choice);
    },
]);

Checkbox

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis, fugiat deleniti minima sequi inventore saepe dolores! Quae repudiandae nostrum aspernatur. Odio natus ab quia, aspernatur iure similique illum placeat quis.

Quel accompagnement pour votre kebab ? 
<div class="form-group">
    <legend>Quel accompagnement pour votre kebab ?</legend>
    <div class="custom-control-buttons options-group">
        <div class="custom-control custom-checkbox">
            <input name="checkbox-buttons" id="checkbox-1" type="checkbox" class="custom-control-input" value="salade" required />
            <label for="checkbox-1" class="custom-control-label">salade</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input name="checkbox-buttons" id="checkbox-2" type="checkbox" class="custom-control-input" value="tomates" required />
            <label for="checkbox-2" class="custom-control-label">tomates</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input name="checkbox-buttons" id="checkbox-3" type="checkbox" class="custom-control-input" value="oignons" required />
            <label for="checkbox-3" class="custom-control-label">oignons</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input name="checkbox-buttons" id="checkbox-4" type="checkbox" class="custom-control-input" value="frites" required />
            <label for="checkbox-4" class="custom-control-label">frites</label>
        </div>
    </div>
</div>
<?php

// dans un formtype Symfony
...
->add('');

Hybride (radio + checkbox)

Un champ de type hybride permet d'avoir des éléments de type checkbox et radio. Il est en général préférable d'utiliser ce type de champ plutôt que le type checkbox car il permet de s'assurer que l'utilisateur saisit une réponse même si celle-ci correspond à "rien".

Quel accompagnement pour votre kebab ? 
<div class="form-group">
    <legend>Quel accompagnement pour votre kebab ?</legend>
    <div class="custom-control-buttons options-group hybrid">
        <div class="custom-control custom-checkbox">
            <input name="hybrid-buttons[]" id="hybrid-1" type="checkbox" class="custom-control-input" value="salade" required />
            <label for="hybrid-1" class="custom-control-label">salade</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input name="hybrid-buttons[]" id="hybrid-2" type="checkbox" class="custom-control-input" value="tomates" required />
            <label for="hybrid-2" class="custom-control-label">tomates</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input name="hybrid-buttons[]" id="hybrid-3" type="checkbox" class="custom-control-input" value="oignons" required />
            <label for="hybrid-3" class="custom-control-label">oignons</label>
        </div>
        <div class="custom-control custom-checkbox">
            <input name="hybrid-buttons[]" id="hybrid-4" type="checkbox" class="custom-control-input" value="frites" required />
            <label for="hybrid-4" class="custom-control-label">frites</label>
        </div>
        <div class="custom-control custom-radio">
            <input name="hybrid-buttons[]" id="hybrid-5" type="radio" class="custom-control-input" value="aucun" required />
            <label for="hybrid-5" class="custom-control-label">aucun</label>
        </div>
    </div>
</div>
<?php

// dans un formtype Symfony
...
->add('');

Toggles

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime, natus laborum quisquam, culpa officiis nisi incidunt cupiditate dolores et ad officia commodi rerum animi porro odit dolor qui. Quod, dolor?

Champs texte

Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, modi excepturi ex totam dicta reprehenderit praesentium neque fugiat? Voluptas cupiditate officia ab enim sapiente dicta omnis laborum rerum minus iste.

Champs avec unités

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Officia voluptatem enim hic alias, quod suscipit, culpa, perspiciatis nemo quaerat ratione dolor. Maiores exercitationem enim perferendis cumque corrupti amet incidunt explicabo!

Kg

Textarea

Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt explicabo quo, dignissimos pariatur minus rerum ad, sed ex ullam eveniet maxime ipsa voluptate, unde totam vitae voluptas delectus necessitatibus est.

Select

Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis nobis modi maiores facilis repellat, delectus, enim doloremque iste perferendis iure itaque et eos? Nostrum, nobis fugiat dolores at sequi facilis!

Téléphones

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum harum vel voluptate aliquid sed, tempora quas voluptates at quia recusandae voluptatibus ab. Dignissimos nesciunt at ea tempora asperiores quam minus.

Auto-complétion

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro vitae repudiandae quo eaque mollitia voluptatem pariatur! Dicta fugit, ullam, cumque, voluptates rerum quis laborum quisquam deserunt ut libero ipsam temporibus.

Gestion des modes d'entrées pour mobiles

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti sapiente architecto vel voluptatibus ullam dolorum, ab quidem cum accusamus iure delectus dolores voluptate? Doloribus, in nam cum accusantium natus saepe.