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

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 :

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 :

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 :

mod description


group_marge

[field_name]
...
;defaut : ''
group_marge=30px

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

Uniquement avec mod :

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 :

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 :

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.


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

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

readonly W3Schools.com

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

disabled

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

disabled W3Schools.com

<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

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]
...
;defaut : ''
placeholder=Entrer une valeur

placeholder W3Schools.com

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

pattern

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


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.

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

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 :

color

Sélecteur de couleurs HTML5.

[field_name]
...
txt_options="opt=color&show_value=1&width=70px"

Paramètres optionnels :

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

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

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

list W3Schools.com

Paramètres optionnels :

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 :

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

<input type="password" name="field_name" id="field_name" ... >
[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 :

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

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

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

<input type="time" min="08:00" max="15:30" name="field_name" id="field_name" ... >

function

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

required

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

required W3Schools.com

<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

[[ERREUR shortcode: toto]]

ecrit en small : Lorem ipsum dolor sit amet, consectetur adipisicing elit et toutim

sed do eiusmod (test shortcode fa)

  1. coucou
  2. toto
  3. songina

tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Coucou (pas de shortcode)
https://fontawesome.com/v4/icons/