source: spip-zone/_plugins_/basecss/modeles/charte_form.html @ 47034

Last change on this file since 47034 was 47034, checked in by romy@…, 10 years ago

Une page de démo pour styler les formulaires

File size: 8.4 KB
Line 
1<h2>Éléments HTML des formulaires</h2>
2
3<p>Les formulaires sont constitués de différents éléments HTML (<code>fieldset</code>, <code>legend</code>, <code>label</code>, <code>input</code>, <code>textarea</code>, etc.), dont voici un échantillon.</p>
4
5<div class="formulaire_spip">
6        <form action="#" method="post">
7                <fieldset>
8                        <legend>Lettre d'information</legend>
9                        <p>Abonnez-vous pour rester informé(e) : vous recrevrez nos dernières nouveautés par courrier électronique.</p>
10                        <ul>
11                                <li class="courriel obligatoire">
12                                        <label for="courriel">Courriel<em> (Obligatoire)</em></label>
13                                        <input type="text" class="text" name="courriel" id="courriel" value="adresse@email.fr" />
14                                </li>
15                        </ul>
16                </fieldset>
17                <fieldset>
18                        <legend>Informations personnelles</legend>
19                        <ul>
20                                <li class="editer_civilite">
21                                        <fieldset>
22                                                <legend>Civilité</legend>
23                                                <ul>
24                                                        <li>
25                                                                <input type="radio" class="radio" name="civilite" id="monsieur" value="Monsieur" checked="checked" />
26                                                                <label for="monsieur">Monsieur</label>
27                                                        </li>
28                                                        <li>
29                                                                <input type="radio" class="radio" name="civilite" id="madame" value="Madame" />
30                                                                <label for="madame">Madame</label>
31                                                        </li>
32                                                </ul>
33                                        </fieldset>
34                                </li>
35                                <li class="nom">
36                                        <label for="nom">Nom</label>
37                                        <input type="text" class="text" name="nom" id="nom" value="" />
38                                </li>
39                                <li class="prenom erreur">
40                                        <label for="prenom">Prénom</label>
41                                        <input type="text" class="text" name="prenom" id="prenom" value="06 82 30 96 16" />
42                                        <p class="erreur_message">Le prénom ne doit pas contenir de chiffres !</p>
43                                </li>
44                                <li class="date">
45                                        <fieldset>
46                                                <legend>Date de naissance</legend>
47                                                <ul>
48                                                        <li class="date_naissance_jour">
49                                                                <label for="date_naissance_jour">Jour de naissance</label>
50                                                                <select name="date_naissance_jour" id="date_naissance_jour">
51                                                                        <option label="01" value="01">01</option>
52                                                                        <option label="02" value="02">02</option>
53                                                                        <option label="03" value="03">03</option>
54                                                                        <option label="04" value="04">04</option>
55                                                                        <option label="05" value="05">05</option>
56                                                                        <option label="06" value="06">06</option>
57                                                                        <option label="07" value="07">07</option>
58                                                                        <option label="08" value="08">08</option>
59                                                                        <option label="09" value="09">09</option>
60                                                                        <option label="10" value="10">10</option>
61                                                                        <option label="11" value="11">11</option>
62                                                                        <option label="12" value="12">12</option>
63                                                                        <option label="13" value="13">13</option>
64                                                                        <option label="14" value="14">14</option>
65                                                                        <option label="15" value="15">15</option>
66                                                                        <option label="16" value="16">16</option>
67                                                                        <option label="17" value="17">17</option>
68                                                                        <option label="18" value="18">18</option>
69                                                                        <option label="19" value="19">19</option>
70                                                                        <option label="20" value="20">20</option>
71                                                                        <option label="21" value="21">21</option>
72                                                                        <option label="22" value="22">22</option>
73                                                                        <option label="23" value="23">23</option>
74                                                                        <option label="24" value="24">24</option>
75                                                                        <option label="25" value="25">25</option>
76                                                                        <option label="26" value="26">26</option>
77                                                                        <option label="27" value="27">27</option>
78                                                                        <option label="28" value="28">28</option>
79                                                                        <option label="29" value="29">29</option>
80                                                                        <option label="30" value="30">30</option>
81                                                                        <option label="31" value="31">31</option>
82                                                                </select>
83                                                        </li>
84                                                        <li class="date_naissance_mois">
85                                                                <label for="date_naissance_mois">Mois de naissance</label>
86                                                                <select name="date_naissance_mois" id="date_naissance_mois">
87                                                                        <option label="Janvier" value="01">Janvier</option>
88                                                                        <option label="Février" value="02">Février</option>
89                                                                        <option label="Mars" value="03">Mars</option>
90                                                                        <option label="Avril" value="04">Avril</option>
91                                                                        <option label="Mai" value="05">Mai</option>
92                                                                        <option label="Juin" value="06">Juin</option>
93                                                                        <option label="Juillet" value="07">Juillet</option>
94                                                                        <option label="Août" value="08">Août</option>
95                                                                        <option label="Septembre" value="09">Septembre</option>
96                                                                        <option label="Octobre" value="10">Octobre</option>
97                                                                        <option label="Novembre" value="11">Novembre</option>
98                                                                        <option label="Décembre" value="12">Décembre</option>
99                                                                </select>
100                                                        </li>
101                                                        <li class="date_naissance_annee">
102                                                                <label for="date_naissance_annee">Année de naissance</label>
103                                                                <input type="text" class="text" name="date_naissance_annee" id="date_naissance_annee" value="" />
104                                                        </li>
105                                                </ul>
106                                        </fieldset>
107                                </li>
108                        </ul>
109                </fieldset>
110       
111                <fieldset class="conditions_generales">
112                        <legend>Condition générales</legend>
113                        <ul>
114                                <li class="accepter_conditions">
115                                        <input type="checkbox" name="accepter_conditions" id="accepter_conditions" value="OK" />
116                                        <label for="accepter_conditions">J'ai lu et j'accepte les conditions générales du service</label>
117                                </li>
118                                <li class="accepter_spam">
119                                        <input type="checkbox" class="checkbox" name="accepter_spam" id="accepter_spam" value="OK" checked="checked" />
120                                        <label for="accepter_spam">J'autorise la divulgation de mes coordonnées à des tiers</label>
121                                </li>
122                        </ul>
123                </fieldset>
124                <p class="boutons">
125                        <input type="button" class="button" value="Me desinscrire" />
126                        <input type="submit" class="submit" value="Je m'abonne !" />
127                </p>
128        </form>
129</div>
130
131
132<h2>Réponses</h2>
133<h3>Prévisu</h3>
134
135<div class="formulaire_spip">
136        <form action="#" method="post">
137                <div>
138                        <fieldset class="previsu">
139                                <legend>Pr&eacute;visualisation</legend>
140                                <ul>
141                                        <li><strong>De</strong> : adresse@couriel.fr</li>
142                                        <li><strong>Sujet</strong> : Titre du message</li>
143                                        <li><strong>Votre message</strong>
144                                        <p>Lorem ipsum dolor sit amet, sociis aliquam arcu ut, elit nullam suspendisse, quis et nulla ut, odio turpis cras molestie etiam vel consectetuer, laoreet pede vel cum non consectetuer. Nulla tempus vitae felis ligula bibendum, taciti dui. Tellus ac mi dictum est accusantium in, vestibulum placerat. Et luctus praesent nibh. Etiam elit adipiscing dictum, nisl eu pulvinar eget dapibus nullam nulla. Dictum euismod vel. Ad lobortis quis, ultricies sollicitudin mauris, ut natoque purus, metus ipsam viverra dolor feugiat, enim donec morbi est.</p></li>
145                                </ul>
146                                <p class="boutons"><input type="submit" class="submit" name="confirmer" value="Confirmer l'envoi" /></p>
147                        </fieldset>
148                </div>
149        </form>
150</div>
151
152
153<h2>Messages de réponse</h2>
154
155<div class="reponse">Exemple de message de réponse (div sans class). Lorem ipsum dolor sit <strong>amet</strong>, consectetuer adipiscing elit. <a href="#">Link</a>.</div>
156<div class="reponse info">Exemple de message d'information (<code>div.info</code>). Lorem ipsum dolor sit <strong>amet</strong>, consectetuer adipiscing elit. <a href="#">Link</a>.</div>
157<div class="reponse success">Bravo ! Exemple de message de succès (<code>div.success</code>). Lorem ipsum dolor sit <strong>amet</strong>, consectetuer adipiscing elit. <a href="#">Link</a>.</div>
158<div class="reponse notice">Attention ! Exemple de message d'alerte (<code>div.notice</code>). Lorem ipsum dolor sit <strong>amet</strong>, consectetuer adipiscing elit. <a href="#">Link</a>.</div>
159<div class="reponse error">Oooops ! Exemple de message d'erreur (<code>div.error</code>). Les images doivent obligatoirement faire <strong>moins de 1&nbsp;Mo</strong> (ce fichier fait 2.3&nbsp;Mo). <a href="#">Link</a>.</div>
160
161<h3>Classes historiques de SPIP</h3>
162<div class="formulaire_spip">
163        <p class="reponse_formulaire">Exemple de message de réponse (<code>reponse_formulaire</code>). Lorem ipsum dolor sit <strong>amet</strong>, consectetuer adipiscing elit. <a href="#">Link</a>.</p>
164        <p class="reponse_formulaire reponse_formulaire_erreur">Exemple de message d'erreur (<code>reponse_formulaire_erreur</code>). Les images doivent obligatoirement faire <strong>moins de 1&nbsp;Mo</strong> (ce fichier fait 2.3&nbsp;Mo). <a href="#">Link</a>.</p>
165        <p class="reponse_formulaire reponse_formulaire_ok">Exemple de message de succès (<code>reponse_formulaire_ok</code>). Lorem ipsum dolor sit <strong>amet</strong>, consectetuer adipiscing elit. <a href="#">Link</a>.</p>
166</div>
167
168
169<h2>Exemples de formulaires SPIP fonctionnels</h2>
170
171#FORMULAIRE_RECHERCHE
172<hr />
173
174<BOUCLE_article(ARTICLES){id_auteur != 0}{par hasard}{0,1}>
175
176#FORMULAIRE_ECRIRE_AUTEUR
177<hr />
178
179#FORMULAIRE_FORUM
180<hr />
181
182#FORMULAIRE_INSCRIPTION
183<hr />
184
185<INCLURE{fond=formulaires/login}>
186<hr />
187
188</BOUCLE_article>
Note: See TracBrowser for help on using the repository browser.