archived-doc-fr/faq/html.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- $Revision$ -->
<!-- EN-Revision: 9e6c3416c5c285f807a734e4663c399612777d7e Maintainer: yannick Status: ready -->
<!-- Reviewed: yes -->

 <chapter xml:id="faq.html" xmlns="http://docbook.org/ns/docbook">
  <title>PHP et HTML</title>
  <titleabbrev>PHP et HTML</titleabbrev>

  <para>
   PHP et HTML sont très interactifs : PHP peut générer du HTML et HTML
   peut passer des informations à PHP. Avant de lire cette <literal>faq</literal> (foire aux
   questions), il est important d'apprendre comment <link
   linkend="language.variables.external">récupérer des variables externes à PHP</link>.
   La page du manuel correspondante contient beaucoup d'exemples.
  </para>

  <qandaset>
   <qandaentry xml:id="faq.html.encoding">
    <question>
     <para>
      Quel encodage/décodage ai-je besoin lors du passage d'une valeur via
      un formulaire/une URL ?
     </para>
    </question>
    <answer>
     <para>
      Il y a plusieurs étapes pour lesquelles le codage est important. En supposant qu'il y a
      une <type>string</type> <varname>$data</varname>, qui contient la chaîne
      à passer de manière non-encodée, voici les étapes appropriées :
      <itemizedlist>
       <listitem>
        <para>
         Interprétation HTML. Afin d'indiquer une chaîne aléatoire, il
         <emphasis>faut</emphasis> l'inclure entre doubles guillemets et
         utiliser la fonction <function>htmlspecialchars</function> pour encoder
         la chaîne.
        </para>
       </listitem>
       <listitem>
        <para>
         URL : une URL est constituée de plusieurs parties. Si les données
         doivent être interprétées comme un seul élément, il <emphasis>faut</emphasis>
         les encoder avec la fonction <function>urlencode</function>.
        </para>
       </listitem>
      </itemizedlist>
     </para>
     <para>
      <example>
       <title>Un élément de formulaire HTML caché</title>
        <programlisting role="php">
<![CDATA[
<?php
    echo '<input type="hidden" value="' . htmlspecialchars($data) . '" />'."\n";
?>
]]>
        </programlisting>
      </example>
      <note>
       <simpara>
        Il n'est pas correct d'utiliser la fonction <function>urlencode</function>
        pour les données <varname>$data</varname>, car il en est de la responsabilité du
        navigateur de les encoder. Tous les navigateurs populaires le font correctement.
        Il est à noter que cela s'effectue sans considération de la méthode utilisée
        (c'est-à-dire 
        <literal>GET</literal> ou <literal>POST</literal>).
        Il faut uniquement noter ce cas pour les requêtes <literal>GET</literal>,
        car les requêtes <literal>POST</literal> sont généralement cachées.
       </simpara>
      </note>
      <example>
       <title>Données éditables par l'utilisateur</title>
        <programlisting role="php">
<![CDATA[
<?php
    echo "<textarea name='mydata'>\n";
    echo htmlspecialchars($data)."\n";
    echo "</textarea>";
?>
]]>
        </programlisting>
      </example>
      <note>
       <simpara>
        Les données sont montrées dans le navigateur comme prévues, car celui-ci interprétera
        les symboles HTML échappés.
       </simpara>
       <simpara>
        Au moment de la validation, via la méthode <literal>GET</literal> ou 
        <literal>POST</literal>, les données devraient être
        url-encodées par le navigateur avant le transfert et directement url-décodées par PHP.
        Donc, finalement, il n'est pas nécessaire d'effectuer d'url-encodage/url-decodage soi-même,
        tout est effectué automatiquement.
       </simpara>
      </note>
      <example>
       <title>Dans une URL</title>
        <programlisting role="php">
