Démonstration – Formulaire
Vous trouverez ici un exemple de formulaire qui utilise exclusivement les composants du frameworks.
N. B. – la mise-en-page de cette page de présentation induit une largeur de 940px pour les iframes de visualisation, ce qui implique que, par défaut vous verrez donc ces visualisations en « mode tablette ». Chacune de ces iframes de visualisation comporte toutefois des boutons pour changer cette largeur et vous permettre de voir le contenu dans 3 tailles différentes :
mobile [360px], tablette [940px], desktop [pleine largeur] et format libre (utilisez le coin inférieur droit pour redimensionner).
Formulaire simple
Ce cas correspond à un petit formulaire de dépôt de candidature.
<div class="su-container su-row">
<nav class="su-col-lg-24">
<ul class="su-breadcrumb su-margin-bottom-xl">
<li><a href="/" title="Retour à l'accueil">Accueil</a></li>
<li>Formulaire de candidature</li>
</ul>
</nav>
<main id="candidature" class="su-col-lg-16">
<header>
<h1 class="su-with-margin ">Formulaire de candidature</h1>
<p class="su-standfirst su-article">
Vous pouvez étayer votre candidature en joignant tout document susceptible de compléter votre dossier.
</p>
<p class="su-margin-top-m"><strong>Dépôt des dossiers de candidature jusqu'au 31 décembre.</strong></p>
</header>
<article class="su-article su-margin-top-l">
<!-- <form id="form-1" action="#action"> -->
<form id="form-1" action="/demoForm" method="post">
<h2 class="su-with-margin">Dossier de candidature</h2>
<label for="nom">Nom</label>
<input id="nom" name="nom" class="su-margin-bottom-m" type="text" required="">
<label for="prenom">Prénom</label>
<input id="prenom" name="prenom" class="su-margin-bottom-m" type="text" required="">
<label for="civilite">Civilité</label>
<div class="su-select su-margin-bottom-m">
<select id="civilite" name="civilite" required>
<option value="" disabled selected hidden></option>
<option value="option1">M.</option>
<option value="option2">Mme</option>
</select>
</div>
<label for="tel">Téléphone<span class="su-label-complement"> (facultatif)</span></label>
<input id="tel" class="su-margin-bottom-m" name="tel" type="tel" pattern="(0[1-9]|\+[1-9]\d{2,3}|00[1-9]\d{2,3})\s*(\d{2}\s*){4}">
<label for="mel">Adresse mail</label>
<input id="mel" class="su-margin-bottom-m" name="mel" type="email" required="">
<label for="address">Adresse postale<span class="su-label-complement"> (facultatif)</span></label>
<textarea id="address" class="su-margin-bottom-m" name="address" maxlength="230"></textarea>
<p id="categorie_label" class="su-label">A quel poste candidatez-vous ?</p>
<ul class="su-not-list su-radio-area su-radio-column su-margin-bottom-m" aria-labelledby="categorie_label">
<li>
<label for="agent-secret"><input type="radio" id="agent-secret" name="categorie" value="Agent secret" required="">
Agent secret
</label>
</li>
<li>
<label for="mage-de-niveau-4"><input type="radio" id="mage-de-niveau-4" name="categorie" value="Mage de niveau 4" required="">
Mage de niveau 4
</label>
</li>
<li>
<label for="verbicruciste"><input type="radio" id="verbicruciste" name="categorie" value="Verbicruciste" required="">
Verbicruciste
</label>
</li>
<li>
<label for="gardien-de-phare"><input type="radio" id="gardien-de-phare" name="categorie" value="Gardien de phare" required="">
Gardien de phare
</label>
</li>
</ul>
<label for="motivation">Quelle est votre motivation à candidater ?<span class="su-label-complement"> (facultatif)</span></label>
<textarea id="motivation" name="motivation" class="su-margin-bottom-m" placeholder="Veuillez limiter votre texte à moins de 500 caractères" maxlength="500"></textarea>
<div class="su-margin-bottom-l">
<label for="attachments">Envoyer des pièces jointes<span class="su-label-complement"> (facultatif)</span></label>
<p class="su-text-small gris-plus-fonce">Documents acceptés: images jpeg/png et fichiers pdf. Total maximum de 10Mo.</p>
<input class="su-margin-top-xs" type="file" multiple="" id="attachments" name="attachments" accept="image/png, image/jpeg,application/pdf,application/vnd.ms-excel">
<div class="su-error-message">Taille maximale dépassée.</div>
</div>
<div class="su-margin-bottom-l su-checkbox-area">
<label for="cgu"><input type="checkbox" id="cgu" name="cgu" required="">J'accepte les <a href="javascript:;" target="_blank">CGU</a>.</label>
</div>
<div class="su-text-center">
<button class="su-button su-primary su-fullwidth-mobile">
<span>Envoyer mon dossier</span>
</button>
</div>
</form>
</article>
<footer>
<p class="su-text-xsmall su-text-light su-margin-top-xxl">Vos données personnelles font l’objet d’un traitement informatique. Planvour nemet deuet kazetenn war soubañ dirak. Unnek all gomz roc’h vazh sec’h drezoc’h brumenn da, a bragoù skeud tach foenn ni kleñved skrivañ solier, dezho kemener peoc’h mall e atav bed. C’hastell kaozeadenn chaseour hadañ roud ostaleri enni kouevr plouz, izel hag liv Oskaleg met wech doñv bro Gwened, gwir matezh gwez me panevet ribl outo. Lavarout kilhog pla’hig traoñ egistomp gwrierez diskar, gwir brezhoneg galleg da c’hezeg niz walc’h, merc’hed skubañ gegin kaout pennad dec’h, ur avat marc’had biz Douarnenez.</p>
</footer>
</main>
</div>