Aller au contenu


Photo

Tuto : formulaire Html/Php


  • Please log in to reply
56 replies to this topic

#31 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 04 mars 2010 - 13:00

Salut Go'Gaule :)

Oui, je sais, j'ai un peu cafouillé cette fois sur les énoncés des exercices, désolé :unsure:

Ok, essayons de les reprendre calmement...

Exercice 1

Déclarer une variable de type "array associatif" simple, nommée "$voitures_francaises", et lui affecter un modèle de véhicule (n'importe lequel) pour chaque constructeur automobile français.

--

Exercice 2

Afficher, avec la fonction "echo", le modèle de véhicule que vous aurez mémorisé dans la variable "$voitures_francaises" pour la marque "Renault".

--

Exercice 3

Modifier la variable "$voitures_francaises" de l'exercice 1 pour la convertir en "array associatif multi-dimensions", an ajoutant, pour chaque constructeur français, un modèle de voiture en motorisation essence et un autre modèle en motorisation diesel.

--

Exercice 4

Afficher l'ensemble de la variable "$voitures_francaises", telle que modifiée à l'exercice 3, avec la fonction "print_r".

--

Voilà, j'espère que c'est plus clair... refait une réponse de l'ensemble des exercices dans un nouveau message, et oublie tes réponses précédentes, certaines étaient erronées au niveau de la syntaxe.

Allez, au boulot Go'Gaule... ce soir, si tout va bien, on attaque le formulaire Html ;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#32 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 04 mars 2010 - 13:53

Bonjour à tous .

Fredo .

Il y a un bug sur mon post précédent .

Pourquoi cela ne fonctionne pas , je voudrais comprendre .

live preview me renvoie : Array ()

Si je déclare $garage_du_centre = Array['$voitures_peugeot','$voitures_renault','$voitures_citroen'];

Cela veut bien dire : variable $garage_du_centre est un tableau avec variable tableau '$voitures..'

Merci.
Cordialement.

Ce message a été modifié par Go'Gaule - 04 mars 2010 - 13:57 .

En jachère ... bientôt le printemps ..! et les semailles !

#33 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 04 mars 2010 - 14:05

Go'Gaule, avançons par petites étapes Stp, tâche de répondre aux exercices (dernière version) du mieux que tu peux, on verra par la suite ces petits soucis de syntaxe... ok ? ;)

Allez, avec les nouveaux énoncés, ça ne devrait pas être très difficile... ;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#34 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 05 mars 2010 - 09:13

Bonjour à toutes et tous .

Fredo

<?php
$voitures_francaises[peugeot] = "504";
$voitures_francaiess[renault] = "R4L";
$voitures_francaises[citroen] = "DS19";
$voitures_francaises[simca] = "1000";

echo ($voitures_francaises[renault]);

?>

J'ai réalisé ce petit morceau de code en réponse à l'exercice n°1 , je ne parviens pas a le tester . ??

Cordialement

Ce message a été modifié par Go'Gaule - 05 mars 2010 - 09:14 .

En jachère ... bientôt le printemps ..! et les semailles !

#35 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 05 mars 2010 - 09:32

Salut Go'Gaule :)

Oui, il y a une erreur au niveau de la syntaxe, regarde notamment dans mon explication de quelle manière on écrit les clés... tu trouveras facilement ;)

Sinon, c'est bien la bonne approche celle-ci, et j'adore le clin d'oeil pour la marque "Simca"... si mes souvenirs ne me trahissent pas, il y avait aussi une nommée "Talbot" non ? :huh:

Allez, corrige ton erreur de syntaxe et finalise tes réponses, aujourd'hui j'aurais une journée un peu remplie, mais ce soir je pourrais me pencher sur la suite du tuto... mais uniquement si toutes tes réponses sont correctes, d'acc ? ;)

@+ :)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#36 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 05 mars 2010 - 10:01

Bonjour à tous .

C'est Simca qui était devenu Talbot ensuite racheté par Peugeot .. d'ou l'expression Simca 1000/Peugeot ... :rolleyes:

Alors je suis complétement perdu . Avec des guillemets ou sans rien ne vas .;

Cordialement.
En jachère ... bientôt le printemps ..! et les semailles !

#37 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 05 mars 2010 - 11:59

C'est Simca qui était devenu Talbot ensuite racheté par Peugeot .. d'ou l'expression Simca 1000/Peugeot ... :rolleyes:

Bein... dis-donc, comment sais-tu tout ça toi ? :blink:

Tu es fan de bagnoles ou tu as un âge plus que certain ? :wacko:

Bon, revenons à nos moutons :D

Je ne comprends pas tes soucis là :huh: , pourtant, sur une proposition précédente tu n'as fais aucune erreur de syntaxe, je remet ici un bout de ton code :

$voitures_peugeot['204'] = "1 204";
$voitures_peugeot['504'] = "3 504";
$voitures_peugeot['207'] = "2 207";

La seule et unique chose qui change, par rapport à cette proposition, c'est sont les noms (variable et clés) et les valeurs, côté structure c'est exactement pareil et côté syntaxe c'est parfait...

L'exercice 3 est certes un peu plus compliqué, mais comme tu l'a déjà fais intuitivement, avec des noms et des valeurs différentes, je ne penses pas que ça te posera plus de soucis que ça... allez, pour cette 3e réponse, je te donne une petite piste (tout est bidon, c'est juste la structure que tu dois retenir) :

$chocolats['nestle']['noir'] = "Délice du soir";
$chocolats['nestle']['lait'] = "Délice du jour";

Et ainsi de suite avec d'autres marques...

Allez... tu n'es plus très loin là, un dernier petit effort et on passe à l'Html :)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#38 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 05 mars 2010 - 13:51

Bonjour à tous .

Je boude .

Fredo

Bein... dis-donc, comment sais-tu tout ça toi ? :blink:

Tu es fan de bagnoles ou tu as un âge plus que certain ? :wacko:


Alors mon age est ; cela est sure , très incertain ...' Age .
Plus simplement : Beaucoup de choses dans la têtes , "malles rangées" , mais je suis entrain de faire des rayonnages .. !

J'ai compris pourquoi cela ne fonctionnait plus ... fichier pas enregistré ou enregistré avec html ...

Je me remets au travail .

Cordialement.
En jachère ... bientôt le printemps ..! et les semailles !

#39 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 05 mars 2010 - 21:16

Bonsoir .

Est-ce que cela te sied :

<?php
    $voitures =  array(
  'Francaise' => array(
    'Peugeot' => array( 
       '504'  => array('1 Essence','1 Diesel'), 
      '204'   => array('1 diesel','1 essence '),
      '404'   => array('Essence ordinaire'),),

    'Renault' => array(
      'R18'   => array('2 Essence','1 Turbo-Diesel'),
      'R4L'   => array('Essence ordinaire'),
 'Caravelle'  => array('Voiture de collection'),
  'Dauphine'  => array('Gordini essence')),

    'Citroen' => array('2CV', ('DS19 essence ordinaire'), 'Acadiane'),

      'Simca' => array(1000, 'Baguera', 'Samba'),

    'Panhard' => array(Dina),
 ),
  'Allemande' => array(
        'BMW' => array(525, 'X6'),
    'Porsche' => array('Cayenne', 'Carrera'),
  'Wolswagen' => array('Coccinelle','Combi')
 )
);
echo '<pre>';
print_r($voitures [Francaise][Renault]);
?>

Tout fonctionne ...
Cordialement.

Ce message a été modifié par Go'Gaule - 05 mars 2010 - 21:21 .

En jachère ... bientôt le printemps ..! et les semailles !

#40 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 06 mars 2010 - 03:44

Salut Go'Gaule :)

Est-ce que cela te sied :

Non, cela me scie surtout :huh: ... franchement, et pour deux raisons :

  • Tout d'abord, ça fait plaisir de constater que tu cherches des choses, que tu fais tes propres tests, que tu tentes d'autres approches, d'autres solutions, oui, ça fait vraiment plaisir et je t'encourage vivement à continuer dans cette dynamique, car c'est elle qui va te permettre de continuer à apprendre et à évoluer, donc, sincèrement :clap: :clap: :clap:
  • D'autre part, j'avoue que c'est un peu énervant de voir tes difficultés à suivre, en tant soit peu, la logique d'apprentissage qu'on essaie de construire pour que cela te soit le plus bénéfique possible, car, même si tu arrives à un résultat plutôt pas trop mauvais dans ta dernière proposition (tout n'est pas nickel encore, mais il y a du mieux, je le reconnais), ce que tu présentes là ne correspond pas vraiment à ce que nous avons vu tout au long de ces chapitres consacrés aux "array"... et ça, c'est un peu dommage je trouve <_<

C'est d'autant plus regrettable que, quelques messages plus tôt, tu étais arrivé à quelque chose de pas très éloigne de ce qu'on cherche à faire, du coup, je me demande à quel point il est intéressant, pertinent, utile même, d'écrire des longues explications, avec des exemples et tuti-quanti, pour que tu fasses finalement à ta sauce :huh: ... encore, si tu avais proposé une solution correcte avec les deux approches, là j'aurais vraiment été ravi, pour toi surtout, mais là... :unsure:

