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.

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

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 : https://www.nonoweb.net/phpmyform-champ-de-type-text