<![CDATA[
<?php
    echo '<a href="' . htmlspecialchars("/nextpage.php?stage=23&data=" .
        urlencode($data)) . '">'."\n";
?>
]]>
        </programlisting>
      </example>
      <note>
       <simpara>
        En fait, lors de la simulation d'une requête <literal>GET</literal> HTML, il est nécessaire
        d'utiliser manuellement la fonction <function>urlencode</function> sur les données.
       </simpara>
      </note>
      <note>
       <simpara>
        Il faut utiliser <function>htmlspecialchars</function> sur l'URL complète,
        car l'URL se comporte comme la valeur d'un attribut HTML. Dans ce cas, le navigateur
        fera un <function>htmlspecialchars</function> sur la valeur et passera le résultat à
        l'URL. PHP devrait comprendre l'URL correctement, car les données ont été url-encodées.
       </simpara>
       <simpara>
        Il est à noter que <literal>&amp;</literal> dans l'URL est remplacé par
        <literal>&amp;amp;</literal>. Bien que la plupart des navigateurs devraient
        corriger cela en cas d'oubli, ce n'est pas toujours le cas. Donc, même si l'URL
        n'est pas dynamique, il <emphasis>faut</emphasis> utiliser
        la fonction <function>htmlspecialchars</function> sur l'URL.
       </simpara>
      </note>
     </para>
     <!-- TODO: a note about addgpcslashes? -->
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.form-image">
    <question>
     <para>
      J'essaye d'utiliser &lt;input type="image"&gt; mais
      les variables <varname>$foo.x</varname> et <varname>$foo.y</varname>
      ne sont pas disponibles. <varname>$_GET['foo.x']</varname> n'existe pas non plus.
      Où sont-elles ?  
     </para>
    </question>
    <answer>
     <para>
      Lors de la validation d'un formulaire, il est possible d'utiliser une image au lieu du bouton
      standard de type "<literal>submit</literal>" avec une balise du type :
      <programlisting role="html">
<![CDATA[
<input type="image" src="image.gif" name="foo" />
]]>
      </programlisting>
      Lorsque l'utilisateur clique sur l'image, le formulaire est transmis au serveur avec deux
      variables supplémentaires : <varname>foo.x</varname> et 
      <varname>foo.y</varname> qui représentent les coordonnées du point cliqué.
     </para>
     <para>
      Comme <varname>foo.x</varname> et <varname>foo.y</varname> sont
      des noms de variables invalides en PHP, elles sont automatiquement converties
      en <varname>foo_x</varname> et <varname>foo_y</varname>. Les points sont 
      remplacés par des soulignés. Donc, il faut accéder à ces variables
      comme n'importe quelle autre variable tel que décrit dans la section
      "<link linkend="language.variables.external">Variables provenant d'autres sources</link>".
      Par exemple, en utilisant <varname>$_GET['foo_x']</varname>.
      <note>
       <para>
        Les espaces dans les noms de variables de requête sont également convertis en tirets bas.
       </para>
      </note>
     </para>
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.arrays">
    <question>
     <para>Comment créer un tableau dans une balise &lt;form&gt; HTML ?</para>
    </question>
    <answer>
     <para>
      Pour envoyer le résultat du &lt;form&gt; comme un <link linkend="language.types.array">tableau</link>
      de variables au script PHP, il faut nommer, via l'attribut <literal>name</literal>, les balises
      &lt;input&gt;, &lt;select&gt; ou &lt;textarea&gt; comme cela :
      <programlisting role="html">
<![CDATA[
<input name="MonTableau[]" />
<input name="MonTableau[]" />
<input name="MonTableau[]" />
<input name="MonTableau[]" />
]]>
      </programlisting>
      Noter les crochets après le nom de la variable, c'est ce qui fait que celle-ci sera un tableau.
      Il est possible de grouper les éléments dans différents tableaux de variables en assignant le
      même nom à différents éléments :
      <programlisting role="html">
<![CDATA[
<input name="MonTableau[]" />
<input name="MonTableau[]" />
<input name="MonAutreTableau[]" />
<input name="MonAutreTableau[]" />
]]>
      </programlisting>
      Cela produira deux tableaux de variables, MonTableau et MonAutreTableau, qui seront
      envoyés au script PHP. Il est également possible d'assigner des clés spécifiques au
      tableau :
      <programlisting role="html">
<![CDATA[
<input name="UnAutreTableau[]" />
<input name="UnAutreTableau[]" />
<input name="UnAutreTableau[email]" />
<input name="UnAutreTableau[telephone]" />
]]>
      </programlisting>
      Le tableau UnAutreTableau contiendra les clés 0, 1, email et telephone.
     </para>
     <para>
      <note>
       <para>
         Le fait de spécifier une clé à un tableau est optionnel en HTML. Sans spécification,
         les clés du tableau suivront l'ordre d'apparition des éléments dans le formulaire.
         Dans notre premier exemple, le tableau contient les clés 0, 1, 2 et 3.
        </para>
       </note>
      </para>
      <para>
      Voir aussi les 
      <link linkend="ref.array">fonctions sur les tableaux de variables</link> et la section
      sur les
      <link linkend="language.variables.external">variables provenant d'autres sources</link>.
     </para>
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.select-multiple">
    <question>
     <para>
      Comment puis-je récupérer le résultat d'un champ HTML <literal>SELECT</literal> 
      multiple ?
     </para>
    </question>
    <answer>
     <para>
      Le champ <literal>SELECT</literal> multiple en HTML permet à l'utilisateur de 
      sélectionner plusieurs éléments d'une liste. 
      Ces éléments seront transmis à la page pointée par l'attribut 
      <literal>action</literal> de la balise <literal>form</literal>.
      Le problème est que ces éléments sont tous passés avec le même nom de variable.
      <programlisting role="html">