Bref, ce qui serait bien pour la suite de ce tuto, et on n'est plus très loin, je te rassure, c'est que tu tentes de suivre au mieux les sujets que nous abordons et dans la manière que nous le faisons, non pas que d'autres pistes soient moins bonnes ou moins efficaces, non, c'est surtout que certains choix sont faits pour des raisons pédagogiques et d'autres pour des raisons tout-à-fait pratiques, et c'est important que tu puisses les suivre pour la bonne compréhension des différentes techniques et des étapes suivantes... tu vois ? :unsure:

Donc, pour tenter de rester constructif, ce que tu as fait dans ta dernière proposition est plutôt pas trop mal, c'est vrai, mais l'utilisation de la fonction "array()" n'est pas vraiment nécessaire ici, ni franchement pratique pour ce type de structures imbriquées (on a du mal à distinguer les différentes imbrications, cela reste bien moins clair qu'une suite d'affectations avec des crochets)... même si cela reste tout-à-fait faisable et que le résultat soit en tout points correct.

Pour l'instant, et jusqu'à la fin de ce tuto, laisse Stp de côté cette fonction "array()", elle te sera sûrement très utile par la suite, mais nous allons volontairement l'ignorer dans cette discussion, afin de garder un peu de cohérence et, surtout, de clarté dans notre apprentissage... ok ? :huh:

Pour qu'on puisse avancer un peu, je vais reprendre une de tes précédentes propositions pour l'exercice 1, en corrigeant les erreurs de syntaxe, pour qu'on puisse passer à l'exercice 3 qui est le plus problématique :

// Déclaration d'une variable de type "array associatif"
// et affectation de différentes valeurs avec des clés précises
$voitures_francaises['peugeot'] = "504";
$voitures_francaiess['renault'] = "R4L";
$voitures_francaises['citroen'] = "DS19";
$voitures_francaises['simca'] = "1000";

// Affichage de la valeur de la clé "renault"
echo ($voitures_francaises['renault']);

// Résultat de l'affichage
/*
R4L
*/

Maintenant, à partir de ce code, tentons d'ajouter un autre niveau d'imbrication, avec cette fois un modèle de voiture par marque selon deux criètres : essence ou diesel. Je te montre juste pour la marque "peugeot" (évidemment, peu importe si les données sont bidon), à toi de faire les autres, ok ?

$voitures_francaises['peugeot']['essence'] = "504";
$voitures_francaises['peugeot']['diesel'] = "206";

Lorsque tu feras le test d'affichage de la variable "$voitures_francaises" avec la fonction "print_r", tu verras que nous obtenons, au niveau de la représentation, quelque chose de très proche de ce que tu as proposé en dernier... mais c'est construit sans l'utilisation d'aucune fonction particulière, juste en utilisant la syntaxe naturelle de manipulation des "array".

Allez Go'Gaule, finalise ce troisième exercice et le quatrième pour voir le résultat affiché, puis on passe à l'étape suivante, d'acc ? :)

;)

Ce message a été modifié par Fredo d:o) - 06 mars 2010 - 04:09 .

Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#41 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 06 mars 2010 - 13:52

Bonjour à tous et toutes . (Un peu de changement).

Fredo :

// Déclaration d'une variable de type "array associatif"
// et affectation de différentes valeurs avec des clés précises
$voitures_francaises['peugeot'] = "504";
$voitures_francaises['renault'] = "R4L";
$voitures_francaises['citroen'] = "DS19";
$voitures_francaises['simca'] = "1000";

// Affichage de la valeur de la clé "renault"
echo ($voitures_francaises['renault']);

// Résultat de l'affichage
/*
R4L
*/

Après cette Intermède (Je voulais placer le petit train interlude . Tou tou tou tou tou , ti re li , ).

Je vais continuer .

Exercice n°3

$voitures_francaises['peugeot']['essence'] = "504";
$voitures_francaises['peugeot']['diesel'] = "206";
$voitures_francaises['renault']['diesel'] = "Mégane";
$voitures_francaises['renault']['essence'] = "R8";
$voitures_francaises['citroen']['diesel'] = "C3";
$voitures_francaises['citroen']['essence'] = "C4";

print_r($voitures_francaises);

J'était "larguer" .. je ne parvenais pas a faire fonctionner mon petit morceau de code , il a juste une faute de frappe

$voitures_francaises['peugeot'] = "504";
$voitures_francaiess['renault'] = "R4L";  <---- francaiees  Hum! . <img src='http://forum.macfr.com/public/style_emoticons/<#EMO_DIR#>/ouch.gif' class='bbc_emoticon' alt=':ouch:' /> 
$voitures_francaises['citroen'] = "DS19";
$voitures_francaises['simca'] = "1000";

Je ne me relis pas comme il faut .... Oui .. J'sais! et je m'énerve Grrrrrr ...

Tu as presque répondu a une question que je me posais : Tous ces array pas très joli .

Merci Fredo tu est en passe de Canonisation . :cool2:

Cordialement.

Ce message a été modifié par Go'Gaule - 06 mars 2010 - 15:24 .

En jachère ... bientôt le printemps ..! et les semailles !

#42 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 06 mars 2010 - 14:29

Re... :)

Exercice n°3

$voitures_francaises['peugeot']['essence'] = "504";
$voitures_francaises['peugeot']['diesel'] = "206";
$voitures_francaises['renault']['diesel'] = "Mégane";
$voitures_francaises['renault']['essence'] = "R8";
$voitures_francaises['Citroen']['diesel'] = "C3";
$voitures_francaises['citroen']['essence'] = "C4";

print_r($voitures_francaises);


Bein, ça me paraît parfait tout ça :up:

Attention tout de même Go'Gaule à l'orthographe des clés, Php sais faire la distinction entre les majuscules et les minuscules, du coup, "Citroen" et "citroen" se sont deux clés bien différentes et la structure générale est du coup faussée... à bien faire gaffe de ne pas reproduire ce type d'erreurs au moment de passer à la réalisation, ok ? :huh:

Euh... :huh: ... mais où c'est qu'il est passé le résultat d'affichage avec le "print_r" ??? :blink:

J'était "larguer" .. je ne parvenais pas a faire fonctionner mon petit morceau de code , il a juste une faute de frappe

$voitures_francaiess['renault'] = "R4L";  <---- francaiees  Hum! . <img src='http://forum.macfr.com/public/style_emoticons/<#EMO_DIR#>/ouch.gif' class='bbc_emoticon' alt=':ouch:' /> 


Et bein, tu vois, je n'avais même pas remarqué (faut dire aussi que je ne teste pas systématiquement tous les codes, donc il y a sûrement des petites choses comme-ça qui m'échappent aussi)... mais bon, là ce n'est pas bien grave (il faudra tout de même est toujours très attentif au moment du codage réel), l'important est de bien comprendre comment fonctionnent les variables de type "array" associatifs.

Tu as presque répondu a une question que je me posais : Tous ces array pas très joli .


Je sais, je te l'ai déjà dis, mais je te le dis quand-même (nooon :wacko: pas Paaaatriiiick :P :D ), si tu as des questions, poses-les !

Petit complément d'info...

La fonction "array()" est très pratique et très utilisée, elle est souvent largement suffisante pour faire rapidement des tableaux indexés et même associatifs simples, mais elle pose un réel soucis de lisibilité dès lors qu'on cherche à faire des tableaux imbriqués ou multi-dimensionnels quelque peu complexes, il faut alors faire une indentation très rigoureuse pour ne pas se tromper et y voir clair, ce qui est parfois assez pénible... du coup, pour ce genre de structures de données, l'utilisation des affectations avec la syntaxe "naturelle" (avec des crochets "[]" tel que nous l'avons vu tout au long de ces chapitres) est mille fois préférable, bien plus lisible et pratique à l'usage...

En plus, disons-le, elle est plus rapide en temps de calcul pour le moteur de Php, bon, c'est de l'ordre de quelques milli-secondes, mais, comme on dit, il n'y a pas des petites économies ;)

Allez, ce soir (ou cette nuit... à moins que ça ne soit demain... on verra mes dispos), on passe à l'étape suivante, et là, il faudra faire preuve de toute ton attention, car nous allons afin faire le lien entre formulaire Html et programme Php, c'est donc important... ok ? :)

@+ ;)

Ce message a été modifié par Fredo d:o) - 06 mars 2010 - 14:49 .

Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#43 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 08 mars 2010 - 03:26

Bonjour à tous :)

Ok, nous allons donc étudier ici la réalisation du formulaire Html, mais nous n'allons pas pour autant oublier le langage Php qui joue un rôle important dans certains choix.

--

Étape 4 : Html, Les Formulaires

C'est quoi un formulaire Html ?

Un formulaire Html est un moyen simple et efficace de récupérer des informations et des données directement fournies par le visiteur d'un site internet.

Comme pour tous les autres "objets" Html, un formulaire est défini par un couple de balises, du même nom "form", une ouvrante et une autre fermante :

<form> ... </form>

Contrairement aux autres balises Html, qui sont simplement dédiées à la structuration et à la mise en forme d'un contenu, la balise "form" possède, en plus, un rôle actif et interactif, autrement dit, c'est une balise qui peut structurer et mettre en forme un contenu tout en étant capable de lancer une action exécutable par un programme, qui peut d'ailleurs recevoir et traiter les données entrées par l'utilisateur.

Dans la suite de ce tuto, nous n'allons pas aborder les aspects de structuration et de mise en forme possibles de la balise "form" (il y a plein de ressources sur internet qui en parlent de long et en large), nous allons simplement nous concentrer à étudier les possibilités d'action et d'interaction offertes par cet objet Html.

