Type de champ text

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

mod description

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

mod description

(*) 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

mod description

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

mod description

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

mod description

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

mod description

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

maxlength W3Schools.com

<input maxlength="5" name="field_name" id="field_name" ... />

size

[field_name]
...
;défaut : 20
size=10

size W3Schools.com

<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

readonly W3Schools.com

<input readonly="readonly" name="field_name" id="field_name" ... />

autofocus

[field_name]
...
;défaut : 0
autofocus=1

autofocus W3Schools.com

<input autofocus name="field_name" id="field_name" ... />

autocomplete

[field_name]
...
;défaut : on
autocomplete=off

autocomplete W3Schools.com

<input autocomplete="off" name="field_name" id="field_name" ... />

placeholder

[field_name]
...
placeholder=Entrer une valeur

placeholder W3Schools.com

<input placeholder="Entrer une valeur" name="field_name" id="field_name" ... />

pattern

[field_name]
...
pattern="^([a-zA-Z0-9]{3,8})$"

pattern W3Schools.com

<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.

Voir un exemple de formulaire

required

[field_name]
...
;défaut : 0
required=1

required W3Schools.com

<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&param1=value1&param2=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"

list W3Schools.com

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" ... />