<![CDATA[
<select name="var" multiple="yes">
]]>
      </programlisting>
      Chaque option sélectionnée arrivera au mécanisme de traitement sous la forme :
      <programlisting>
var=option1
var=option2
var=option3
      </programlisting>
      Chaque option effacera donc le contenu de la précédente variable 
      <varname>$var</varname>. La solution consiste à utiliser un tableau de variables
      dans cet élément de formulaire HTML, par exemple :
      <programlisting role="html">
<![CDATA[
<select name="var[]" multiple="yes">
]]>
      </programlisting>
      Cela fera que PHP traitera <varname>$var</varname> comme un tableau de
      variables et que chaque assignement de valeur à var[] ajoutera un index au tableau.
      La première option choisie sera mise dans <varname>$var[0]</varname>,
      la suivante sera mise dans <varname>$var[1]</varname>, etc. La fonction
      <function>count</function> peut être utilisée pour déterminer combien
      d'options ont été sélectionnées, et la fonction <function>sort</function>
      peut être utilisée pour trier le tableau, si nécessaire.
     </para>
     <para>
      Il est à noter que lors de l'utilisation de Javascript, <literal>[]</literal> dans le nom de l'élément peut
      poser problème lors de l'accès à celui-ci par son nom.
      Utiliser plutôt l'indice numérique de l'élément dans ce cas, ou bien les simples
      guillemets pour entourer cet élément, comme :
      <programlisting>
variable = document.forms[0].elements['var[]']; 
      </programlisting>
     </para>
    </answer>
   </qandaentry>

   <qandaentry xml:id="faq.html.javascript-variable">
    <question>
     <para>
      Comment puis-je passer une variable de Javascript vers PHP ?
     </para>
    </question>
    <answer>
     <para>
      Javascript est (habituellement) une technologie côté client et PHP
      est (habituellement) une technologie côté serveur et sachant que HTTP est un 
      protocole « sans état », les deux langages ne peuvent pas directement partager des
      variables.
     </para>
     <para>
      Cependant, il est possible de faire passer des variables entre les deux.
      Une des solutions pour cela est de générer un code Javascript à l'aide de PHP
      et de faire rafraîchir le navigateur tout seul, passant ainsi des variables spécifiques
      au script PHP. L'exemple suivant montre précisément comment réaliser cela --
      il permet au code PHP de récupérer les dimensions de l'écran du client, ce qui est normalement
      uniquement possible côté client.
     </para>
     <para>
      <example>
       <title>Génération de Javascript avec PHP</title>
       <programlisting role="php">
<![CDATA[
<?php
if (isset($_GET['largeur']) AND isset($_GET['hauteur'])) {
  // Affichage des variables
  echo 'La largeur de l\'écran est : ' . $_GET['largeur'] ."<br />\n";
  echo 'La hauteur de l\'écran est : ' . $_GET['hauteur'] . "<br />\n";
} else {
  // passage des variables de dimensions
  // (préservation de la requête d'origine
  //   -- les variables par méthode POST doivent être traitées différemment)

  echo "<script language='javascript'>\n";
  echo "  location.href=\"{$_SERVER['SCRIPT_NAME']}?{$_SERVER['QUERY_STRING']}"
            . "&largeur=\" + screen.width + \"&hauteur=\" + screen.height;\n";
  echo "</script>\n";
  exit();
}
?>
]]>
       </programlisting>
      </example>
     </para>
    </answer>
   </qandaentry>

  </qandaset>
 </chapter>

<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-omittag:t
sgml-shorttag:t
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:1
sgml-indent-data:t
indent-tabs-mode:nil
sgml-parent-document:nil
sgml-default-dtd-file:"~/.phpdoc/manual.ced"
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
vim600: syn=xml fen fdm=syntax fdl=2 si
vim: et tw=78 syn=sgml
vi: ts=1 sw=1
-->