Avant d'entrer dans le vif du sujet, je vous propose tout d'abord de voir de quelle manière la balise "form" est capable d'exécuter un programme "externe", sans passer aucune donnée pour le moment.

Si j'ai mis le mot "externe" entre guillemets, c'est qu'il n'est pas forcément obligatoire que le code du programme se trouve dans un fichier à part que celui du formulaire Hmtl, on peut tout à fait avoir le code exécutant dans le même fichier (avec du Php ou du JavaScript par exemple). Mais nous allons tout de même toujours parler de programme "externe", où qu'il se trouve d'ailleurs, car il s'agit bien d'utiliser un langage autre que le Html.

Par ailleurs, il est intéressant de noter que le langage Php n'a pas été le premier à être utilisé avec les formulaires Html, il y a d'autres langages qui s'exécutent côté serveur (Perl, C, Java, etc.), le tout rassemblé dans ce qu'on appelle "les interfaces CGI" ou "Common Gateway Interface" (voir : http://www.w3.org/CGI/ , et cette instructive introduction en français : http://www.commentca...i/cgiintro.php3 , il y a bien-sûr plein d'autres sources sur internet).

Ok, après cet aparté, revenons à notre premier formulaire, nous allons donc nous contenter d'afficher la date du jour et l'heure actuelle à chaque validation du formulaire, c'est assez simple et, disons-le, bien inutile en réalité :huh: , mais c'est juste pour expliquer un point qui est très important à comprendre.

Nous voulons donc afficher une date (avec les heures et tout et tout :D ), commençons par le code du formulaire Html :

<form action="date.php">
<input type="submit" value="Date" />
</form>

Alors, difficile de faire plus basique, mais cela mérite tout de même une petite explication :

La balise "form" n'est jamais utilisée seule dès lors qu'on cherche à exécuter un programme, il faut toujours lui ajouter un attribut "action", voire aussi un attribut "method", que nous avons volontairement omit pour le moment (nous en parlerons un peu plus loin).

Cet attribut "action" a pour rôle d'indiquer l'adresse du programme qui devra être exécuté (adresse absolue ou relative), dans notre exemple il s'agit d'un simple fichier Php, nommé "date.php", situé exactement au même niveau que la page Html où se trouve le formulaire (dans le même dossier quoi, il s'agit donc d'une adresse relative dans ce cas).

Le code Php de ce fichier "date.php" pourrait être quelque chose du genre :

<?php
// Fichier "date.php"
echo '<p>Il est '.date('H').' heures et '.date('i').' minutes du '.date('d F Y').'</p>';
?>

Maintenant, comment faire pour exécuter notre fichier "date.php" en validant le formulaire Html ? :huh:

Si on affiche tout simplement la page du formulaire dans notre navigateur, en validant le bouton "Date" nous allons afficher le code source du fichier "date.php", et non pas le résultat de l'exécution de ce même code.

La raison est simple, il faut passer par un serveur, c'est lui qui fera le lien entre les deux fichiers et qui exécutera le programme Php (je simplifie volontairement là, il y a bien d'autres moyens possibles, disons que l'utilisation d'un serveur est le plus naturel et pratique, et ce sera même indispensable lorsqu'on abordera le passage des données), il faut donc afficher notre page Html avec un système serveur comme celui que propose MAMP, avec un "localhost" comme début d'adresse.

Il faut donc, pour tester notre formulaire, placer les deux fichiers, le formulaire Html et le code Php ("date.php"), dans le dossier "htdocs" de MAMP, puis pointer le navigateur sur le fichier Html.

En cliquant sur le bouton "Date", le fichier "date.php" sera exécuté et il affichera la date du jour et l'heure à laquelle le formulaire a été validé (la date et l'heure sont fournies par la machine où tourne le serveur, il peut donc être parfois différent de celui affiché par l'ordinateur local lorsque le serveur se trouve sur une autre machine).

Donc, à ce stade, les points importants à retenir sont les suivants :

  • Pour exécuter un code, la balise "form" doit absolument contenir un attribut "action" avec, comme valeur, le chemin d'accès vers le programme ;
  • Pour que le programme puisse s'exécuter, il faut absolument que les fichiers soient gérés par un serveur, de type MAMP (en local) ou Apache.

--

Passage des données du formulaire au programme

Ok, jusqu'à là c'est bon, mais un formulaire, pour être réellement utile et interactif avec le visiteur, doit pouvoir passer des données au programme, qui pourra ensuite les traiter et même les mémoriser au besoin (base de données, fichiers, etc.).

Pour pouvoir passer des données depuis le formulaire Html vers le programme Php, il faut absolument passer par un serveur qui, parmi d'autres fonctionnalités, il a la particularité de gérer un certain nombre de variables "superglobales" (aussi nommées parfois "d'environnement") directement disponibles dans Php (pour en savoir plus, sur le site-du-zero par exemple : http://www.siteduzer...et-cookies.html).

Comme expliqué sur le site-du-zero, les "superglobales" ce sont toujours des variables de type "array" associatifs, c'est pourquoi nous avons commencé ce tuto en nous familiarisant avec leur syntaxe et utilisation.

Parmi ces variables "superglobales", il y en a deux qui peuvent nous intéresser dans notre cas de figure, il s'agit des variables "$_GET" et "$_POST" qui sont spécialement dédiées au passage des données avec les formulaires Html.

Dit autrement, lorsqu'on valide un formulaire Html, les données qu'il contient sont stockées, via le serveur, dans l'une de ces deux variables "superglobales".

Mais, alors, quelles sont les différences entre ces deux variables "superglobales" et laquelle choisir ?

Disons le tout de suite, côté Php, elles s'utilisent exactement de la même manière (à quelques petits détails près), et côté Html c'est pareil (ou presque), rien ne les distingue, la seule et unique différence notable entre ces deux "superglobales", "$_GET" et "$_POST", c'est la manière dont les données sont transmises du formulaire Html au programme Php :

  • "$_GET" : les données sont transmises à l'intérieur de l'adresse Url de la page, visible et facilement modifiable par le visiteur du site à partir du champ d'adresse de son navigateur internet ;
  • "$_POST" : les données sont transmises de manière totalement invisible pour l'utilisateur, c'est le serveur qui s'en occupe et aucun traitement ou modification n'est possible pendant ce transfert.

Le choix, entre l'une ou l'autre de ces deux méthodes de transfert, est laissé au libre arbitre du développeur, mais, selon la nature des données à transférer, une méthode peut être plus adaptée que l'autre.

Ainsi, lorsqu'on souhaite passer des données longues ou complexes, la méthode "$_POST" s'avère la plus indiquée, en revanche, pour passer des informations de fonctionnement pour un programme (par exemple pour un moteur de blog, un système de commentaires, etc.), la méthode "$_GET" peut résulter beaucoup plus pratique à l'usage.

Une particularité cependant peut être déterminante pour le choix d'une méthode plutôt que l'autre, c'est que la méthode "$_POST" nécessite l'utilisation d'un formulaire alors que "$_GET" peut aisément être utilisée avec des simples liens (nous ne verrons pas d'avantage ce dernier point sur ce tuto, nous pourrons peut-être le traiter dans les commentaires libres).

Bon, trêve de bavardage, passons aux codes (et oui, on y arrive... euh :huh: ... qui a dit "enfin" ??? :blink: )

Ok, dans notre cas de figure c'est bien la méthode "$_POST" qui sera la plus indiquée.

Mais, comment dire au serveur de bien utiliser cette méthode et non pas une autre lors du transfert des données ?

La réponse est très simple, grâce à l'attribut "method" (que j'avais rapidement évoqué un peu plus haut) qu'il faut ajouter à la balise "form", de cette manière :

<form action="script.php" method="post"> ... </form>

Vous le remarquerez, on écrit "post" tout en minuscules, alors que la variable superglobale "$_POST" doit toujours s'écrire tout en majuscules (d'ailleurs, toutes les variables superglobales en Php s'écrivent toujours en majuscules).

Maintenant, voyons un cas pratique, simple au début, on pourra le compléter par la suite. Tentons de faire un formulaire dans lequel on demande au visiteur de la page de nous donner son nom ou pseudo :

<form action="visiteur.php" method="post">
<input type="text" name="pseudo" value="" />
<input type="submit" value="Valider" />
</form>

Nous constatons donc que le programme qui va récupérer les données transmises par le formulaire se nomme "visiteur.php" et qu'il se trouve à côté du fichier Html du formulaire. Nous voyons également que les données seront transmises grâce à la méthode "post".

Dans ce formulaire nous avons deux objets interactifs, le premier est un champ texte de saisie, afin que le visiteur puisse entrer son nom ou pseudo, et puis un bouton de validation qui lancera l'exécution du script "visiteur.php" en lui envoyant les données du formulaire.

Pour le moment, dans notre fichier "visiteur.php", faisons un simple "print_r" sur la variable superglobale "$_POST" afin de voir ce qu'elle contient (nous l'avons vu, les variables superglobales ce sont des simples "array" associatifs), voici le code :

<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>

Maintenant, plaçons ces deux fichiers dans le dossier "htdocs" de MAMP et pointons notre navigateur sur le formulaire Html.

