-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathregroupement.html
95 lines (87 loc) · 4.73 KB
/
regroupement.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<title>Formulaires - Regroupements de champs - Démonstrations - Guide de l'intégrateur - RGAA 3.0</title>
<link rel="stylesheet" href="../css/demo.css" media="screen">
<link rel="stylesheet" href="../css/form.css" media="screen">
<script src="../../js/highlight.pack.js"></script>
<link rel="stylesheet" href="../../css/tomorrow-night-eighties.css" media="screen">
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="form">
<header role="banner" class="main-header">
<div class="inside">
<h1>Guide de l'intégrateur</h1>
<p><a href="../../6-formulaires.md">Revenir à la fiche pratique « Formulaires »</a></p>
</div>
</header>
<div id="wrapper">
<nav role="navigation" class="nav-demo" id="nav">
<h2>Listes des démonstrations</h2>
<ul>
<li class="level"><span>Navigation</span>
<ul>
<li><a href="../2-navigation/access-rapide.html">Liens d'accès rapide</a></li>
<li><a href="../2-navigation/collection.html">Collection de pages</a></li>
<li><a href="../2-navigation/page-active.html">Indication de la page active</a></li>
</ul>
</li>
<li><a href="../5-liens/index.html">Liens</a></li>
<li class="level"><span>Formulaires</span>
<ul>
<li><a href="../6-formulaires/etiquettes.html">Étiquettes de champs</a></li>
<li><a href="../6-formulaires/aides-controles-saisie.html">Aides à la saisie</a></li>
<li><a href="../6-formulaires/regroupement.html">Regroupement de champs</a></li>
</ul>
</li>
<li><a href="../7-focus/index.html">Focus</a></li>
<li><a href="../9-images/index.html">Images</a></li>
<li><a href="../11-agrandissement-des-caracteres/index.html">Agrandissement des caractères</a></li>
</ul>
</nav>
<main role="main" id="main">
<section>
<h2 class="fiche-title">Formulaires - Regroupements de champs - Démonstrations</h2>
</section>
<article class="article" id="article1">
<div class="clear str-site">
<div class="col-1-2">
<h3 class="right">Conforme : Regroupement avec une légende</h3>
<fieldset>
<legend>Quel est le niveau légal d'accesibilité numérique ?</legend>
<p><input type="radio" name="level" id="levelA"/><label for="levelA"/>simple A</label>
<input type="radio" name="level" id="levelAA"/><label for="levelAA"/>double A</label>
<input type="radio" name="level" id="levelAAA"/><label for="levelAAA"/>triple A</label></p>
</fieldset>
<pre><code class="code html"><fieldset>
<legend>Quel est le niveau légal d'accesibilité numérique ?</legend>
<input type="radio" id="levelA"/><label for="levelA"/>simple A</label>
<input type="radio" id="levelAA"/><label for="levelAA"/>double A</label>
<input type="radio" id="levelAAA"/><label for="levelAAA"/>triple A</label>
</fieldset>
</code></pre>
</div>
<div class="col-1-2">
<h3 class="wrong">Non conforme : pas de regroupement</h3>
<p>Quel est le niveau légal d'accesibilité numérique ?</p>
<p> <input type="radio" name="level1" id="levelA1"/><label for="levelA1"/>simple A</label>
<input type="radio" name="level1" id="levelAA1"/><label for="levelAA1"/>double A</label>
<input type="radio" name="level1" id="levelAAA1"/><label for="levelAAA1"/>triple A</label></p>
<pre><code class="code html">
<p>Quel est le niveau légal d'accesibilité numérique ?</p>
<input type="radio" id="levelA"/><label for="levelA"/>simple A</label>
<input type="radio" id="levelAA"/><label for="levelAA"/>double A</label>
<input type="radio" id="levelAAA"/><label for="levelAAA"/>triple A</label></code></pre>
</div>
</div>
</article>
</main>
<footer id="footer" role="contentinfo" class="clear">
<h2>Licence d'utilisation</h2>
<p class="logo-smgap"><a href="http://references.modernisation.gouv.fr/"><img src="../img/modernisation-logo.jpg" alt="Secrétariat général pour le modernisation de l'action publique"></a></p>
<p>Ce document est la propriété du Secrétariat général à la modernisation de l'action publique français (SGMAP). Il est placé sous la <a href="https://www.etalab.gouv.fr/licence-ouverte-open-licence">licence ouverte 1.0 ou ultérieure</a>, équivalente à une licence <i lang="en">Creative Commons BY</i>. Pour indiquer la paternité, ajouter un lien vers la version originale du document disponible sur le <a href="https://github.com/DISIC">compte <span lang="en">GitHub</span> de la DInSIC</a>.</p>
</footer>
</div>
</body>
</html>