NonoWeb > phpMyForm : Champ de type

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

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.

mod

[field_name]
...
;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

hidden

[field_name]
...
;default : ''
hidden=toto

Champ de type hidden ayant pour valeur toto.

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

default

[field_name]
...
;defaut : ''
default=value default

Valeur défaut du champ.

Affiche un bouton dans le champ qui permet de restaurer la valeur par défaut (si définie).

label

[field_name]
...
;defaut : ''
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 dans les options du formulaire.

col_label

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

La colonne label ne sera pas affichée.

Si le texte de l'attribut label est défini, il sera ignoré.

A la différence de l'option col_label qui concerne tous les champs du formulaire, l'attribut col_label ne concerne que le champ courant.

heading_group

[field_name]
...
;defaut : ''
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]
...
;defaut : ''
group_marge=30px

Marge gauche (syntaxe CSS) d'un groupe de champs commutable.

Uniquement avec mod :

group_switch_start
group_switch_start_end

mod description

text_before_data

[field_name]
...
;defaut : ''
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]
...
;defaut : ''
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]
...
;defaut : ''
text_top=Texte affiché au dessus du champ

text_before

[field_name]
...
;defaut : ''
text_before=Texte affiché devant le champ

text_after

[field_name]
...
;defaut : ''
text_after=Texte affiché après le champ

text_bottom

[field_name]
...
;defaut : ''
text_bottom=Texte affiché au-dessous du champ

image

[field_name]
...
;defaut : ''
image=http://www.mon-site.com/my-image.png

Url de l'image affichée devant le champ.

Extension : png, gif, jpg, ...
Dimension maximum : 24px × 24px (L'image sera ajustée dans le cas contraire)

title

[field_name]
...
;defaut : ''
title=Lorem ipsum dolor sit amet

<input title="Lorem ipsum dolor sit amet" name="field_name" id="field_name" ... >

width

[field_name]
...
;defaut : ''
width=100px

<input style="width: 100px;" name="field_name" id="field_name" ... >

style

[field_name]
...
;defaut : ''
style="border: 1px solid blue;"

Syntaxe CSS.

Le ; est obligatoire à la fin (en cas d'ajout de style par le script).

<input style="border: 1px solid blue;" name="field_name" id="field_name" ... >

class

[field_name]
...
;defaut : ''
class=class1 class2

Si plusieurs class, les séparer par un espace.

<input class="class1 class2" name="field_name" id="field_name" ... >

minlength

[field_name]
...
;defaut : ''
minlength=3

Utilisé avec jQuery Validation Plugin ou validation HTML5.

<input minlength="3" name="field_name" id="field_name" ... >

maxlength

[field_name]
...
;defaut : ''
maxlength=5

Attribut HTML : maxlength

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

size

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

Attribut HTML : size

<input size="10" name="field_name" id="field_name" ... >

rangelength

[field_name]
...
;defaut : ''
rangelength=3,5

Utilisé avec jQuery Validation Plugin.

Les [ ] seront ajoutés automatiquement.

<input rangelength="[3,5]" name="field_name" id="field_name" ... >

readonly

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

Attribut HTML : readonly

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

disabled

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

Attribut HTML : disabled

<input disabled="disabled" name="field_name" id="field_name" ... >

empty_field

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

Le champ est vidé après la soumission du formulaire.

autofocus

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

Attribut autofocus

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

autocomplete

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

Attribut HTML : autocomplete

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

placeholder

[field_name]
...
;defaut : ''
placeholder=Entrer une valeur

Attribut HTML : placeholder

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

pattern

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

Attribut HTML : pattern

<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

misc

[field_name]
...
misc.toto=titi

Ce qu'on veut comme attribut et valeur de cet attribut.

<input toto="titi" name="field_name" id="field_name" ... >

mask

phpMyForm intègre l'utilisation du plugin jQuery Masked Input Plugin.

Ce plugin permet la saisie d'informations dans un champ text en respectant un certain format.

[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]"
...

mask

Le masque du champ.
Exemple : 99/99/9999 pour une date fr.

a : Caractères alphabétiques (A-Z a-z).
9 : Caractères numériques(0-9).
* : Caractères alphanumérique (A-Z a-z 0-9).
On peut définir des masques personnalisés. Voir mask_custom et mask_definitions.

mask_custom

Une lettre (ou signe) qui représentera les caractères du masque personnalisé défini dans mask_definitions.
Exemple : si on veut un champ de 3 caractères avec seulement les lettres a à e et les chiffres 1 à 5 on va définir les attributs comme ceci :

mask=xxx
mask_custom=x
mask_definitions=[a-e1-5]

mask_custom ne va pas sans l'attibut mask_definition, si l'un des 2 attributs est absent, cela sera sans effet.

mask_definitions

Masque personnalisé.
On définit les caractères autorisés ou pas.
Exemple : [A-F], le caractères rentré ne pourra être qu'une lettre de A à F majuscules.

mask_placeholder

Ce qu'on veut voir s'afficher lorsque qu'il y a le focus sur le champ (C'est une aide à la saisie)

Exemple : jj/mm/aaaa nous indique clairement qu'on doit taper une date de ce format (sans à avoir à taper les /).

Exemple de formulaire

txt_options

[field_name]
...
txt_options="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

jscolor

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

color

Sélecteur de couleurs 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" ... >

number

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

range

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

datalist

[field_name]
...
txt_options="opt=datalist&ini=my_file"

Attribut HTML list

Paramètres optionnels :

Nom fichier ini sans extension contenant les options (défaut : field_name.ini).
Fichier ini dans le dossier : 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" ... >
<datalist id="list_field_name">
     <option value="option 1">
     <option value="option 2">
     <option value="option 3">
     <option value="option 4">
     <option value="option 5">
     ...
</datalist>

email

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

url

[field_name]
...
txt_options="opt=url"

<input type="url" name="field_name" id="field_name" ... >

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

search

[field_name]
...
txt_options="opt=search"

<input type="search" name="field_name" id="field_name" ... >

date

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

month

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

week

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

time

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

function

[field_name]
...
;defaut : ''
function=my_function

Fonction appliquée sur la valeur de field_name avant envoie des données.
Nom de la fonction sans ().
Fonction php autorisée.
La fonction doit être définie, sinon une erreur sera affichée.

required

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

rAttribut HTML : required

<input required name="field_name" id="field_name" ... >

rules

[field_name]
...
rules.rule1.value=rule1_value
rules.rule1.message=rule1_message
rules.rule2.value=rule2_value
rules.rule2.message=rule2_message
...

Définition des règles de validation du formulaire.

Règles de validation

toto_test

Toto

C:\Users\TOTO\Desktop\phpMyForm-02-10-24\test-form

<script>
jQuery(document).ready(function($) {
	$("#close-preview").click(function(){
		window.close();
var toto ='toto\roro';
	});
});
</script>

Source : http://nonoweb.net/phpmyform-champ-de-type-text