Entrons une quelconque valeur dans le champ texte, par exemple "Fredo" :P :D ... et validons le formulaire pour voir le résultat.

Nous allons obtenir une page avec le code suivant :

Array
(
    [pseudo] => Fredo
)

Alors, comme nous l'avons vu dans les étapes précédentes, le résultat affiché est de type "array" associatif, c'est à dire que chaque item (ici il n'y en a qu'un seul), est composé d'une clé (ici "pseudo") et d'une valeur (ici "Fredo").

Ok, nous le savons, la valeur c'est le texte que le visiteur a entré dans le champ de texte, mais la clé alors, d'où sort-elle ?

Et bien, la clé est transmise par le formulaire grâce à la valeur de l'attribut "name" présent dans la balise "input" correspondant au champ de texte.

Ceci est l'un des points les plus importants à comprendre et à retenir !

Pour bien saisir toute l'importance de la présence de cet attribut "name", tentons une petite expérience, en supprimant cet attribut, et sa valeur, de notre formulaire Html, ce qui donnerait :

<form action="visiteur.php" method="post">
<input type="text" value="" />
<input type="submit" value="Valider" />
</form>

Sans rien changer au code du fichier "visiteur.php", remplissons encore une fois le champ texte du formulaire (après avoir rechargée la page pour mettre à jour le nouveau code, et avec un autre pseudo si on veut) puis validons-le... voici ce qu'on obtient comme résultat :

Array
(
)

Autrement dit, rien du tout, notre variable "$_POST" est totalement vide, aucune donnée n'a été transmise du formulaire Html au programme Php... pas cool ça... <_<

Donc, moralité, l'attribut "name", dans les différents objets du formulaire, est absolument nécessaire pour pouvoir récupérer dans notre script Php les données transmises à partir du formulaire Html.

Faisons à nouveau un petit résumé des points importants à retenir :

  • Pour transférer les données depuis le formulaire Html vers le programme Php, il faut ajouter un attribut "method" à la balise "form" avec comme valeur le type de méthode de transfert qu'on a choisi d'utiliser, entre "get" et "post" ;
  • Pour pouvoir récupérer les données transférées à partir du formulaire directement dans la programme Php, il faut ajouter un attribut "name" avec une valeur non vide aux différents objets du formulaire sensés recevoir des données de l'utilisateur.

--

Un formulaire complet

Ok, nous venons de voir les différents principes de fonctionnement des formulaires Html, voyons maintenant tout ça en clair en réalisant un formulaire complet, comportant les différents types d'objets qu'on peut utiliser, à savoir : champ de texte simple, champ de texte multi-lignes, case à cocher, bouton radio, popup-menu et boutons de base (il y a d'autres objets un peu plus spécifiques que nous n'aborderons pas ici).

Le formulaire que nous allons réaliser ici, un peu bidons je l'avoue :blink: , nous servira tout de même lors de notre prochaine étape pour étudier la récupération et le traitement des données transmises au programme Php.

Voici donc le code Html de ce formulaire, quelques petites explication suivront :

<form action="formulaire.php" method="post">

<fieldset id="groupe_civilite">
<legend>Civilité</legend>
<input type="radio" name="civilite" id="monsieur" value="monsieur" /><label for="monsieur">Monsieur</label>
<input type="radio" name="civilite" id="madame" value="madame" /><label for="madame">Madame</label>
<input type="radio" name="civilite" id="mademoiselle" value="mademoiselle" /><label for="mademoiselle">Mademoiselle</label>
</fieldset>

<fieldset id="groupe_identite">
<legend>Identité</legend>
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" value="" />
<label for="prenom">Prénom : </label><input type="text" name="prenom" id="prenom" value="" />
</fieldset>

<fieldset id="groupe_adresse">
<legend>Adresse</legend>
<label for="adresse">Adresse complète : </label><br />
<textarea name="adresse" id="adresse" cols="50" rows="5"></textarea>
</fieldset>

<fieldset id="groupe_profession">
<legend>Profession</legend>
<label for="profession">Votre profession : </label>
<select name="profession" id="profession">
<option value="ingenieur">Ingénieur informatique</option>
<option value="programmeur">Analyste programmeur</option>
<option value="developpeur">Devéloppeur internet</option>
<option value="webdesigner">Web-designer</option>
<option value="integrateur">Intégrateur web</option>
</select>
</fieldset>

<fieldset id="groupe_equipement">
<legend>Équipement</legend>
<input type="checkbox" name="bureau" id="bureau" value="bureau" /><label for="bureau">Ordinateur de bureau</label><br />
<input type="checkbox" name="portable" id="portable" value="portable" /><label for="portable">Ordinateur portable</label><br />
<input type="checkbox" name="assistant" id="assistant" value="assistant" /><label for="assistant">Assistant personnel</label><br />
<input type="checkbox" name="agenda" id="agenda" value="agenda" /><label for="agenda">Agenda électronique</label>
</fieldset>

<fieldset id="groupe_validation">
<legend>Validation</legend>
<input type="reset" value="Annuler" />
<input type="submit" value="Valider" />
</fieldset>

</form>

On peut voir aussi ce formulaire en ligne par ici : http://fredomkb.free...formulaire.html

Bon, c'est vraiment du brut de décoffrage, sans aucun réglage de l'aspect, ce n'est pas bien important pour le moment, et puis, faut bien que je vous laisse quelque chose à faire non ? :huh: :P

Alors, voici quelques petites explications sur ce code :

Tout d'abord, on remarque la présence de deux nouvelles balises qu'on peut utiliser dans les formulaires Html pour structurer les différentes parties "logiques", ce sont les balises "fieldset" et "legend" (en notation double, balise ouvrante et fermante).

Ces deux balises ne sont nullement obligatoires, mais elles ajoutent une structuration sémantique du code du formulaire qui peut s'avérer fort utile.

Il est recommandé que ces deux balises soient toujours utilisées ensemble. La première, "fieldset", permet de créer un groupe d'objets suivant une logique thématique laissée au libre choix du développeur, la seconde balise, "legend", permet d'afficher un titre pour le groupe où elle se trouve.

Ensuite, on remarquera la présence d'une autre nouvelle balise, "label", il s'agit d'une étiquette, ou plus exactement d'un libellé, qu'on affecte à un objet et qu'on peut même lier à ce dernier avec l'attribut "for", qui pointe sur l'attribut "id" de l'objet cible.

Cette balise n'est pas obligatoire, mais elle ajoute un confort d'utilisation du formulaire assez intéressant, notamment pour les champs textes, les cases à cocher et les boutons radio.

Pour bien visualiser l'utilité de cette balise "label", je vous propose d'afficher sur votre navigateur ce petit bout de code Html (un simple extrait de notre formulaire) :

<fieldset id="groupe_avec_label">
<legend>Cases à cocher <strong>avec</strong> "label"</legend>
<input type="checkbox" name="bureau" id="bureau" value="bureau" /><label for="bureau">Ordinateur de bureau</label><br />
<input type="checkbox" name="portable" id="portable" value="portable" /><label for="portable">Ordinateur portable</label><br />
<input type="checkbox" name="assistant" id="assistant" value="assistant" /><label for="assistant">Assistant personnel</label><br />
<input type="checkbox" name="agenda" id="agenda" value="agenda" /><label for="agenda">Agenda électronique</label>
</fieldset>

<fieldset id="groupe_sans_label">
<legend>Cases à cocher <strong>sans</strong> "label"</legend>
<input type="checkbox" name="bureau" value="bureau" />Ordinateur de bureau<br />
<input type="checkbox" name="portable" value="portable" />Ordinateur portable<br />
<input type="checkbox" name="assistant" value="assistant" />Assistant personnel<br />
<input type="checkbox" name="agenda" value="agenda" />Agenda électronique
</fieldset>

Maintenant, affichez ce code dans votre navigateur et tentez de cocher différentes cases de chaque groupe, vous remarquerez que dans le premier groupe, celui composé avec la balise "label", on peut facilement cocher/décocher les différentes cases simplement en cliquant sur le texte qui les suit, alors que cette action, pourtant logique et évidente, n'a absolument aucun effet dans le second groupe, celui composé sans balise "label".

Vous pouvez vous amuser à tester l'utilité de cette balise "label" avec d'autres objets Html de formulaire, et vous verrez qu'elle devient vite indispensable pour peu qu'on souhaite améliorer l'accès aux objets du formulaire.

Voyons maintenant rapidement quelques particularités de certains des objets utilisés dans ce formulaire.

