Champ de type « text »
<input name="field_name" id="field_name" type="text" ... />
Le code HTML est indiqué pour information. Il est généré automatiquement par le script phpMyForm.
Attributs
Description des divers attributs possibles pour le champ de type text.
Seul l'attribut field_type est requis.
Note : Si les autres attributs ne sont pas définis, la valeur défaut est prise en compte.
field_type
[field_name]
field_type=text
...
Ces deux lignes du fichier form_definition.ini sont les seules requises.
hidden
[field_name]
field_type=text
hidden=toto
Champ de type hidden ayant pour valeur toto.
Note : Quelques soient les autres attributs de définis (sauf field_type requis), ils seront ignorés.
<input type="hidden" value="toto" name="field_name" id="field_name"/>
mod
[field_name]
...
;valeur défaut : default
mod=group_start
Valeurs possibles :
- default
- group_start
- group_start_end
- group_inside
- group_end
- switch (field_type : checkbox, radio, select)
- group_switch_start
- group_switch_start_end
default
[field_name]
...
;Valeur défaut du champ.
default=value default
Affiche un bouton qui permet restaurer la valeur par défaut (si définie).
label
[field_name]
...
label=Texte du label
Texte affiché dans partie gauche (*)
Uniquement avec mod :
- default
- switch
- group_start
(*) Voir les différentes options (col_label et pos_label) d'affichage du label : Définition formulaire
heading_group
[field_name]
...
heading_group=Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Texte affiché au dessus du 1er champ d'un groupe.
Uniquement avec mod :
- group_start
- group_start_end
- group_switch_start
- group_switch_start_end
group_marge
[field_name]
...
;syntaxe CSS
group_marge=30px
Marge gauche d'un groupe de champs commutable.
Uniquement avec mod :
- group_switch_start
- group_switch_start_end
text_before_data
[field_name]
...
text_before_data=Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Texte affiché en haut du bloc data.
Uniquement avec mod :
- default
- switch
- group_start
text_after_data
[field_name]
...
text_after_data=Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Texte affiché en bas du bloc data.
Uniquement avec mod :
- default
- group_switch_start_end
- group_end
text_top
[field_name]
...
text_top=Texte affiché au dessus du champ
text_before
[field_name]
...
text_before=Texte affiché devant le champ
text_after
[field_name]
...
text_after=Texte affiché après le champ
text_bottom
[field_name]
...
text_bottom=Texte affiché au-dessous du champ
image
[field_name]
...
;Affichée devant le champ.
image=my_image.png
- extension : png, gif, jpg, ...
- Dimension : 24px × 24px
- Dans le dossier : phpMyForm/form/form_name/images/24x24
title
[field_name]
...
title=Lorem ipsum dolor sit amet
<input title="Lorem ipsum dolor sit amet" name="field_name" id="field_name" ... />
width
[field_name]
...
;syntaxe CSS
width=100px
<input style="width:100px;" name="field_name" id="field_name" ... />
class
[field_name]
...
;Un (ou plusieurs) nom(s) de class.
;Si plusieurs class, les séparer par un espace.
class=class1 class2
<input class="class1 class2" name="field_name" id="field_name" ... />
style
[field_name]
...
;syntaxe CSS
style="border: 1px solid green; background-color: red;"
Le ; est obligatoire à la fin (en cas d'ajout de style par le script).
<input style="border: 1px solid green; background-color: red;" name="field_name" id="field_name" ... />
minlength
[field_name]
...
minlength=3
Utilisé avec jQuery Validation Plugin ou validation HTML5.
<input minlength="3" name="field_name" id="field_name" ... />
maxlength
[field_name]
...
maxlength=5
<input maxlength="5" name="field_name" id="field_name" ... />
size
[field_name]
...
;défaut : 20
size=10
<input size="10" name="field_name" id="field_name" ... />
rangelength
[field_name]
...
;Les [ ] seront ajoutés automatiquement.
rangelength=3,5
Utilisé avec jQuery Validation Plugin.
<input rangelength="[3,5]" name="field_name" id="field_name" ... />
readonly
[field_name]
...
;défaut : 0
readonly=1
<input readonly="readonly" name="field_name" id="field_name" ... />
autofocus
[field_name]
...
;défaut : 0
autofocus=1
<input autofocus name="field_name" id="field_name" ... />
autocomplete
[field_name]
...
;défaut : on
autocomplete=off
<input autocomplete="off" name="field_name" id="field_name" ... />
placeholder
[field_name]
...
placeholder=Entrer une valeur
<input placeholder="Entrer une valeur" name="field_name" id="field_name" ... />
pattern
[field_name]
...
pattern="^([a-zA-Z0-9]{3,8})$"
<input pattern="^([a-zA-Z0-9]{3,8})$" name="field_name" id="field_name" ... />
custom
[field_name]
...
;défaut : 0
custom=1
Utilisé avec les champs personnalisés select et radio.
required
[field_name]
...
;défaut : 0
required=1
<input required name="field_name" id="field_name" ... />
function
[field_name]
...
;fonction PHP
function=my_function
- Fonction appliquée sur la valeur de field_name.
- Nom de la fonction sans ().
- Fonction php autorisée (ex. strtoupper).
- La fonction doit être définie, sinon une erreur sera affichée.
mask, mask_custom, mask_definitions, mask_placeholder
;Utilisation du plugin jQuery Masked Input Plugin
[field_name1]
...
;Exemple : format date
mask=99/99/9999
mask_placeholder="jj/mm/aaaa"
...
[field_name2]
...
;Exemple : format couleur HTML Hex
mask=#xxxxxx
mask_custom=x
mask_definitions="[A-Fa-f0-9]"
...
Voir l'article Utilisation de Masked Input Plugin dans phpMyForm
rules
Définition des règles de validation du formulaire : Règles de validation
txt_options
Valeur de la forme opt=option¶m1=value1¶m2=value2 ...
- option est obligatoire.
- Les paramètres param1, param2, ... sont optionnels.
Les différentes valeurs de l'attribut txt_options
Sélecteur de couleur
Utilisation du script jscolor.
[field_name]
...
txt_options="opt=jscolor&width=300&height=150"
Paramètres optionnels :
- width : largeur de la fenêtre jscolor (défaut 220px).
- height : largeur de la fenêtre jscolor (défaut 140px).
Sélecteur de couleur (type color HTML5)
[field_name]
...
txt_options="opt=color&show_value=1&width=70px"
Paramètres optionnels :
- show_value : Affiche un champ text avec la valeur (HTML #999999) de la couleur (valeur défaut 0).
- width : largeur du champ text contenant la valeur (défaut navigateur).
<input type="color" name="field_name" id="field_name" ... />
<!-- show_value = 1 -->
<input id="field_name_color_value" type="text" ... />
Type number HTML5
[field_name]
...
txt_options="opt=number&min=5&max=50&step=5"
Paramètres optionnels :
- min : valeur minimum.
- max : valeur maximum.
- step : pas (défaut 1).
<input type="number" min="5" max="50" step="5" name="field_name" id="field_name" ... />
Type range HTML5
[field_name]
...
txt_options="opt=range&min=2&max=100&step=2&show_value=1&width=50px"
Paramètres optionnels :
- min : valeur minimum (défaut 0).
- max : valeur maximum (défaut 100).
- step : pas (défaut 1).
- show_value : Affiche un champ text avec la valeur (défaut 0).
- width : largeur du champ text contenant la valeur (défaut navigateur).
<input type="range" min="2" max="100" step="2" name="field_name" id="field_name" ... />
Input list HTML5
[field_name]
...
txt_options="opt=datalist&ini=my_file"
Paramètres optionnels :
- Nom fichier ini sans extension contenant les options (défaut : field_name.ini).
- Fichier ini dans le dossier : phpMyForm/form/form_name/ini.
Structure du fichier ini :
[list]
option[]=option 1
option[]=option 2
option[]=option 3
option[]=option 4
option[]=option 5
...
Valeur de l'attribut list de la forme : list_field_name
<input list="list_field_name" name="field_name" id="field_name" ... />
Type email HTML5
[field_name]
...
txt_options="opt=email&multiple=1"
Paramètres optionnels :
- multiple : Permet de saisir plusieurs adresses email séparées par une virgule (défaut 0).
<input type="email" multiple="multiple" name="field_name" id="field_name" ... />
Exemple de formulaire de contact
Type url HTML5
[field_name]
...
txt_options="opt=url"
<input type="url" name="field_name" id="field_name" ... />
Type password
[field_name]
...
txt_options="opt=password&unmask=1&show_empty=0"
Paramètres optionnels :
- unmask : Affiche un bouton qui permet de voir un instant le mot de passe.
- show_empty : N'affiche pas le bouton quand le champ est vide. (défaut 1).
<input type="password" name="field_name" id="field_name" ... />
Exemple dans un formulaire d'inscription
Type search HTML5
[field_name]
...
txt_options="opt=search"
<input type="search" name="field_name" id="field_name" ... />
Type date HTML5
[field_name]
...
txt_options="opt=date&min=2011-08-13&max=2012-06-25"
Paramètres optionnels :
- min : valeur minimum (iso YYYY-MM-DD).
- max : valeur maximum (iso YYYY-MM-DD).
<input type="date" min="2011-08-13" max="2012-06-25" name="field_name" id="field_name" ... />
Le résultat de la soumission sera au format ISO : YYYY-MM-DD
Type month HTML5
[field_name]
...
txt_options="opt=month&min=2015-10&max=2016-06"
Paramètres optionnels :
min : valeur minimum (YYYY-MM)
max : valeur maximum (YYYY-MM)
<input type="month" min="2015-10" max="2016-06" name="field_name" id="field_name" ... />
Type week HTML5
[field_name]
...
txt_options="opt=week&min=2015-W50&max=2016-W03"
Paramètres optionnels :
- min : valeur minimum (YYYY-W99)
- max : valeur maximum (YYYY-W99)
<input type="week" min="2015-W50" max="2016-W03" name="field_name" id="field_name" ... />
Type time HTML5
[field_name]
...
txt_options="opt=time&min=08:00&max=15:30"
Paramètres optionnels :
- min : valeur minimum (HH:MM)
- max : valeur maximum (HH:MM)
<input type="time" min="08:00" max="15:30" name="field_name" id="field_name" ... />