Browse Source

Refacto du formulaire d’exempe, étape 1. Au lieu de mettre pleins d’exemples en vracs et parfois en doublons, on réorganise en plusieurs thématiques : éléments de formulaire, types d’inputs, obligations et états, variantes d’affichage, messages et fieldsets imbriqués. Reste à mettre des explication et exemples de code, et faire le ménage dans les chaînes de langue. Plus besoin de montrer le form avec la structure historique à priori, puisque rigoureusement identique à part le ul / li, mais les classes sont les mêmes donc aucune différence.

pull/4/head
tcharlss 1 year ago committed by Cerdic
parent
commit
cd6aa50a02
  1. 397
      formulaires/charter.html
  2. 7
      formulaires/charter.php
  3. 70
      lang/charter_fr.php
  4. 8
      prive/squelettes/contenu/charte_forms.html
  5. 2
      prive/squelettes/navigation/charte_forms.html
  6. 3
      prive/style_prive_plugin_dev.html

397
formulaires/charter.html

@ -18,189 +18,344 @@
[(#REM) déclarer les hidden qui déclencheront le service du formulaire
paramêtre : url d'action ]
#ACTION_FORMULAIRE
#SET{fl,charter}
<p class="explication">Des explications préliminaires, en début de formulaire</p>
<fieldset>
<legend><:charter:legend:></legend>
<p class="explication">Des explications dans un fieldset</p>
<div class="editer-groupe">
<!--EX01-->
#SET{name,text}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!--EX02-->
#SET{name,select}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<select name="#GET{name}" class="select" id="#GET{name}">
#SET{val,oui}
<option value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)selected="selected"]>[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</option>
#SET{val,non}
<option value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)selected="selected"]>[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</option>
</select>
</div>
<!--EX03-->
#SET{name,text_obli}#SET{obli,'obligatoire'}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</div>
</fieldset>
<p class="explication">Des explications préliminaires en début de formulaire</p>
[(#REM) Éléments de formulaire ]
<fieldset>
<legend><:charter:legend:></legend>
<legend><:charter:label_fieldset_elements:></legend>
<div class="editer-groupe">
<!--EX04-->
#SET{name,text}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- input text -->
#SET{name,input_text}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
<p class="explication" id="#GET{name}_explication">Des explications au dessus d'un champ de saisie</p>
<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!--EX05-->
#SET{name,text_obli}#SET{obli,'obligatoire'}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- textarea -->
#SET{name,textarea}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
<p class="explication" id="#GET{name}_explication">Des explications après un champ de saisie</p>
]<textarea name="#GET{name}" id="#GET{id}" class="textarea" rows="2">
#ENV*{#GET{name},#GET{defaut}}</textarea>
</div>
<!--EX06-->
#SET{name,textarea}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!--select unique-->
#SET{name,select}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<textarea name="#GET{name}" id="#GET{name}" class="textarea" rows="2">
#ENV*{#GET{name},#GET{defaut}}</textarea>
</div>
<!--EX07-->
#SET{name,textarea_pleine_largeur}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer pleine_largeur editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<textarea name="#GET{name}" id="#GET{name}" class="textarea" rows="4">
#ENV*{#GET{name},#GET{defaut}}</textarea>
</div>
#SET{name,textarea_pleine_largeur_obli}#SET{obli,'obligatoire'}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer pleine_largeur editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<textarea name="#GET{name}" id="#GET{name}" class="textarea" rows="6">
#ENV*{#GET{name},#GET{defaut}}</textarea>
]<select name="#GET{name}" class="select" id="#GET{id}">
#SET{val,oui}
<option value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)selected="selected"]><:charter:label_valeur_oui_long:></option>
#SET{val,non}
<option value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)selected="selected"]><:charter:label_valeur_non_long:></option>
</select>
</div>
<!--EX08-->
#SET{name,text_long_label}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<div class="editer long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<!--select multiple-->
#SET{name,select_multiple}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
]<select multiple name="#GET{name}\[\]" class="select" id="#GET{id}">
#SET{val,option1}
<option value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)selected="selected"]><:charter:label_valeur_option_1:></option>
#SET{val,option2}
<option value="#GET{val}"[(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)selected="selected"]><:charter:label_valeur_option_2:></option>
</select>
</div>
<!--EX09-->
#SET{name,radio}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- radio -->
#SET{name,radio}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<fieldset class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<legend class="label">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</legend>[
<legend class="label">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</legend>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
<p class="explication" id="#GET{name}_explication">Des explications au-dessus d'un choix</p>
#SET{val,oui}
#SET{val,option1}
<div class="choix">
<input type="radio" name="#GET{name}" class="radio" id="#GET{name}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
<input type="radio" name="#GET{name}" class="radio" id="#GET{id}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{id}_#GET{val}"><:charter:label_valeur_option_1:></label>
</div>
#SET{val,non}
#SET{val,option2}
<div class="choix">
<input type="radio" name="#GET{name}" class="radio" id="#GET{name}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
<input type="radio" name="#GET{name}" class="radio" id="#GET{id}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{id}_#GET{val}"><:charter:label_valeur_option_2:></label>
</div>
</fieldset>
<!--EX09b-->
#SET{name,checkbox_ouiounon}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- Checkbox unique -->
#SET{name,checkbox_ouiounon}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<fieldset class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<legend class="label">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</legend>[
<legend class="label" for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</legend>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
<p class="explication" id="#GET{name}_explication">Des explications au-dessus d'un choix</p>
<div class="choix">
#SET{val,non}
<input type="hidden" name="#GET{name}" value="#GET{val}" />
#SET{val,oui}
<input type="checkbox" name="#GET{name}" class="checkbox" id="#GET{name}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
<input type="checkbox" name="#GET{name}" class="checkbox" id="#GET{id}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#ENV{#GET{name},#GET{defaut}}|=={#GET{val}}|oui)checked="checked"] />
<label for="#GET{id}_#GET{val}"><:charter:label_valeur_option_activer:></label>
</div>
</fieldset>
<!--EX10-->
#SET{name,checkbox}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- Checkbox multiple -->
#SET{name,checkbox}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<fieldset class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<legend class="label">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</legend>[
<legend class="label">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</legend>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
#SET{val,1}
<div class="choix">
<input type="checkbox" name="#GET{name}\[\]" class="checkbox" id="#GET{name}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#GET{val}|in_any{#ENV{#GET{name},#GET{defaut}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
<input type="checkbox" name="#GET{name}\[\]" class="checkbox" id="#GET{id}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#GET{val}|in_any{#ENV{#GET{name},#GET{defaut}}}|oui)checked="checked"] />
<label for="#GET{id}_#GET{val}"><:charter:label_valeur_choix_1:></label>
</div>
#SET{val,2}
<div class="choix">
<input type="checkbox" name="#GET{name}\[\]" class="checkbox" id="#GET{name}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#GET{val}|in_any{#ENV{#GET{name},#GET{defaut}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
<input type="checkbox" name="#GET{name}\[\]" class="checkbox" id="#GET{id}_#GET{val}" value="#GET{val}" aria-describedby="#GET{name}_explication" [(#GET{val}|in_any{#ENV{#GET{name},#GET{defaut}}}|oui)checked="checked"] />
<label for="#GET{id}_#GET{val}"><:charter:label_valeur_choix_2:></label>
</div>
<p class="explication" id="#GET{name}_explication">Des explications au-dessous d'un choix</p>
</fieldset>
<!--EX11-->
#SET{name,checkbox_long_label}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<fieldset class="editer long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<legend class="label">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</legend>[
</div>
</fieldset>
[(#REM) Types d’inputs ]
<fieldset>
<legend><:charter:label_fieldset_types:></legend>
<div class="editer-groupe">
#SET{inputs_text,#LISTE{date,number,email,phone,color,search,password}}
#SET{inputs_autres,#LISTE{file}}
#SET{inputs_tous,#GET{inputs_text}|array_merge{#GET{inputs_autres}}}
<BOUCLE_types_inputs(DATA) {source table, #GET{inputs_tous}}>
<!-- input #VALEUR -->
#SET{name,input_#VALEUR}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]
#SET{val,1}
<div class="choix">
<input type="checkbox" name="#GET{name}\[\]" class="checkbox" id="#GET{name}_#GET{val}" value="#GET{val}"[(#GET{val}|in_any{#ENV{#GET{name},#GET{defaut}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
</div>
#SET{val,2}
<div class="choix">
<input type="checkbox" name="#GET{name}\[\]" class="checkbox" id="#GET{name}_#GET{val}" value="#GET{val}"[(#GET{val}|in_any{#ENV{#GET{name},#GET{defaut}}}|oui)checked="checked"] />
<label for="#GET{name}_#GET{val}">[(#GET{fl}|concat{':label_',#GET{name},'_',#GET{val}}|_T)]</label>
]<input type="#VALEUR" name="#GET{name}" class="[(#VALEUR|in_array{#GET{inputs_text}}|oui)text text_#VALEUR ]#VALEUR" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</BOUCLE_types_inputs>
</div>
</fieldset>
[(#REM) Obligation et états ]
<fieldset>
<legend><:charter:label_fieldset_etats:></legend>
<div class="editer-groupe">
<!-- Obligatoire -->
#SET{name,saisie_obli}#SET{obli,obligatoire}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!-- Disabled -->
#SET{name,saisie_disabled}#SET{obli,''}[(#SET{defaut,<:charter:label_valeur_disabled|attribut_html:>})]#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" disabled="disabled" class="text disabled" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required'] />
</div>
<!-- Readonly -->
#SET{name,saisie_readonly}#SET{obli,''}[(#SET{defaut,<:charter:label_valeur_readonly|attribut_html:>})]#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" readonly="readonly" class="text readonly" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required'] />
</div>
<!-- En erreur -->
#SET{name,saisie_erreur}#SET{obli,''}#SET{defaut,''}[(#SET{erreurs,<:charter:label_saisie_erreur_message:>})]#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required'] />
</div>
</div>
</fieldset>
[(#REM) Modes d'affichages ]
<fieldset>
<legend><:charter:label_fieldset_affichages:></legend>
<div class="editer-groupe">
<!-- Label long -->
#SET{name,text_long_label}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer long_label editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!-- Pleine largeur -->
#SET{name,textarea_pleine_largeur}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer pleine_largeur editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<textarea name="#GET{name}" id="#GET{id}" class="textarea" rows="3">#ENV*{#GET{name},#GET{defaut}}</textarea>
</div>
<!-- Barre édition -->
[(#REM)
#SET{name,textarea_barre_edition}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer pleine_largeur editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">[(#VAL{charter:label_}|concat{#GET{name}}|_T)]</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<div class="edition">
<textarea name="#GET{name}" id="#GET{id}" class="textarea inserer_barre_edition" rows="3">#ENV*{#GET{name},#GET{defaut}}</textarea>
</div>
</fieldset>
</div>
]
</div>
<!-- 2 colonnes -->
<div class="editer-groupe deux_colonnes">
#SET{name,2cols1}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}"><:charter:label_input_text:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
#SET{name,2cols2}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}"><:charter:label_input_text:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</div>
</fieldset>
[(#REM) Messages d'explication ]
<fieldset>
<legend><:charter:label_fieldset_messages:></legend>
<p class="attention">Un message plus important que l’explication.</p>
<p class="explication">Des explications avant les champs.</p>
<div class="editer-groupe">
<!-- Explication avant -->
#SET{name,explication_avant}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}"><:charter:label_explication_avant:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<p class="explication" id="#GET{name}_explication">Des explications dessus un champ de saisie.</p>
<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!-- Explication après -->
#SET{name,explication_apres}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}"><:charter:label_explication_apres:></label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
<p class="explication" id="#GET{name}_explication">Des explications dessous un champ de saisie.</p>
</div>
</div>
<p class="explication">Des explications après les champs.</p>
</fieldset>
[(#REM) Fieldsets ]
<fieldset>
<legend>Groupes de champs imbriqués</legend>
<div class="editer-groupe">
<!-- Input 1er niveau -->
#SET{name,niveau1_1}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">Saisie groupe racine</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!-- Input 1er niveau -->
#SET{name,niveau1_2}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">Saisie groupe racine</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
[(#REM) Fieldset 2ème niveau ]
<div class="fieldset">
<fieldset>
<legend><:charter:legend:></legend>
<legend>Sous-groupe de champs</legend>
<div class="editer-groupe">
<!--EX12-->
#SET{name,text}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- Input 2ème niveau -->
#SET{name,niveau2_1}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<label for="#GET{id}">Saisie sous-groupe</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!--EX13-->
#SET{name,text_obli}#SET{obli,'obligatoire'}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs}|table_valeur{#GET{name}}}
<!-- Input 2ème niveau -->
#SET{name,niveau2_2}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{name}">[(#GET{fl}|concat{':label_',#GET{name}}|_T)]</label>[
<label for="#GET{id}">Saisie sous-groupe</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{name}" [(#HTML5|et{#GET{obli}})required='required']/>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</div>
</fieldset>
</div>
<!-- Input 1er niveau après fieldset -->
#SET{name,niveau1_3}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">Saisie groupe racine</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
<!-- Input 1er niveau après fieldset -->
#SET{name,niveau1_4}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">Saisie groupe racine</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</div>
</fieldset>
<!-- Input 1er niveau après fieldset -->
<div class="editer-groupe">
#SET{name,niveau1_5}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">Saisie <strong>après</strong> le groupe racine</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</div>
<!-- Input 1er niveau après fieldset -->
<div class="editer-groupe">
#SET{name,niveau1_6}#SET{obli,''}#SET{defaut,''}#SET{erreurs,#ENV**{erreurs/#GET{name}}}#SET{id,#GET{name}|concat{#ENV{suffixe}}}
<div class="editer editer_[(#GET{name})][ (#GET{obli})][ (#GET{erreurs}|oui)erreur]">
<label for="#GET{id}">Saisie <strong>après</strong> le groupe racine</label>[
<span class='erreur_message'>(#GET{erreurs})</span>
]<input type="text" name="#GET{name}" class="text" value="#ENV*{#GET{name},#GET{defaut}}" id="#GET{id}" aria-describedby="#GET{name}_explication" [(#HTML5|et{#GET{obli}})required='required']/>
</div>
</div>
[(#REM) ajouter les saisies supplémentaires : extra et autre, à cet endroit ]
<!--extra-->
<p class="explication">Cliquez sur <q>Annuler</q> pour tester les messages d'erreur et sur <q>Enregistrer</q> pour tester les messages de succès.</p>
<p class='boutons'><span class='image_loading'>&nbsp;</span>
<input type='submit' name="cancel" class='submit btn_secondaire' value='<:bouton_annuler|attribut_html:>' />
<input type='submit' class='submit' value='<:bouton_enregistrer|attribut_html:>' /></p>
<input type='submit' class='submit' value='<:bouton_enregistrer|attribut_html:>' />
</p>
</div></form>
]
[(#ENV{editable}|non)

7
formulaires/charter.php

@ -6,7 +6,7 @@ if (!defined('_ECRIRE_INC_VERSION')) return;
* Chargement des valeurs
* @return array
*/
function formulaires_charter_charger_dist() {
function formulaires_charter_charger_dist(string $suffixe = '') {
$valeurs = array(
'text' => '',
@ -17,6 +17,7 @@ function formulaires_charter_charger_dist() {
'radio' => 'non',
'checkbox' => array(1),
'checkbox_long_label' => array(1,2),
'suffixe' => $suffixe,
);
return $valeurs;
@ -27,7 +28,7 @@ function formulaires_charter_charger_dist() {
* on simule des erreurs si on a clique sur annuler
* @return array
*/
function formulaires_charter_verifier_dist() {
function formulaires_charter_verifier_dist(string $suffixe = '') {
$erreurs = array();
if (_request('cancel')){
$erreurs['message_erreur'] = ('Un long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur, long message d\'erreur...');
@ -48,6 +49,6 @@ function formulaires_charter_verifier_dist() {
/**
* Traitement de la saisie
*/
function formulaires_charter_traiter_dist() {
function formulaires_charter_traiter_dist(string $suffixe = '') {
return array('message_ok' => ('Bravo, c\'est une reussite !'));
}

70
lang/charter_fr.php

@ -8,27 +8,57 @@ if (!defined('_ECRIRE_INC_VERSION')) {
$GLOBALS[$GLOBALS['idx_lang']] = array(
// L
'label_checkbox' => 'Un choix multiple',
'label_checkbox_1' => 'Un premier choix',
'label_checkbox_2' => 'Un deuxième choix',
'label_checkbox_long_label' => 'Un choix multiple avec un très très long label qui utilise une class <tt>.long_label</tt>',
'label_checkbox_long_label_1' => 'Un premier choix',
'label_checkbox_long_label_2' => 'Un deuxième choix',
'label_checkbox_ouiounon' => 'Un choix unique a cocher',
'label_checkbox_ouiounon_oui' => 'Oui',
'label_radio' => 'Un choix unique',
'label_radio_non' => 'Non',
'label_radio_oui' => 'Oui',
'label_select' => 'Une saisie sous forme de select',
'label_select_non' => 'Non merci, pas du tout',
'label_select_oui' => 'C’est cela, OUI',
'label_text' => 'Une saisie en text',
'label_text_long_label' => 'Une saisie avec un très très long label qui utilise une class <tt>.long_label</tt>',
'label_text_obli' => 'Une saisie obligatoire',
'label_textarea' => 'Une saisie en bloc',
'label_textarea_pleine_largeur' => 'Une saisie en bloc en <tt>.pleine_largeur</tt>',
'label_textarea_pleine_largeur_obli' => 'Une saisie obligatoire en bloc en <tt>.pleine_largeur</tt>',
'label_checkbox' => 'Choix multiples à cocher',
'label_checkbox_long_label' => 'Choix multiple avec un très très long label qui utilise une class <tt>.long_label</tt>',
'label_checkbox_ouiounon' => 'Choix unique a cocher',
'label_radio' => 'Choix unique',
'label_select' => 'Sélection unique',
'label_select_multiple' => 'Selection multiple',
'label_input_text' => 'Saisie de texte',
'label_input_number' => 'Nombre',
'label_input_date' => 'Date',
'label_input_search' => 'Recherche',
'label_input_email' => 'Email',
'label_input_phone' => 'Numéro de téléphone',
'label_input_color' => 'Couleur',
'label_input_file' => 'Fichier',
'label_input_password' => 'Mot de passe',
'label_textarea' => 'Texte en bloc',
'label_textarea_barre_edition' => 'Texte en bloc avec la barre d’édition',
'label_text_long_label' => 'Saisie avec un très très long label qui utilise une class <tt>.long_label</tt>',
'label_saisie_obli' => 'Saisie obligatoire',
'label_saisie_disabled' => 'Saisie désactivée',
'label_saisie_readonly' => 'Saisie en lecture seule',
'label_saisie_erreur' => 'Saisie en erreur',
'label_saisie_erreur_message' => 'Message d’explication de l’erreur.',
'label_textarea_pleine_largeur' => 'Saisie en <tt>.pleine_largeur</tt>',
'label_explication_avant' => 'Saisie avec explication dessus',
'label_explication_apres' => 'Saisie avec explication dessous',
'legend' => 'Légende d’un fieldset, pour un groupe de saisie',
'label_valeur_option_1' => 'Option n°1',
'label_valeur_option_2' => 'Option n°2',
'label_valeur_option_3' => 'Option n°3',
'label_valeur_option_activer' => 'Activer cette option',
'label_valeur_non_long' => 'Non merci, pas du tout',
'label_valeur_non' => 'Non',
'label_valeur_oui_long' => 'C’est cela, OUI',
'label_valeur_oui' => 'Oui',
'label_valeur_choix_1' => 'Un premier choix',
'label_valeur_choix_2' => 'Un deuxième choix',
'label_valeur_choix_3' => 'Un troisième choix',
'label_valeur_readonly' => 'Valeur non modifiable',
'label_valeur_disabled' => 'Valeur non postée',
'label_form_input' => '<input>',
'label_form_textarea' => '<textarea>',
'label_from_select' => '<select>',
'label_form_radio' => '<radio>',
'label_form_checkbox' => '<checkbox>',
'label_fieldset_elements' => 'Éléments de formulaires',
'label_fieldset_types' => 'Types d’inputs',
'label_fieldset_etats' => 'Saisies obligatoires et états',
'label_fieldset_affichages' => 'Variantes d’affichages',
'label_fieldset_messages' => 'Messages & explications',
'label_fieldset_groupes' => 'Groupes de champs',
// T
'titre_barreonglets_demo1' => 'Page 1',

8
prive/squelettes/contenu/charte_forms.html

@ -2,8 +2,14 @@
<p>Nb &ndash; Voir également la page spécifique aux <a href="[(#URL_ECRIRE{charte_boutons}|ancre_url{boutons_formulaires})]">boutons de formulaires</a></p>
<p class="explication">Cliquez sur <q>Annuler</q> pour tester les messages d'erreur et sur <q>Enregistrer</q> pour tester les messages de succès.</p>
[(#REM)
<h2>Formulaire structure recommandée</h2>
]
#FORMULAIRE_CHARTER
[(#REM)
<h2>Formulaire structure ul/li historique</h2>
#FORMULAIRE_CHARTER_COMPAT
#FORMULAIRE_CHARTER_COMPAT
]

2
prive/squelettes/navigation/charte_forms.html

@ -3,4 +3,4 @@
Rendu du même formulaire en colonne latérale.
</p>
#FORMULAIRE_CHARTER
#FORMULAIRE_CHARTER{lat}

3
prive/style_prive_plugin_dev.html

@ -22,7 +22,8 @@
* - sans : pre.pre_code
*/
/* code inline */
[class^=charte_] code {
[class^=charte_] code,
[class^=charte_] tt {
font-size: 0.9em;
color: #d63384;
}

Loading…
Cancel
Save