Commençons par le début (avez-vous déjà remarqué comme c'est toujours bien plus simple de commencer par le début ? :huh: :P ), c'est à dire, par le groupe des boutons radio "Civilité".

Pour bien utiliser la technique de choix des boutons radio, c'est à dire, que chaque fois qu'on coche l'un des boutons, les autres se décochent automatiquement, ce qui oblige à faire un choix simple et unique parmi toutes les propositions existantes, il faut s'assurer que la valeur de l'attribut "name" de chaque bouton est toujours le même, autrement dit, si les boutons avaient tous un nom différent, il serait impossible de faire un seul et unique choix.

Pour vous en convaincre, testez ces deux codes dans votre navigateur :

<fieldset id="noms_identiques">
<legend>Boutons radio avec des <strong>noms identiques</strong></legend>
<input type="radio" name="civilite" id="monsieur" value="monsieur" /><label for="monsieur">Monsieur</label>
<input type="radio" name="civilite" id="madame" value="madame" /><label for="madame">Madame</label>
<input type="radio" name="civilite" id="mademoiselle" value="mademoiselle" /><label for="mademoiselle">Mademoiselle</label>
</fieldset>

<fieldset id="noms_differents">
<legend>Boutons radio avec des <strong>noms différents</strong></legend>
<input type="radio" name="monsieur" id="monsieur" value="monsieur" /><label for="monsieur">Monsieur</label>
<input type="radio" name="madame" id="madame" value="madame" /><label for="madame">Madame</label>
<input type="radio" name="mademoiselle" id="mademoiselle" value="mademoiselle" /><label for="mademoiselle">Mademoiselle</label>
</fieldset>

Pour les groupes "Identité" et "Adresse" il n'y a peut-être rien à préciser d'intéressant, si ce n'est que la syntaxe de la balise "textarea" est un peu particulière par rapport à la syntaxe quasi identique des différents types de balise "input".

Dans le groupe "Profession", nous avons utilisé un popup-menu (balise "select") avec une liste de choix fixe (balises "option"), c'est à dire que l'utilisateur est obligé de choisir l'un des items et ne peut proposer autre chose.

Ce type de menu local est très utilisé, notamment pour faire des listes de langues, des monnaies, des pays, des mois de l'année, etc., mais, dans d'autres cas (comme le nôtre par exemple), la liste ne peut couvrir l'ensemble des choix possibles, du coup, en général, on accompagne le popup-menu d'un champ de texte afin que l'utilisateur puisse indiquer son choix personnalisé.

Enfin, dernière petite remarque concernant cette balise "select" et ses différentes balises "option", seule la balise "select" dispose d'un attribut "name", les balises "option" se contentant d'avoir juste un attribut "value" où l'on inscrit la valeur qu'on désire récupérer dans notre programme Php.

Le groupe "Équipement" est, quant à lui, composé des simples cases à cocher, chacune possédant une valeur unique et différentes des autres pour l'attribut "name".

Cette manière de faire, c'est à dire, en donnant un nom unique à chaque case à cocher, est la plus simple et directe, mais une autre syntaxe est autorisée et très utilisée, consistant à donner un nom identique à toutes les cases à cocher en ajoutant à la fin du nom un crochet ouvrant et un autre fermant "[]", exactement comme nous l'avons déjà vu pour la déclaration et l'affectation des variables de type "array" indexées.

Cette utilisation a l'avantage de regrouper les différents choix faits par l'utilisateur dans une même clé, et les valeurs sont transmises au programme Php sous forme d'un "array" indexé, voici un petit exemple de cette tecnique :

<fieldset id="nom_identique">
<legend>Cases à cocher avec un <strong>nom identique</strong></legend>
<input type="checkbox" name="equipement[]" value="bureau" />Ordinateur de bureau<br />
<input type="checkbox" name="equipement[]" value="portable" />Ordinateur portable<br />
<input type="checkbox" name="equipement[]" value="assistant" />Assistant personnel<br />
<input type="checkbox" name="equipement[]" value="agenda" />Agenda électronique
</fieldset>

Nous n'irons pas plus loin dans l'explication de cette technique, à vous de la tester et voir ce qu'elle peut apporter.

Enfin, dernier groupe, celui des boutons de validation, composé de deux boutons standards, un de type "reset", qui a pour rôle de ré-initialiser tout le formulaire (c'est à dire, de mettre tous les objets à leur valeur par défaut), puis le bouton de type "submit" qui se charge de valider l'envoi des données issues du formulaire vers le programme Php.

Attention, le mot "valider" est ici utilisé un peu abusivement, puisque le formulaire n'est pas vraiment validé (dans notre cas), dans le sens "testé" et/ou "contrôlé", il est juste envoyé au programme Php.

--

Voilà, je sais, c'est long... très long, et même trop looong :ouch: ... mais bon, que voulez-vous, il y avait quand-même plein de choses à dire... :blink:

Et encore, j'ai comme le sentiment que vous allez tous me signaler qu'il manque ceci ou cela dans mes explications... je vous en prie, si c'est le cas, ne vous en privez pas... parce que là, j'avoue que je sature un peu :(

Ok, les travaux pratiques ne viendront que demain, pour l'heure, il temps que j'aille me reposer un peu... sinon, c'est comme d'hab, toutes les remarques et suggestions sont les bienvenues :up:

Prochaine étape : Php, Traitement des Données

Allez, bonne nuit à tous ;)

--

Ce message a été modifié par Fredo d:o) - 08 mars 2010 - 03:31 .

Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#44 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 09 mars 2010 - 09:19

Bonjour à tous :)

Je sais, ça c'est fait un peu attendre, mais voici enfin les travaux pratiques de cette 4e étape (j'espère que vous avez bien potassé, car ça va pas être de la tarte :huh: ... je vous l'dis moi :w00t: )

--

TP 4 : Html, Les Formulaires

Exercice 1 :

Développer le code Html d'un formulaire contenant les champs suivants : civilité, nom et prénom.

--

Exercice 2 :

Développer le code Html d'un formulaire contenant les champs suivants, repartis en plusieurs groupes logiques : civilité, nom, prénom, secteur d'activité professionnelle (imaginer une liste de secteurs d'activité), fonction (imaginer une liste de fonctions), téléphone fixe, téléphone mobile, adresse e-mail.

--

Exercice 3 :

Développer le code Html d'un formulaire de participation aux commentaires d'un blog (champs obligatoires : nom ou pseudo, adresse e-mail, titre du message, texte du message).

--

Exercice 4 :

Développer le code Html d'un formulaire complet de réservation d'un concert de musique (champs obligatoires : nom, prénom, adresse e-mail, téléphone, nombre de réservations, acceptation des conditions générales d'utilisation).

--

Bon, exceptionnellement, Go'Gule, je ne te demanderai pas de faire les 4 exercices, 3 suffiront amplement (à toi de les choisir), seulement, il faut qu'ils soient irréprochables, la moindre imperfection, la moindre approximation, la moindre erreur, et tu sera contraint de faire également le 4e exercice... (oui, oui :P )

Noooooon mais :blink: saaaans blaaagues... :lol:

Allez, au boulot Go'Gaule, et tâche de tout bien soigner aux petits oignons, d'acc ? ;)

PS. Haaaa... quel pied, le sadisme jouissif des profs... :w00t: ... je ne pensais pas y goûter un jour :yahoo: :P

;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#45 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 09 mars 2010 - 16:52

Bonjour à tous et toutes .

Exercice n°1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exercice.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="Exercice.css"/>
<html>
</head>
	<body>
	<form metthod="post" action="Exercice.php">
	<p class="titre">Coordonnees</p >
	<fieldset id="coordonnees">
	<label>Civilite</label>
	<select name="Civilite">
	<option value="monsieur">Monsieur</option>
	<option value="madame">Madame</option>
	<option value="mademoiselle">Mademoiselle</option>
	</select>
	<fieldset id="nom_prenom">
	<label>Nom :</label><input type="text" name="nom" size="30" /><br />
	<label>Prenom :</label><input type="text" name="prenom" size="30" /><br />
	</fieldset></fieldset>
	</form>
	</body>
</html>

p.titre {
backgroung:#DED983;
color:#345071;
paddind:.2em .3em;
font-size:1.2em;
border:2px outset #DED983;
position:relative;
margin-bottom:-1em;
width:10em;
margin-left:1em;
margin-top:1em;
}
fieldset {
border:none;
margin-bottom:1em;
width:24em;
padding-top:1.5em;
}
select {
margin-left:9em;
margin-bottom:0;
}
fieldset#coordonnees {
background:#A4D8EE;
border:outset #A4D8EE;
}
#coordonnees label {
position:absolute;
font-size:90%;
padding-top:.2em;
left:20px;
}
#coordonnees input {
margin-left:9em;
line-height:1.4em;
margin-bottom:.2em;
}
Fichier joint  Image 14.png   13,96 Ko   11 Nombre de téléchargements 

Je continue ..
Cordialement.

PS:

Fredo

PS. Haaaa... quel pied, le sadisme jouissif des profs... :w00t: ... je ne pensais pas y goûter un jour :yahoo: :P

:NonNon: :NonNon:

Ce message a été modifié par Go'Gaule - 10 mars 2010 - 17:08 .

En jachère ... bientôt le printemps ..! et les semailles !

#46 sigma6

sigma6

    Macfr addict

  • Membres
  • PipPipPipPipPip
  • 960 Messages :
  • Sexe:Masculin
  • Localisation:GVA
  • Passions:Bof...

Posté 09 mars 2010 - 17:56

je te recolle ton code html avec les tabulations dans le bon sens, tu verras peut-être tes erreurs plus facilement.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exercice.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="Exercice.css"/>
<html>
</head>
        <body>
       		<form metthod="post" action="Exercice.php">
        		<p class="titre">Coordonnees</p >
        		<fieldset id="coordonnees">
        			<label>Civilite</label>
        			<select name="Civilite">
        				<option value="monsieur">Monsieur</option>
        				<option value="madame">Madame</option>
        				<option value="mademoiselle">Mademoiselle</option>
        			</select>
        			<fieldset id="nom_prenom">
        				<label>Nom :</label><input type="text" name="nom" size="30" /><br />
        				<label>Prenom :</label><input type="text" name="prenom" size="30" /><br />
        			</fieldset>
			</fieldset>
   	     </form>
        </body>
