CRÉATION DE FORMULAIRE SIMPLIFIÉE

Commentaire de Galip le 23/09/2008 09:37:32

Comme je l'ai dit cette source m'a servi de test pour voir si c'était possible de faire facilement un formulaire qui s'aligne automatiquement.
Maintenant, je vais continuer en faisant mon moteur de template.
De plus, il est possible de mettre des hidden, radio, checkbox, tu peux spécifier le type dans le constructeur du input.

A+

PS : Si tu as compris la source tu verras qu'il est assez simple de rajouter des select, ...

Commentaire de webdeb le 23/09/2008 11:15:15

>> De plus, il est possible de mettre des hidden, radio, checkbox, tu peux spécifier le type dans le constructeur du input.

Ce n'est pas très "user friendly" comme syntaxe. Personnellement, je préfère avoir une méthode, voire même une classe, pour chaque type d'objet. Par exemple :

Une classe InputText
Une classe InputRadio
Une classe InputCheckbox
...

Chacune de ces classes dérivent d'une classe abstraite FormElement et implémente des interfaces communes (Renderable par exemple). Ainsi ton code sera beaucoup plus lisible en ayant ce genre de syntaxe :

$oForm = new Form('action','method');
$oInputTextNom = new InputText('nom');
$oInputTextNom->setLabel('Votre nom');
$oInputTextNom->setId('nom');

$oInputTextPrenom = new InputText('prenom');
$oInputTextPrenom->setLabel('Votre prénom');
$oInputTextPrenom->setId('prenom');

$oInputTextMentions = new InputCheckbox('mentions');
$oInputTextMentions->setLabel('Accepter les mentions');
$oInputTextMentions->setValue("J'accepte les mentions');
$oInputTextMentions->setChecked(false);
$oInputTextMentions->setDefaultValue('off');

$oForm->addElement($oInputTextNom);
$oForm->addElement($oInputTextPrenom);
$oForm->addElement($oInputTextMentions);

echo $oForm (appel implicite à __toString() qui appelle une méthode render() qui appelle même chaque méthode render() de chaque élément du formulaire).

C'est quand plus sympa comme syntaxe tu ne trouves pas ?

Tu peux même t'amuser à faire des retours d'instance dans tes méthodes. Tu ajoutes à la fin de tes méthodes "return $this;" pour pouvoir utiliser cette syntaxe :

$oInputTextMentions = new InputCheckbox('mentions');
$oInputTextMentions->setLabel('Accepter les mentions')->setValue("J'accepte les mentions')->setChecked(false)->setDefaultValue('off');

Ainsi tu peux chaîner les appels de méthodes sur un même objet.

++

Commentaire de neigedhiver le 23/09/2008 14:06:15

De rien.
Juste une petite remarque... Tu dis :
"L'intéret de cette source est la fonction javascript."
Est-ce que PHPCS est alors le meilleur endroit ? ;)

Puis tant que j'y suis, je viens de jeter un oeil à cette fonction JS, et j'ai une petite remarque...
Utiliser un JS pour aligner, ça ne me parait pas une très bonne idée. En fait, dans la pratique, j'ai tendance à n'utiliser JS pour ce genre de chose QUE quand je ne peux pas faire autrement... Mais avec des CSS bien foutus, ça n'arrive jamais...

Commentaire de neigedhiver le 23/09/2008 17:23:36

Bin...

Ca dépend du code HTML en fait... et de ce à quoi tu veux que ça ressemble.

Par exemple, si tu veux deux colonnes, avec à gauche le libellé du champ et à droite le champ de saisie, tu peux au choix :
- utiliser un tableau <table>, mais il faut avouer que c'est quand même assez bof...
- utiliser deux <div>

La première option étant plutôt mauvaise d'un point de vue sémantique, on va s'attarder sur la deuxième.
Un div conteneur pour chaque ligne, et dans chaque ligne, un div à gauche, un div à droite.

<div class="ligne_formulaire">
  <div class="libelle_formulaire">Pseudo : </div>
  <div class="champ_formulaire"><input type="text maxlength="255" size="30" name="pseudo" /></div>
</div>

Evidemment, on aura pris soin d'ouvrir la balise <form> plus tôt dans le code, histoire d'avoir un formulaire correctement déclaré.

Voilà pour le HTML.
Sans CSS, les deux div vont apparaitre l'un en dessous de l'autre.
Donc, dans le CSS :

.libelle_formulaire {float:left; width: 200px;} /* On fait flotter le libellé à gauche du champ */

Je pense que c'est bon, même si j'ai pas testé ce code précisément. Si ce code précis ne fonctionne pas, y'a au moins l'idée...
Après, on peut varier à volonté les classes CSS pour afficher correctement des checkbox (qui s'affichent traditionnellement l'une en dessous de l'autre, avec le texte à droite plutôt qu'à gauche), des radio, etc.