Consultez la FAQ sur le ZF avant de poster une question
Vous n'êtes pas identifié.
Bonjour à tous,
Je suis débutant sur le framework Zend et depuis 2 jours je m'arrache les cheveux sur un problème:
je souhaite personnaliser l'affichage d'un 'group' dans les formulaires.
Actuellement, j'obtiens cela en HTML:
<fieldset> <legend></legend> </fieldset>
Mais je souhaiterai avoir:
<p> <label></label> <ul></ul> </p>
Je souhaite faire cela pour aligner plusieurs champs sur une ligne grâce au"group" pour obtenir l'HTML suivant:
<p> <label>Date</label> <ul> <li><select>...</select></li> <li><select>...</select></li> <li><select>...</select></li> </ul> </p>
---------------
Voici mon formulaire
class FormInscription extends Zend_Form { public function __construct($options = null) { /* INITIALIZE FORM FIELDS */ parent::__construct($options); $this->setName('inscription'); $this->addPrefixPath('Decorator', 'Group/Decorator', 'decorator'); $this->addElementPrefixPath('Decorator', 'Group/Decorator', 'decorator'); $this->addDisplayGroupPrefixPath('Decorator', 'Group/Decorator'); //Birth Field $day = new Zend_Form_Element_Select('day'); $day->setLabel('Date de Naissance:'); $day->class = 'date_d'; $day->addMultiOptions(range(1, 31)); //Month Field $month = new Zend_Form_Element_Select('month'); $month->addMultiOptions($months); $month->class = 'date_m'; //Year Field $year = new Zend_Form_Element_Select('year'); $year->addMultiOptions(range(date('Y'),1900,-1)); $year->class = 'date_y'; /*Ajout des Eléments*/ $this->addElements(array($day, $month, $year, $submit)); /*GROUP*/ $this->addDisplayGroup(array('day', 'month', 'year'), 'group_horizontal', array('disableLoadDefaultDecorators' => true)); $this->clearDecorators(); /*Set form Decorators*/ $this->addDecorator('FormElements') ->addDecorator('HtmlTag', array('tag' => 'div')) ->addDecorator('Form'); /*Set Elements Decorators*/ $this->setElementDecorators(array( array('ViewHelper'), array('Errors', array('tag'=>'div', 'class'=>'form_error')), array('Description', array('tag'=>'div', 'class'=>'form_description')), array('Label', array('separator'=>' ')), array('HtmlTag', array('tag' => 'p')), )); /*Group Decorator*/ $this->group_horizontal->setOptions(array('displayGroupClass'=>'Group_Decorator')); $this->group_horizontal->addDecorator('FormElements'); /*Set Decorator of submit button*/ $submit->setDecorators(array( array('ViewHelper'), array('Description'), array('HtmlTag', array('tag'=>'p', 'class'=>'form_submit')), )); /*Set Decorators for Date Fields*/ $day->setDecorators(array( array('ViewHelper'), array('Description'), array('HtmlTag', array('tag'=>'li', 'style'=>'float:left')), )); $month->setDecorators(array( array('ViewHelper'), array('Description'), array('HtmlTag', array('tag'=>'li', 'style'=>'float:left')), )); $year->setDecorators(array( array('ViewHelper'), array('Description'), array('HtmlTag', array('tag'=>'li', 'style'=>'float:left')), )); } }
et voici le decorator (très simple mais c'est juste pour tester):
class Group_Decorator extends Zend_Form_Decorator_Abstract { public function render($content) { $element = $this->getElement(); if(!$element instanceof Zend_Form_Element) { return $content; } if(null === $element->getView()) { return $content; } return '<p><label>Test</label><ul>'.$content.'</ul></p>'; } }
Le problème c'est qu'il n'y a aucun changement dans le HTML du group. Il utilise toujours les Fieldset.
Il y a très peu de documentation a propos des decorator de group, je suis peut-être passé à coté de quelques choses.
Merci d'avance pour votre aide.
Hors ligne
Pour moi il y a un problème au niveau de la sémantique html...
<p> <label></label> <ul></ul> </p>
- p n'est pas fait pour les forms, fielset = group de champs
- un label pour un group de champs n'a aucun sens, par contre un legend oui.
Es vraiment bien utile de changer ça? Si c'est pour la mise en forme, utilse plutôt les capacités des CSS.
Hors ligne
Ok, bon je vais essayer comme ca.
Mais le problème c'est que je voudrais aligner le legend sur la même ligne que les champs. J'ai peur qu'avec les CSS le résultat ne soit pas le même sur les différents navigateurs.
Merci en tout pour ta réponse,
Hors ligne
En fait je voudrais que ca se rapproche de cela:
http://88.198.60.17/images/web-form-des … ns/box.jpg
Donc tu me conseilles aussi d'utiliser les définitions à la place des paragraphes?
Hors ligne
Ton lien renvoi un Forbidden...
Pour la mise en page, c'est CSS, pas HTML (et encore moins XHTML) voilà ce que je dis
Le choix sémantique pour l'html de Zend_Form a été très bien choisi je trouve, et je ne les change que dans de rare (très rare) cas.
Par contre j'ai ma toujours ma petite feuille de style à côté
Hors ligne
p n'est pas fait pour les form ????
Je ne suis pas d'accord.
P est ce qu'il y a de plus neutre et j'estime que dd n'est pas le mieux approprié pour encadrer les éléments d'un formulaire.
De même pour ul.
Éventuellement, je les utilises pour des 'sous-ensemble' de formulaires comme des cases à cochés pour les ul.
<form> <p> <label /> <input> </p> <p> Quelles fruits préférez-vous ? <ul> <li><label>Pomme</label><input type="checkbox" /> <li><label>Poire</label><input type="checkbox" /> </ul> </p> </form>
Chacun choisi sa sémantique, mais je ne suis pas d'accord pour dire que p n'est pas approprié. Il l'est autant que dd.
Dernière modification par nORKy (21-07-2008 10:02:14)
Hors ligne
<p> est de très loin un élément neutre en html cala signifie paragraphe (tout simplement) et donc du texte.
Tu m'aurais dis <div> qui signifie "division" ca serait passé.
Tu devrais (re)voir les cours de sémantique XHTML :p
Pourquoi crois tu que le ZF a fait ces choix ainsi? C'est pas un hasard, et encore moins des erreurs...
Dire que avec 5min et un coup de css, on a un rendu identique...
Hors ligne
Ce ni un hasard, ni une erreur :
c'est un choix
En surfant sur le web, tu dois bien constater que des formulaires en dd, il y en a autant que des ul ou des p.
Tiens, w3c.org fait encore différent :
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded"> <div> <a class="navlink" /></a><br /> <label for="inputField">Search W3C<br /> <input type="text" size="15" id="inputField" name="q" accesskey="E" maxlength="255" /></label> <input type="submit" value="Go" id="goButton" name="sa" accesskey="G" /><br /> <input type="hidden" name="cof" /> <input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org" /> <input type="hidden" name="domains" value="www.w3.org" /> </div> </form>
Tu devrais écrire à l'équipe d'openWeb qu'ils ont tord également.
http://openweb.eu.org/articles/formulaire_accessible
Ne confonds pas choix et erreurs.
Hors ligne
Ne confonds pas choix et erreurs.
Où ai-je confondu ca?
Là
Pourquoi crois tu que le ZF a fait ces choix ainsi? C'est pas un hasard, et encore moins des erreurs...
Non puisque je souligne bien la nuance.
Je dis juste que je ne suis pas d'accord avec ca
P est ce qu'il y a de plus neutre
C'est quand même marrant tu a changé de choix entre temps, ton
<p> <label></label> <ul></ul> </p>
est devenu
<p> Quelles fruits préférez-vous ? <ul> <li><label>Pomme</label><input type="checkbox" /> <li><label>Poire</label><input type="checkbox" /> </ul> </p>
:p
Je donne mon opinon perso rien de plus
PS: le vieux form que tu mets c'est un copié collé d'un code google (on note le truc useless "<a class="navlink" /></a><br />" et on sai tous que google est le xhtml ca fait 2
PS2: y'a quand même des fieldsets pour les groupes ici
Hors ligne
Mais moi aussi je donne mon opinion, rien de plus
Ps :Le form que j'ai collé viens de w3c.org
PS2: j'utilises fieldset pour grouper des champs de même idées (par exemple un profil pour nom, prénom, adresse, ...) et les ul pour des cases à cocher correspondants à une même question. La encore c'est une histoire de choix, pas de sémantiques 'form'
Hors ligne
Merci pour ces précisions mais comment est-ce que je peux faire pour obtenir plusieurs champs select alignés sur la même ligne avec un label.
Comme ci pour le champs "date of Birth" ci contre
dois-je utiliser des fieldsets? tout se mélange dans ma tête. Je ne vois pas comment procéder.
Merci d'avance!
Hors ligne
Je n'ai pas de réponse (à mon avis faut te faire un décorateur)
Mais pour les dates, le multiple select n'est pas recommandé. (j'ai l'ai lu hier, mais j'avoue que je ne sais plus ou ni pourquoi ! lol)
Je te conseil d'utiliser un champ de type text et d'y ajouter un validateur Zend_Date et demander une forme précise (par exemple dd/MM/YYYY)
Perso, je rajoute en plus un jquery.datepicker pour faciliter la sélection d'une date
Hors ligne
+1
Pour les histoires de mulitples select c'est pour des histoires d'ergonomie utilisateur.
Il est plus naturelle pour un internaute de saisir une date à la main que d'utiliser plusieurs inputs.
Hors ligne