</html>


Je suis pas sûr que ce soit autorisé de mettre un fieldset dans un autre.

Après, petit détail, mais <p class="titre"> est un peu faux, il y a les balises H pour ca, un petit <h3> ou je sais pas combien serait plus adapté.

Et comme c'est pas moi le prof, j'vais pas te reprocher de faire de la lèche avec ton css Image IPB (il est bourré d'erreurs soit dit en passant… chaque choses en son temps hein?)

#47 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 09 mars 2010 - 18:04

Salut Go'Gaule :)

Bon, ça a l'air plutôt pas mal tout ça :)

Quelques petites choses à corriger néanmoins :

  • Change le DOCTYPE, remplace ce "loose.dtd" par celui-ci de préférence :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ;
  • Fais attention aux copiers/collers, tu as deux fois la balise d'ouverture "html", ça peut ne pas bien plaire à certains navigateurs :blink: ;
  • L'attribut "method" de la balise "form" ne prend qu'un seul "t", puis, tâches de placer l'attribut "action" en premier, ce n'est pas une obligation mais plutôt une question d'habitude, et peut-être même d'une certaine logique (on indique d'abord le chemin du programme, puis, ensuite on choisi la méthode de transfert des données... enfin, comme dirait Jean-Luc, ça se discute ;) ) ;
  • On peut évidemment emboîter plusieurs balises "fieldset", mais là ce n'est pas bien utile, d'ailleurs, un seul groupe aurait peut-être suffit ici ;
  • En parlant des "fieldset", selon la documentation, ils acceptent une balise "legend", qui a pour rôle d'afficher le titre du groupe, du coup, ton titre "Coordonnées" placé dans une balise "p" n'est pas bien justifié, il aurait suffit de le mettre dans une balise "legend" pour avoir quelque chose de plus conforme ;
  • Pour les attributs "name" des objets du formulaire, tâche de les écrire toujours en minuscules (cf. "Civilite"), ce n'est pas une obligation mais plutôt une pratique largement adoptée.

Pour le reste je n'ai rien d'autre à dire, ça me paraît très bien, ha oui, juste une recommandation, fais attention à l'indentation du code, je préfère qu'il n'y en ait aucune plutôt qu'une pas très claire ou juste, ok ? :huh:

Juste une petite dernière (pour la route :P :D ), ta mise en forme Css n'est pas mal, hormis une ou deux petites coquilles... enfin, au niveau de l'aspect, on ne vas pas discuter les questions de goût, seulement, pour les autres exercices, même si tu le fais de ton côté, ce n'est pas bien nécessaire pour l'instant de publier ici tes styles, l'important étant de bien construire le code Html des formulaires... je salue tout de même ton effort de tenter de faire les choses bien :up:

Corrige d'abord ces petites erreurs et coquilles avant de te pencher sur un autre exercice... d'acc ?

@+ :)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#48 BorakLeRouge

BorakLeRouge

    Hamster d'or (dort ?)

  • Membres
  • PipPipPipPipPipPipPip
  • 3 965 Messages :
  • Configuration:Mac Mini Core i7 - 16Go - 2To Hybride
  • Sexe:Masculin
  • Localisation:Cormeilles en Parisis.rb
  • Passions:Macintosh, Photo, Haute-fidélité, Ski, Roller, Call of Duty, Tactical Ops, Counter Strike, Worms 1

Posté 09 mars 2010 - 18:05

Oups, rien dit, post à effacer :)

Ce message a été modifié par BorakLeRouge - 09 mars 2010 - 18:06 .

Je fais mes sauvegardes sur NSA-Cloud !

Au bout de 10 ans, le vieux MacPro vient de laisser sa place à un MacMini i7...


#49 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 09 mars 2010 - 18:16

je te recolle ton code html avec les tabulations dans le bon sens, tu verras peut-être tes erreurs plus facilement.

Oui, c'est vrai qu'une bonne indentation peut rendre le code plus lisible...

Je suis pas sûr que ce soit autorisé de mettre un fieldset dans un autre.

Tiens, perso j'aurais dis que c'est possible, mais là tu m'insinues un vieux doute... :unsure: ... j'irais voir ça de plus près ce soir...

Après, petit détail, mais <p class="titre"> est un peu faux, il y a les balises H pour ca, un petit <h3> ou je sais pas combien serait plus adapté.

En effet, tant qu'à faire, une balise "H" aurait été plus adaptée, mais là, je pense qu'une bonne gestion des balises "legend" à l'intérieur des "fieldset" aurait été largement suffisant...

Et comme c'est pas moi le prof, j'vais pas te reprocher de faire de la lèche avec ton css (il est bourré d'erreurs soit dit en passant… chaque choses en son temps hein?)

Oui, ça pourrait bien être pris pour de la lèche, mais bon, faut bien qu'il essaie d'amadouer un peu les tendances sadiques de son prof :w00t: non ? :P :lol:

;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#50 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 09 mars 2010 - 18:48

Bonsoir à toutes et tous .

Sigma6 je te recolle ton code html avec les tabulations dans le bon sens, tu verras peut-être tes erreurs plus facilement.


Oui . Je sais , mais indentation du code m'embrouille ..

Sigma6 Après, petit détail, mais <p class="titre"> est un peu faux, il y a les balises H pour ca, un petit <h3> ou je sais pas combien serait plus adapté.


Cela , je ne sais pas : Mais c'est très utile pour créer des effets de titres.

Je dit une bétise car on peut agir de la même façon avec les balises H ..

Merci.
Cordialement.

Ce message a été modifié par Go'Gaule - 09 mars 2010 - 18:49 .

En jachère ... bientôt le printemps ..! et les semailles !

#51 sigma6

sigma6

    Macfr addict

  • Membres
  • PipPipPipPipPip
  • 960 Messages :
  • Sexe:Masculin
  • Localisation:GVA
  • Passions:Bof...

Posté 09 mars 2010 - 18:54

Bon, après relecture plus approfondie et vérification par le validator du w3c, le fieldset dans le fieldset n'a pas l'air de lui poser problème.

voici la version corrigée et valide, après ya moyen de faire plus propre même si c'est déjà valid comme ca


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exercice.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="Exercice.css"/>
</head>
        <body>
                <form method="post" action="Exercice.php">
                        <p class="titre">Coordonnees</p >
                        <fieldset id="coordonnees">
                                <label>Civilite</label>
                                <select name="Civilite">
                                        <option value="monsieur">Monsieur</option>
                                        <option value="madame">Madame</option>
                                        <option value="mademoiselle">Mademoiselle</option>
                                </select>
                                <fieldset id="nom_prenom">
                                        <label>Nom :</label><input type="text" name="nom" size="30" /><br />
                                        <label>Prenom :</label><input type="text" name="prenom" size="30" /><br />
                                </fieldset>
                        </fieldset>
		</form>
        </body>
</html>



#52 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 10 mars 2010 - 09:12

Bonjour à tous zétoutes .

Ecercice n°2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exercice.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="Exercice.css"/>
</head>
	<body>
	<form method="post" action="Exercice.php">
	<p class="titre">Coordonnees</p >
	<fieldset id="coordonnees">
	<label>Civilite</label>
	<select name="Civilite">
	<option value="monsieur">Monsieur</option>
	<option value="madame">Madame</option>
	<option value="mademoiselle">Mademoiselle</option>
	</select>
	<fieldset id="nom_prenom">
	<label>Nom :</label><input type="text" name="nom" size="30" /><br />
	<label>Prenom :</label><input type="text" name="prenom" size="30" /><br />
	</fieldset>
	<p class="titre">Contact</p>
	<fieldset id="contact">
	<label>Telephone fixe :</label><input type="text" name"telephonefixe" size="15"><br/>
	<label>Telephone mobile :</label><input type="text" name"telephonemobile" size="15"><br/>
	<label>Adresse eMail :</label><input type="text" name="adresseemail" size="20">
	</fieldset>
	<p class="titre">Profession</p>
	<fieldset id="profession">
	<label>Profession</label>
	<select name="Profession">
	<option value="menuisier">Menuisier</option>
	<option value="remouleur">Remouleur</option>
	<option value="decolleteur">Decolleteur</option>
	<option value="vitrier">Vitrier</option>
		</fieldset>

                <fieldset id="boutons">
                        <input type="reset" name="annuler" value="Annuler" />
                        <input type="submit" name="envoyer" value="Envoyer" />
                 </fieldset>

	</fieldset>
	</form>
	</body>
</html>




Voici le n°3 .

Je ne suis pas sur d'avoir compris l'énoncé de l'exercice .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Exercice.html</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="screen" href="Exercice3.css"/>
</head>
	<body>
	   <form method="post" action="Exercice.php">
		 <h3>Connection</h3>	
		   <fieldset id="connection">
			<label>Nom :</label><input type="text" name="nom" size="30" /><br/>
			<label>Pseudo :</label><input type="text" name="pseudo" size"30" /><br/>
			<label>Mot de Passe :</label><input type="password" name="motdepasse" size="25" /><br/>
			<label>eMail :</label><input type="eMail" name="email" size="25" />
		 </fieldset>

		<h3>Commentaires</h3>
			<fieldset id="commentaires">
			<textarea name="commentaires" rows="5" cols="60" valeur="Vos commentaires" />Vos commentaires</textarea>
		 </fieldset>
			
		<fieldset id="boutons">
			<input type="reset" name="annuler" value="Annuler" />
			<input type="submit" name="envoyer" value="Envoyer" />
		 </fieldset>
		</form>
	</body>
</html>

Si vous désirez le tester , le code CSS déjà utilisé fonctionne (les balises de références sont les mêmes .)

Merci Sigma6 .

Je me suis aperçu , qu'utiliser les balises H était plus pratique ... :blush:

Cordialement.

Ce message a été modifié par Go'Gaule - 10 mars 2010 - 17:10 .

En jachère ... bientôt le printemps ..! et les semailles !

#53 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 10 mars 2010 - 15:12

Salut Go'Gaule :)

Wouw, deux exercices le même jour :o ... fais gaffe, à ce rythme tu risques de chopper le virus du développeur :P :D (je te taquine un peu, ne le prends pas mal ;) )

Bon, juste une petite chose, afin que ceux qui découvrent cette discussion puissent s'y retrouver, enlève ta réponse pour l'exercice 2 du message N° 45 et ajoute-le au début du message N° 52, sinon je crains que tout le monde n'arrivera pas à suivre correctement la chronologie des échanges (et puis, on t'a déjà dit que les CSS ce n'était pas important pour le moment <_< ... d'acc ? :) )

Alors, il y a toujours un problème au niveau de l'indentation de tes codes Html, ce n'est pas très grave en soit, mais une mauvaise indentation peut parfois être plus chiant à suivre (et même moche pour les yeux) que pas d'indentation du tout... bon... passons... :huh:

Exercice 2

Alors, en vrac :

  • tu as oublié les boutons de validation ;
  • tu insistes avec les titres en "p" alors qu'il existe une balise "legend" spécialement adaptée pour ça ;
  • il y a encore un emboîtement des "fieldset" qui n'est pas nécessaire ;
  • ne publie pas à chaque fois les en-têtes Html et tout le reste, juste le code de la balise "form" suffit pour l'instant ;
  • la syntaxe de tes balises "br" n'est pas correcte, regarde dans mes exemples pour voir la bonne syntaxe ;
  • lorsque tu mets des balises "label" pour des objets de type "input", pense à ajouter un attribut "id" à l'objet en question et un attribut "for" dans la balise "label" pontant ver le "id" de l'objet, ce n'est pas une obligation mais ça ajoute un tel confort d'utilisation qu'il serait bête de s'en priver ;
  • l'attribut "size" dans les "input" de type "text" peut être avantageusement remplacé par un style Css dédié, pas obligatoire mais plus souple à l'usage ;
  • dans l'énoncé de cet exercice je demandais d'imaginer une liste de fonctions, avec des case à cocher par exemple... oublié ? :huh:

Ok, voici donc ton code corrigé par mes soins (si j'ai oublié des choses, merci de me corriger Svp), tu remarqueras que je n'ai pas indenté le code, j'ai juste séparé les différents blocs logiques par un retour à la ligne vierge... c'est juste à titre d'exemple, tu n'est pas obligé de faire à l'identique, mais tâches quand-même de soigner un peu leur présentation, ok ? :)

<form action="Exercice.php" method="post">

<fieldset id="coordonnees">
<legend>Coordonnées</legend>
<label>Civilite : </label>
<select name="civilite">
<option value="monsieur">Monsieur</option>
<option value="madame">Madame</option>
<option value="mademoiselle">Mademoiselle</option>
</select><br />
<label for="nom">Nom :</label><input type="text" name="nom" id="nom" size="30" /><br />
<label for="prenom">Prenom :</label><input type="text" name="prenom" id="prenom" size="30" /><br />
</fieldset>

<fieldset id="contact">
<legend>Contact</legend>
<label for="fixe">Téléphone fixe : </label><input type="text" name"telephonefixe" id="fixe" size="15"><br />
<label for="mobile">Téléphone mobile : </label><input type="text" name"telephonemobile" id="mobile" size="15"><br />
<label for="email">Adresse e-mail : </label><input type="text" name="adresseemail" id="email" size="20">
</fieldset>

<fieldset id="profession">
<legend>Profession</legend>
<label>Activité : </label>
<select name="activite">
<option value="menuisier">Menuiserie</option>
<option value="remouleur">Remoulage</option>
<option value="decolleteur">Decollage</option>
<option value="vitrier">Vitrier</option>
</select><br />

<label>Fonctions : </label><br />
<input type="checkbox" name="chef" id="chef" value="chef" /><label for="chef">Chef d'entreprise</label><br />
<input type="checkbox" name="achats" id="achats" value="achats" /><label for="achats">Responsable achats</label><br />
<input type="checkbox" name="chantier" id="chantier" value="chantier" /><label for="chantier">Responsable chantier</label><br />
<input type="checkbox" name="controle" id="controle" value="controle" /><label for="controle">Contrôle qualité</label><br />
<input type="checkbox" name="gestion" id="gestion" value="gestion" /><label for="gestion">Responsable gestion</label>
</fieldset>

<fieldset id="validation">
<legend>Validation</legend>
<input type="reset" value="Annuler" />
<input type="submit" value="Valider" />
</fieldset>

</form>

Exercice 3

Bon, à quelque chose près, mêmes remarques en vrac que pour l'exercice précédent.

Voici donc le code corrigé :

<form action="Exercice.php" method="post">

<fieldset id="identite">
<legend>Identité</legend>
<label for="nom">Nom ou pseudo : </label><input type="text" name="nom" id="nom" size="30" /><br />
<label for="email">Adresse e-mail : </label><input type="text" name="email" id="email" size="30" />
</fieldset>

<fieldset id="commentaire">
<legend>Commentaire</legend>
<label for="titre">Titre du message : </label><input type="text" name="titre" id="titre" size="60" /><br />
<label for="message">Texte du message : </label><br />
<textarea name="message" id="message" rows="5" cols="60"></textarea>
</fieldset>

<fieldset id="boutons">
<input type="reset" name="annuler" value="Annuler" />
<input type="submit" name="envoyer" value="Envoyer" />
</fieldset>

</form>

Alors, en te basant sur ces corrections, tâches de faire l'exercice 4 en prenant bien soin de ne pas reproduire les mêmes petites erreurs, il est important que tu arrives à produire un code Html le plus propre possible, ce sera un soucis de moins à gérer lorsqu'on attaquera le programme Php.

Allez, au boulot... quoi, ce n'est pas déjà fait ? :blink: :lol:

;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#54 Go'Gaule

Go'Gaule

    Grand(e) bavard(e)

  • Bannis
  • PipPipPip
  • 445 Messages :
  • Configuration:eMac 700Mhz MaBook 13" 2.2 jsuis pas riche !
  • Sexe:Masculin
  • Localisation:Dordogne

Posté 10 mars 2010 - 17:18

Bonjour à tous .

Fredo

il y a encore un emboîtement des "fieldset" qui n'est pas nécessaire ;


Oui c'est pour le désigne "availecss".

l'attribut "size" dans les "input" de type "text" peut être avantageusement remplacé par un style Css dédié, pas obligatoire mais plus souple à l'usage ;


Avec juste CSS , j'arrive pas .(Pour le moment?).

Exercice n°4

<form method="post" action="Exercice4.php">
  <fieldset id="Reservations">
	<legend>Identite</legend>
	  <label for="Nom">Nom :</label><input type="text" name="nom" id="nom" size="30" /><br />
	  <label for="Prenom">Prenom :</label><input type="text" name="prenom" id="prenom" size="30" /><br />
	  <label for="Adresse eMail">Adresse eMail :</label><input type="text" name="adresseemail" id="adresseemail" size="30" /><br />
	  <label for="N° Téléphone">Numero de telephone :</label><input type="text" name="ntelephone" id="ntelephone" size="30" />
	 </fieldset>
	
   <fieldset id="Nombre de Places">
	  <legend>Nombre de Places</legend>
		<label for="Nombres de Places">Nombres de places :</label><input type="text" name="nplaces" id="nplaces" size="10" /><br />
		<label for="Prix des Places">Prix des Places :</label>
			<select name="Prix des Places">
				<option value="30€">1er 30€</option>
				<option value="50€">2eme 50€</option>
				<option value="80€">3eme 80€</option>
				<option value="160€">Parterre 160€</option>
				</select><br />
		<label for="Total de votre Achat :">Total de vos achats :</label><input type="text" name="total" id="total" size="20" />
	  </fieldset>
	
	  <fieldset id="Confirmation de votre achat">
	<legend>Confirmation de votre Achat</legend>
		<label>Oui :</label><input type="checkbox" value="OUI" />
		<label>Non :</label><input type="checkbox" value="NON" action="reset" /><br />
		<label>Acceptation des conditions generales de vente :</label><input type="submit" value="Accepter" />
		<label>Refus des conditions generales de vente :</label><input type="submit" value="Refuser" action="reset" />
	  </fieldset>
	
 <fieldset>
  <legend>Paiement</legend>
	<label>Payer votre achat :</label><br /><input type="submit" value="Payer" />
	</fieldset>
	
  <fieldset id="Reception">
	 <legend>Reception</legend>
		<p>Un couuriel de confirmation va vous etes adresse a votre adresse eMail. <br />
		vous pourrez imprimer vos billets .<br />
		
		BONNE SOIREE PARMIS NOUS ! </>
		</fieldset>
	</fieldset>


Cordialement.

Ce message a été modifié par Go'Gaule - 10 mars 2010 - 19:50 .

En jachère ... bientôt le printemps ..! et les semailles !

#55 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 10 mars 2010 - 22:52

Salut Go'Gaule :)

Bon bein, ce n'est pas mal tout ça... il y a quelques bonnes idées, malgré encore des petites erreurs par-ci et par-là... ok, voyons rapidement tout ça...

Tout d'abord, il faut absolument que tu comprennes le rôle de l'attribut "id", il s'agit d'un identifiant unique pour bien distinguer chaque objet dans un code Html. La valeur de cet attribut est libre, mais par convention on applique les mêmes règles que pour l'attribut "name", c'est à dire, on écrit toujours en minuscules, sans espaces si possible (voir contribution de Sigma6 ci-après), sans accents ni caractères spéciaux. Encore une fois, comme beaucoup de chose en Html, ce n'est pas une obligation, c'est une pratique largement utilisée car étant celle qui est la plus efficace, toute plate-formes et navigateurs confondus.

Ensuite, l'attribut "for" de la balise "label", pour qu'il fonctionne correctement, il doit donc pointer sur l'attribut "id" de l'objet associé, je sais, c'est un peu compliqué à comprendre, mais la valeur de "for" doit être identique de la valeur de "id" pour que le navigateur puisse comprendre de quel objet exactement le libellé (balise "label") est associé... par exemple :

<label for="un_objet">Champ texte : </label><input type="text" name="champ_texte" id="un_objet" value="" />

Donc, chaque fois qu'on va cliquer sur le texte de la balise "label", c'est à dire sur "Champ texte :", le navigateur cherchera dans l'attribut "for" de cette balise pour savoir quel objet lui est associé avec un attribut "id" identique, s'il trouve une correspondance, l'objet cible, ici le "input" sera automatiquement activé par le navigateur.

Donc, en résumé, la valeur de l'attribut "for" d'une balise "label" doit obligatoirement être identique à la valeur de l'attribut "id" d'un objet du formulaire (input, textarea, select, etc.).

Très intéressante l'idée de choisir des places selon leur prix, et de pouvoir donner le total à l'utilisateur... :up:

En revanche, sur la partie de confirmation de l'achat (la réservation plus exactement), tu t'es un peu compliqué la vie je trouve, il y a plus simple à faire et, surtout, plus clair pour l'utilisateur.

Pour le reste, très bonne initiative d'avoir pensé à mettre un message d'information sur les détails de la procédure, à affiner un peu, mais l'idée y est :clap:

Pour le bouton "submit", je pense qu'on va laisser à un peu plus tard les histoire de payement en ligne, ce n'est absolument pas à notre portée pour le moment (même moi je n'y toucherait pas tellement c'est pointu et délicat côté sécurité), donc, contentons-nous uniquement d'assurer une réservation... c'est déjà pas mal je trouve ;)

Ok, voici le code corrigé à ma sauce (des ajustements et améliorations restent évidemment possibles) :

<form action="Exercice4.php" method="post" onsubmit="if (document.getElementById('conditions').checked == false) { alert('Vous n\'avez pas acceptez les conditions générales de réservation, celle-ci ne peut être faite sans cette confirmation, merci.'); return false; } else { return true; }">

<fieldset id="identite">
<legend>Identité</legend>
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" size="30" /><br />
<label for="prenom">Prénom : </label><input type="text" name="prenom" id="prenom" size="30" /><br />
<label for="adresseemail">Adresse e-mail : </label><input type="text" name="adresseemail" id="adresseemail" size="30" /><br />
<label for="ntelephone">Numéro de téléphone : </label><input type="text" name="ntelephone" id="ntelephone" size="30" />
</fieldset>

<fieldset id="reservation">
<legend>Réservation</legend>
<label for="nplaces">Nombres de places (de 1 à 9 maximum) : </label><input type="text" name="nplaces" id="nplaces" value="1" size="2" maxlength="1" /><br />
<label for="prixplaces">Prix des places : </label>
<select name="prixplaces" id="prixplaces">
<option value="30">1er prix : 30 €</option>
<option value="50">2e prix : 50 €</option>
<option value="80">3e prix : 80 €</option>
<option value="160">Vip : 160 €</option>
</select><br />
<label for="total">Prix total de votre réservation : </label><input type="text" name="total" id="total" size="10" />
<input type="button" value="Calcul du total" onclick="document.getElementById('total').value = document.getElementById('nplaces').value * document.getElementById('prixplaces').value + ' €';" />
</fieldset>

<fieldset id="confirmation">
<legend>Confirmation</legend>
<a href="conditions_generales.html" title="Conditions générales de réservation" target="_blank">Conditons générales de réservation</a><br />
<input type="checkbox" name="conditions" id="conditions" value="oui" /><label for="conditions">En cochant cette case vous déclarez avoir pris connaissance et accepter les termes établies dans les conditions générales de réservation (voir lien ci-dessus).</label>
</fieldset>

<fieldset id="infos">
<legend>Informations</legend>
Un couuriel de confirmation vous sera adressé à votre adresse e-mail, afin que vous puissiez l'imprimer et le présenter au guichet pour l'achat de vos places réservées. Pour toute question ou demande d'information complémentaire, merci d'adresser un courriel au responsable commercial, M. Martin au : <a href="mailto:martin@concert.fr" title="Adresse e-mail de M. Martin">martin[@]concert.fr</a>, une réponse vous sera adressé sous 48 heures.<br />
<em>Nous vous souhaitons de vivre un excellent concert !</em>
</fieldset>

<fieldset id="validation">
<legend>Validation</legend>
<input type="reset" value="Annuler" />
<input type="submit" value="Valider" />
</fieldset>

</form>

Si tu test ce code, tu verras que j'y ai mis un zeste de JavaScript, tout d'abord pour vérifier que la case concernant les conditions générales de réservation a bien été cochée au moment de la validation du formulaire, à défaut de quoi on affiche un petit message d'avertissement.

L'autre petit bout de JavaScript est placé à côté du champ "Prix total de votre réservation", histoire de faire rapidement le calcul suivant le nombre de places demandées et le prix de place choisi.

On n'est pas obligé de faire ces vérifications avec du JavaScript, on peut bien les faire directement dans le programme Php, nous verrons donc ça dans l'étape suivante.

Voilà, si tu as des questions, n'hésites pas :)

Allez, bonne nuit à tous :)

Ce message a été modifié par Fredo d:o) - 11 mars 2010 - 14:35 .

Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb

#56 sigma6

sigma6

    Macfr addict

  • Membres
  • PipPipPipPipPip
  • 960 Messages :
  • Sexe:Masculin
  • Localisation:GVA
  • Passions:Bof...

Posté 11 mars 2010 - 09:29

La valeur de cet attribut est libre, mais par convention on applique les mêmes règles que pour l'attribut "name", c'est à dire, on écrit toujours en minuscules, sans espaces si possible, sans accents ni caractères spéciaux.


Pitite correction… on ne met JAMAIS d'espace dans un ID héhé. tu peux mettre plusieurs class dans un paramètre class (séparées chacune par des espaces) mais comme un id est unique, il n'y a qu'une valeur possible.

petit exemple

<div id="menu" class="coins_arrondis ombre fond_rouge">…</div>


donc la je viens de créer un menu, qui a comme id "menu", logique, après, on y applique 3 classes différentes dessus, une pour lui donner des coins arrondis, une pour une ombre et une pour un fond rouge. C'est la la puissance des class, si tu as 36 mille éléments dans ta page qui doivent avoir un fond rouge, t'es pas obligé de faire 36 mille class si des fois il y a une ombre portée ou des fois il y a des coins arrondis.

Et comme le C de css est pour Cascade, le dernier style appliqué écrase les autres. si par exemple dans ma classe coins_arrondis j'ai un fond vert, la classe fond_rouge va passer par dessus.

#57 FredoMkb

FredoMkb

    ...bosseigne...

  • Membres
  • PipPipPipPipPipPipPip
  • 2 645 Messages :
  • Configuration:iMac-SowLeopard
  • Sexe:Masculin
  • Localisation:StÉ
  • Passions:À part rien, absolument tout le reste !

Posté 11 mars 2010 - 14:34

Saut :)

Pitite correction… on ne met JAMAIS d'espace dans un ID héhé. tu peux mettre plusieurs class dans un paramètre class (séparées chacune par des espaces) mais comme un id est unique, il n'y a qu'une valeur possible.

Oui, tu as raison, j'avais comme un doute, c'est pourquoi j'ai été prudent dans mon affirmation, et tu as vu juste, sachant qu'on peut mettre plusieurs valeurs à l'attribut "class", j'ai bêtement pensé que ça devait être également possible avec l'attribut "id", mais c'est vrai que ce serait absurde étant donné le caractère unique de cet identifiant.

Merci pour cette correction Simga :up:

;)
Fredo
"Un pas à la fois me suffit..." Gandhi
"Il n'y a rien de plus inutile que quelque chose d'inexistant. Il n'y a rien de plus utile que de tenter de le créer." FredoMkb




0 utilisateur(s) en train de lire ce sujet

0 membre(s), 0 invité(s), 0 utilisateur(s) anonyme(s)