Se connecter avec
S'enregistrer | Connectez-vous

Création formulaire de contact sur écran tactile

Dernière réponse : dans Programmation

Bonjour,
Je suis le membre d'une asbl et nous avons acheté une borne à écran tactile pour promouvoir notre asbl lors de foires et expos
Pour ce faire, j'ai créé une site offline et j'aurais voulu créer une partie formulaire de contact où les gens pourraient poser une question
Mais voici les choses pour lesquelles j'ai besoin d'aide :
1) la création du formulaire en lui-même : les différents champs à mettre
- nom
- prénom
- numéro de téléphone (facultatif)
- email (facultatif)
- question
2) que le formulaire soit sauvegardé sur le disque dur de la borne (dans un dossier qui se créerait avec la date de la création du formulaire)
3) comme il s'agit d'un écran tactile sans clavier il faudrait qu'à l'ouverture de la page de formulaire un clavier apparaisse afin que les gens puissent taper leur question et leurs infos
merci beaucoup pour votre aide car pour tout le reste pas de soucis mais là je sais vraiment pas du tout...

Autres pages sur : creation formulaire contact ecran tactile

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

Intéressant (vraiment).
Et c'est quoi la question ?

J'ai quand même quelques réponses :
* Formulaire HTML
* Base MYSQL ou autre (sqlite par exemple)

Pour le clavier, soit on en refait un, soit on se réutilise ce que propose le système d'exploitation.

et bien comment fait-on un formulaire

et comment fait-on pour faire apparaître un clavier virtuel afin de remplir ce formulaire? il me faudrait un clavier simplifié (donc pas de touche ALT CTRL et tout ça pour éviter les mauvaises manipulation)


je sais pas du tout comment faire donc je cherche des tutos simples ou une aide pour gros noob ^^
Expert Programmation

Euh, les noobs (*) ne sont pas acceptés ici :o 
Les novices (*) eux sont les bienvenus. :) 

_______________
(*)
Noobs : de newbie. Par extension, nouveau et pour longtemps dans telle discipline.
Novice : personne disposant d'un bagage faible voir nul, s'engageant dans la voie ardue de la connaissance.
Expert Programmation

Bon alors pour les formulaires, comme c'est la base, tu vas me faire le plaisir de te trouver tout seul un tutoriel pour zéro.

Spoiler
Demande à Gogol : http://www.google.fr/search?q=zéro+formulaire
(et en plus, le premier est le bon :D )


Ensuite, pour le clavier, ce sera un peu plus difficile, mais pas de panique.
On va jouer avec Javascript, tu vas voir, on va se poiler :lol: 

---------

J'attends ton formulaire...

bon je m'y attelle dès que possible... et j'espère passer de noob à bleu alors car ce n'est pas du tout mon métier la programmation et déjà mes pages en html me prirent beaucoup de temps (avec à peine une image et quelques hyperliens dedans)

mais bon vais essayer quand même ^^

bon, je me suis aidé de ton lien mais en changeant ce qu'il fallait pour que ça corresponde à mes besoins et voilà

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
    

  3. <head>
    

  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    

  5. <title>Document sans nom</title>
    

  6. </head>
    

  7.  
  8. <body>
    

  9.  
  10. <form method="post" action="cible_formulaire.php">
    

  11.  
  12.    <fieldset>
    

  13.        <legend>Si vous avez la moindre remarque ou question, n'hésitez pas à remplir ce formulaire et le service concerné vous recontactera dans les plus brefs délais.
    

  14.  
  15.        </legend><p>
    

  16.          <label for="nom">NOM :</label>
    

  17.          <input type="text" name="nom" id="nom" tabindex="1" />
    

  18.        </p>
    

  19.        <p>
    

  20.          <label for="prenom">Prénom : </label>
    

  21.          <input type="text" name="prenom" id="prenom" tabindex="2" />
    

  22.      </p>
    

  23. <p>
    

  24.   <label for="gsm">Numéro de téléphone / gsm : </label><input type="text" name="gsm" id="gsm" tabindex="3" />
    

  25.      </p>
    

  26.        <p>
    

  27.          <label for="email">Email : </label>
    

  28.          <input type="text" name="email" id="email" tabindex="4" />
    

  29.      <label for="precisions"><br />
    

  30.        <br />
    

  31.        Question / Commentaire :</label>
    

  32.      <br />
    

  33.            <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="5"></textarea>
    

  34.        </p>
    

  35.   </fieldset>
    

  36.  
  37.    <p>
    

  38.      <input type="submit" value="Envoyer" />
    

  39.      <input type="reset" value="Effacer" />
    

  40.    </p>
    

  41.  
  42. </form>
    

  43.  
  44.  
  45. </body>
    

  46. </html>


bon alors mes premières remarques :

niveau graphique c'est moche, faudra que je change cela

et surtout bcp plus important, comme il n'y aura pas de souris ou trackball sur la borne a écran tactile, comment faire pour passer d'un champ à l'autre pour l'utilisateur?

merci encore
Expert Programmation

Bon, j'ai quand même regardé ton code. :sarcastic: 
Eh, c'est pas mal du tout !, si, si :) 

Tu me vérifieras quand même la correspondance entre le for des labels et le name des inputs.
Et les tabindex aussi, tiens. De 1 en 1, c'est suffisant. Pis t'as commencé à mettre des <p></p>. Fais-le partout.
;) 

Pour passer d'un champ à l'autre, il y a deux possibilités : la touche [tab] et bien sûr avec un clic du doigt sur le champ !

Ensuite, il va falloir faire tout le boulot côté client.
Donc on n'a pas le choix, c'est du script. Je te propose JavaScript, bien sûr.


(Thinking.....)

ah ben oui tout bêtement le clic du doigt, suis-je bête...

voilà j'ai changé les trucs que tu m'as dit (me semble que c'est bon maintenant ^^)

après:

- enregistrement du formulaire sur le disque dure
- clavier virtuel

mais déjà merci pour ta patience... et j'accepte toutes tes propositions moi tant que ça reste décent hihi
Expert Programmation

Alors ?

Tu ne réponds pas bien vite.
Alors je te laisse un peu réfléchir.

Analyse ce bout de code :
  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' '<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>'>
  2. <html xmlns='<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>'>
  3. 	<head>
  4. 		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
  5. 		<title>Document sans nom</title>
  6.  
  7. 		<script language='javascript' type='text/javascript'>
  8. 			function lettre(l)
  9. 			{
  10. 				document.forms['formulaire'].elements['nom'].value = document.forms['formulaire'].elements['nom'].value + l;
  11. 			}
  12. 		</script>
  13. 	</head>
  14. 	<body>
  15. 		<form name='formulaire' method='post' action='cible_formulaire.php'>
  16. 			<fieldset>
  17. 				<legend>Si vous avez la moindre remarque ou question, n'hésitez pas à remplir ce formulaire et le service concerné vous recontactera dans les plus brefs délais.</legend>
  18. 				<p><label for='nom'   >Nom    : </label><input type='text' name='nom'    id='nom'    tabindex='1' /></p>
  19. 				<p><label for='prenom'>Prénom : </label><input type='text' name='prenom' id='prenom' tabindex='2' /></p>
  20. 				<p><label for='tel'   >Tél.   : </label><input type='text' name='tel'    id='tel'    tabindex='3' /></p>
  21. 				<p><label for='email2'>Mél.   : </label><input type='text' name='mel'    id='mel'    tabindex='4' /></p>
  22. 				<p>
  23. 					<label for='precisions'><br /><br />Question / Commentaire :</label>
  24. 					<br />
  25. 					<textarea name='precisions' id='precisions' cols='40' rows='4' tabindex='80'></textarea>
  26. 				</p>
  27. 			</fieldset>
  28. 			<p>
  29. 				<input type='submit' value='Envoyer' />
  30. 				<input type='reset'  value='Effacer' />
  31. 			</p>
  32. 		</form>
  33.  
  34. 		<a href='javascript:lettre("a");'>a</a>
  35. 		<a href='javascript:lettre("z");'>z</a>
  36. 		<a href='javascript:lettre("e");'>e</a>
  37. 		<a href='javascript:lettre("r");'>r</a>
  38. 		<a href='javascript:lettre("t");'>t</a>
  39. 		<a href='javascript:lettre("y");'>y</a>
  40. 		<br />
  41. 		<a href='javascript:lettre("q");'>q</a>
  42. 		<a href='javascript:lettre("s");'>s</a>
  43. 		<a href='javascript:lettre("d");'>d</a>
  44. 		<a href='javascript:lettre("f");'>f</a>
  45. 		<a href='javascript:lettre("g");'>g</a>
  46. 		<a href='javascript:lettre("h");'>h</a>
  47.  
  48. 	</body>
  49. </html>


(J'ai passé le charset en iso-8859-1)
zeb a édité ce message

désolé entre les enfants, la maison et le boulot je viens quand je peux...

donc j'ai change les tab en mettant 1 2 3 4 et 5 que j'avais oublié et j'édite à chaque fois mon code en haut...

bon je vais voir pour les lignes que tu as ajoutées ^^
Expert Programmation

Eh, c'est un forum ici, pas un tchat. Tu viens quand tu veux quand tu peux. Pareil pour moi ;) 

Pour servir cette page, t'as un service http.
Lequel ?

[_] apache
[_] lighttpd
[_] IIS
[_] autre, précisez : ______________

Avec quelles options ?
Voici celles qui m'intéressent :
[_] PHP
[_] MySQL
[_] sqlite
[_] MSSQLServer


____
(je te préviens tout de suite que si tu me réponds IIS/MSSQLServer, ma réponse sera "Ben paie-toi une prestation, alors !" :kaola:  )

je disais cela car tu as dit que je ne répondais pas bien vite...

pour servir cette page, je lance firefox tout simplement et les pages s'affiche en mode hors connexion... est-ce une réponse satisfaisante?

si vraiment je peux t'envoyer un zip avec ce que j'ai créé (ca prend pas bcp de place) et on ne se moque pas ^^
Expert Programmation

Euh, et moi je disais ça parce que je faisais les questions et les réponses. ^^

Non, pas d'envoi de zip. Je n'accepterai pas de faire ton travail.

La réponse n'est pas satisfaisante.
Le navigateur seul ne peut pas interagir avec ton système. :o 
kwaksavedir ?
Ben que tu ne pourras pas traiter ton formulaire.
T'as vu, il y a un bouton "Envoyer". A qui ?

C'est pourquoi il te faut un serveur.

Voici l'organisation que tu dois adopter :

(image piquée sur le site ccm)

Un abus de langage fait qu'on confond service et serveur. Un serveur est un ordinateur comme un autre, qui dispense des services. Or c'est le service qui nous intéresse. Et on peut mettre le client (ton navigateur) et le service (http) sur la même machine. Par principe, un client n'a pas le droit de traiter des données. Seul le service peut le faire, dont le traitement qui consiste à stocker ces données (fichiers, base de données).

Donc, il faut que tu installes sur ta borne, un service web (je te conseille apache avec l'option PHP) et un système de stockage associé. Par défaut, tu trouveras MySQL. C'est un peu un marteau-pilon pour écraser une mouche, c'est pourquoi je te proposai sqlite. Mais puisque tes besoins sont très simples, on peut même se passer du système de stockage et créer des fichiers tout bête directement avec PHP.

A toi de voir, tu es l'architecte !

pour l'envoi du fichier zip ce n'est pas pour le faire à ma place juste pour voir ce que j'ai fait ainsi tu te feras une idée du travail et tu pourrais éventuellement me donner des conseils afin que je l’améliore (avec ou sans aide) mais surtout pas le faire à ma place...

ok j'ai compris pour le truc du serveur/service ^^ et oui pas de soucis pour moi avec du php, il faut juste enregistrer le formulaire sur le disque dur rien de plus

sinon j'ai testé les lignes que tu as ajouté et c'est cool ca permet d'écrire dans le 1er champ... je vais faire des boutons bien jolis maintenant pour chaque lettre et quand j'ai fini cela, je te montre ce que ça donne

sinon est-ce normal que lorsque je clique sur n'importe quel autre champ il continue à écrire dans la partie NOM uniquement? pas moyen de taper quoi que ce soit avec le "clavier virtuel"

p.s. : en tout cas je suis épaté comme t'expliques ça si facilement! moi j'ai du mal hihi
Expert Programmation

Ce code proposé ne fonctionne que pour le premier champ, effectivement.
Je te propose de l'étudier et de comprendre pourquoi.

Ensuite, ce sera à toi de faire des propositions pour faire en sorte que les autres champs puissent être pris en compte. Laisse libre cours à ton imagination :lol:  Cela alimentera une discussion dans laquelle on tâchera de trouver une bonne solution (j'ai déjà quelques idées ;)  ).

Si tu as Apache+PHP, on pourra enregistrer le formulaire sans problème. En attendant, c'est à toi de bosser ^^

windows 7 mister ^^

pour le formulaire, il faut que chaque champ à remplir soit reconnu par le javascript faut que dans le javascript il soit indique que ce sont des lettres et pas juste un lien non? enfin j'ai du mal a exprimer ce que je veux dire ^^

sinon j'ai le droit de chercher des tuto de creation de claviers virtuels et me baser sur les resultats?
Expert Programmation

Win7: beurk, drôle de choix pour une borne. C'est ton problème.

Solution alternative à un bon vieil apache compilé aux petits oignons sur une bonne vieille plateforme LAMP : un ptit serveur ZMWS sur un sale gros Windobe.

--------------

Regarde mieux la ligne 10 :
  1. document.forms['formulaire'].elements['nom'].value = document.forms['formulaire'].elements['nom'].value + l;
(qu'on peut aussi écrire 
  1. document.forms['formulaire'].elements['nom'].value += l;
)
Remplace 'nom' par prénom et reteste.

Fais des commentaires ;) 

--------------

Attention, une légère note de prosélytisme s'est glissé dans ce message.
Saurais-tu la détecter ? ...... [:marsien]
Expert Programmation

:hello: 

(Dépêche-toi quand même, je pars en Nouvelle Zélande la semaine prochaine. Il s'y déroule un coupe du monde de Rugby - c'est un sport de ballon ovale méconnu de ton côté du Brabant, ce qui est dommage)

sérieux? tu me ramènes un hobbit? si jamais on finira après si tu m'as pas oublié parce que la semaine prochaine je suis parti aussi

mais pas de stress on a le temps... tu reviens quand? et je suis pas du brabant, je suis de la province de liège moi hihi

salut,

bon voilà en changeant en prénom bien entendu il écrit dans la partie prénom donc ce qu'il faudrait faire c'est qu'il détecte le champ sur lequel on est pour écrire dans cette partie car si on ajoute une fonctione genre nom et prenom il écrira dans chaque champ... est-ce que c'est correct?

pour le clavie virtuel j'ai terminé toutes les touches, maintenant ce que je vais faire c'est créér des boutons images pour chaque lettre afin que graphiquement ce soit plus beau et sur chaque touche je crééerai un hyperlien reprenant ceci :

<a href='javascript:lettre("a" );'></a>

tu vois ce que j'essaie de dire?

à ton retour, on s'attellera à la suite du formulaire avant de se lancer dans la partie php pour enregistrer le formulaire sur le disque dur

merci encore
Expert Programmation

Salut Liégeois,

Si je finis par te trouver une soluce, tu me devras une bonne bière fraîche au Carré !!!
La coupe du monde de Rugby au pays des Kiwis, pour moi, c'est fini. Ce qu'il en reste de matchs, ce sera aux aurores, à la télé.

Bon, on n'est nin chale po braire, on est chale po programmer... :lol: 

Alors voilà une solution : On va mettre un clavier pour chaque champ !

Quoi ça ?
Eh, ben oui quoi [:spamafote], mais on les cachera (*), sauf celui qui concernera le champ sélectionné. Trop facile :sol: 

__________________
Etudier les propriétés CSS: Visibility et Display.
zeb a édité ce message

pas de soucis mon bon ami quand tu viens ici je t'en paierai quelques unes

par contre il me fait bien rire ton "trop facile"... si ça l'était vraiment y aurait pas mal d'informaticien au chômage...

ok je vais voir comment c'est possible (google est sensé être mon ami) et en même temps je vais m'atteler à remplacer chaque lettre du clavier par une image pour que ce soit plus joli
t3k1lla a édité ce message
Expert Programmation

Ne consomme pas trop d'énergie sur tes dessins (vois ça plus tard), et propose-moi tes bonnes idées.
Réfléchis avec un clavier de 6 touches, on verra plus tard pour toutes les touches.

J'ai déjà un prototype qu'il me tarde de te proposer.
zeb a édité ce message

je sais pas du tout... on m'a demandé d'être prêt pour le 24 novembre et j'ai pas le temps en ce moment... je sais que tu veux pas le faire à ma place mais je pense que je vais finir par engager un informaticien pour me programmer cette page car j'ai beau essayer de comprendre les fonctions c'est du chinois pour moi! après tout si c'était si facile, il n'y auraient pas d'études d'informatique ^^
Expert Programmation

Tu as raison, l'informatique est un métier. Mais il est facile de s'y mettre. Si tu n'as pas ou que peu de temps pour t'autoformer, fais appel à un pro.

Voici quand même ce vers quoi je me proposais de t'amener :


<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<title>Document sans nom</title>

<script type='text/javascript'>

function show_kb(e)
{
var divs = document.getElementsByTagName('div');

for (i=0; i < divs.length; i++)
{
if (divs [ i ] .className== 'kb')
{
if (divs [ i ] .id == 'kb_'+e)
{
if (divs [ i ] .style.display == 'block')
divs [ i ] .style.display = 'none';
else
divs [ i ] .style.display = 'block';
}
else
divs [ i ] .style.display = 'none';
}
}
}

function lettre(l, e)
{
document.forms [ 'formulaire' ] .elements [ e ] .value += l;
}

function funct(f, e)
{
switch (f)
{
case "maj" :
if (typeof this.flg_shift == 'undefined')
this.flg_shift = 0;
else
this.flg_shift = 1 - this.flg_shift;

var d = [ 'block', 'none' ] ;

for (i=0; i<=7; i+=2)
{
document.getElementById('kb_'+e+'_line_n'+i).style.display=d [ 0 + this.flg_shift ] ;
document.getElementById('kb_'+e+'_line_n'+(i+1)).style.display=d [ 1 - this.flg_shift ] ;
}

break;
case "spc" :
lettre(' ', e);
break;
case "del" :
document.forms [ 'formulaire' ] .elements [ e ] .value = document.forms [ 'formulaire' ] .elements [ e ] .value.substr(0, document.forms [ 'formulaire' ] .elements [ e ] .value.length - 1);
break;
}
}
</script>

<style>
label { display:inline-block; min-width:60px; }
.kb { border:1px solid black; padding:9px 10px 10px; margin:4px; display:none; background-color:#eee; width:320px; }
.kb>.kbline { padding:1px 0 0;}
.kb>.kbline>a { border:1px solid black; display:inline-block; width:17px; text-align:center; padding:1px; margin:0 1px 0 0; text-decoration:none; background-color:#fafafa; }

.kb>.kbline.n0,
.kb>.kbline.n2,
.kb>.kbline.n4,
.kb>.kbline.n6 { display:none; }

.kb>.kbline.n0,
.kb>.kbline.n1 { padding-left:22px; }
.kb>.kbline.n2,
.kb>.kbline.n3 { padding-left:0px; }
.kb>.kbline.n4,
.kb>.kbline.n5 { padding-left:44px; }
.kb>.kbline.n6,
.kb>.kbline.n7 { padding-left:0px; }
.kb>.kbline.n8 { padding-left:88px; }

.kb>.kbline>a.t_del,
.kb>.kbline>a.t_ret,
.kb>.kbline>a.t_maj,
.kb>.kbline>a.t_tab { background:#ddd center no-repeat; }

.kb>.kbline>a.t_del { width: 28px; background-image:url('data:image/gif;base64,R0lGODlhEAAQAIQPAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////////////////////////////////////////////////////////////////////yH5BAEKAA4ALAAAAAAQABAAAAUuoCOOZGmeaKoCgCqyR5vCzyObdG2zPH/owODuJxS2crVeb5S7zQAxF9MprVqlIQA7' ); }
.kb>.kbline>a.t_ret { width: 50px; background-image:url('data:image/gif;base64,R0lGODlhEAAQAIQPAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////////////////////////////////////////////////////////////////////yH5BAEKAA4ALAAAAAAQABAAAAU4oCOOZGmeKAqswLmOwPO05HrQTjzDwCHjupZN9mMFe8SkcoZcLoXNovElGu5S1R4Om9tyv+CwIwQAOw==' ); }
.kb>.kbline>a.t_maj { width: 28px; background-image:url('data:image/gif;base64,R0lGODlhEAAQAIQPAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////////////////////////////////////////////////////////////////////yH5BAEKAA4ALAAAAAAQABAAAAU0oCOOZGmKAHCaabqO6fO4ayzPKgvcNw3vvF7OYQsKUS1ja4hS1pwnII9JkvaeQepv6XutQgA7' ); }
.kb>.kbline>a.t_maj:last-child { width: 61px; }
.kb>.kbline>a.t_tab { width: 28px; background-image:url('data:image/gif;base64,R0lGODlhEAAQAIQAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD/AP//AAAA//8A/wD//////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEKAA4ALAAAAAAQABAAAAVJICA65Eie5QOUx4qegOoAh/ymYq2KfP8cuodwOBTtdL1kbEWz3ZYsHiw5pbmgt9mPuVMat8sYcfyreXnCFva51bqeLVx29uaFAAA7'); }
.kb>.kbline>a.t_spc { width:144px; }

.kb>.kbline>a:hover { background-color:gray; }

a.show_kb { display:inline-block; width:17px; padding:0 2px; background:#ddd url('data:image/gif;base64,R0lGODlhEAAQAMZZADs7Oz09PT8/P0BAQEREREVFRUZGRkdHR0hISExMTE9PT1FRUVJSUlNTU1RUVFdXV1hYWFxcXF1dXXd3d4CAgIKCgoODg4aGhoiIiIqKiouLi4yMjI2NjZGRkZOTk5SUlJaWlpeXl5mZmZqamp+fn6CgoKGhoaOjo6SkpKWlpaampqenp6mpqaqqqqurq6ysrK2tra6urq+vr7CwsLGxsbKysrOzs7S0tLe3t7m5ubq6ur29vb+/v8HBwcLCwtLS0tPT09bW1tjY2NnZ2dvb293d3d/f3+Dg4OHh4eTk5Obm5ufn5+rq6uzs7O3t7e7u7u/v7/Dw8PHx8fPz8/b29vf39/r6+vv7+/7+/v///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEKAH8ALAAAAAAQABAAAAejgH+Cg4SFhoeIiYqJGR8dFyMfGCIeFCIWIxwhEx5TSUw/T0NFR0JOTUhGKBIaRFktWTBWOVk7WSBZMzwBG04lMyYuMycvJyU6MlcpCRVYTFk1SjlWMVkpVVlQNAshQT4oKjsqLCE6K8IuJAYhQEs9UVlZV/FSWTdUMREVOz4uKDEnWNgQgSPGBxoYAgxoAKCAgAcIIBA40MCBggYRGCzayHFjIAA7') center no-repeat; }


.kb { background:#eee url('data:image/gif;base64,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') 307px 107px no-repeat; }

</style>

</head>
<body>

<?php
function print_kb($f)
{
echo "<a id='a_$f' class='show_kb' href='javascript:show_kb(\"$f\");'> </a>";
echo "<div id='kb_$f' class='kb' >";
$i = 0;
foreach(
array(
array("1","2","3","4","5","6","7","8","9","0","@","+","del"),
array("&","é","#","'","(","-","è","_","ç","à",")","=","del"),
array("tab","A","Z","E","R","T","Y","U","I","O","P","£","%"),
array("tab","a","z","e","r","t","y","u","i","o","p","$","*"),
array("Q","S","D","F","G","H","J","K","L","M","ret"),
array("q","s","d","f","g","h","j","k","l","m","ret"),
array("maj",">","W","X","C","V","B","N","?",".",":","maj"),
array("maj","<","w","x","c","v","b","n",",",";","!","maj"),
array("spc")) as $line)
{
echo "<div class='kbline n$i' id='kb_{$f}_line_n$i'>";
foreach ($line as $touch)
{
if (strlen($touch)>1)
echo "<a class='funct t_$touch' href=\"javascript:funct('$touch', '$f');\"> </a>";
else
echo "<a href=\"javascript:lettre('$touch', '$f');\">$touch</a>";
}
echo "</div>";
$i++;
}
}
?>

<form name='formulaire' method='post' action='cible_formulaire.php'>
<fieldset>
<legend>Si vous avez la moindre remarque ou question, n'hésitez pas à remplir ce formulaire et le service concerné vous recontactera dans les plus brefs délais.</legend>
<div>
<label for='nom' >Nom : </label><input type='text' name='nom' id='nom' tabindex='1' />
<?php print_kb('nom'); ?>
</div>
<div>
<label for='prenom'>Prénom : </label><input type='text' name='prenom' id='prenom' tabindex='2' />
<?php print_kb('prenom'); ?>
</div>
<div>
<label for='tel' >Tél. : </label><input type='text' name='tel' id='tel' tabindex='3' />
<?php print_kb('tel'); ?>
</div>
<div>
<label for='email2'>Mél. : </label><input type='text' name='mel' id='mel' tabindex='4' />
<?php print_kb('mel'); ?>
</div>
<div>
<label for='precisions'>Question / Commentaire :</label>
<br />
<textarea name='precisions' id='precisions' cols='40' rows='4' tabindex='80'></textarea><?php print_kb('precisions'); ?>
</div>
</fieldset>
<div>
<input type='submit' value='Envoyer' />
<input type='reset' value='Effacer' />
</div>
</form>
</body>
</html>



Etudie-le bien, si tu cherches à progresser. Je peux continuer à t'aider ;) 

(désolé, un bug de la nouvelle interface ne me permet pas de publier correctement cd code. L'indentation est perdue. Tu m'en vois désolé. :/  )
zeb a édité ce message

merci pour ce code... en effet si j'ai une base j'arrive à voir et comprendre ce qu'il faut changer c'est pondre et trouver une logique en code qui m'est impossible... je vais donc étudier ce que tu as posté par contre si tu veux je te donne mon email et tu m'envois ce fichier par email ainsi il n'y aura pas d'erreur de code?

et je ne suis jamais contraire à progresser et ton aide m'est précieuse merci encore

t'as réussi à corriger ce qui n'allait pas alors? moi aussi je suis pour le partage... et sinon tu peux mettre ton fichier en zip en pièce attachée a ton post ainsi tout qui le voudra pourra y avoir accès...

sinon je copie colle ce que tu as tapé et je regarde ce que ça donne au plus vite

merci encore pour ta patience...
Expert Programmation

Ce qui ne va pas, c'est la présentation du code dans le forum nouvelle version.
Donc tu as tout ce qu'il faut, mais c'est mal présenté. Il manque l'indentation.
C'est pour moi une hérésie que de ne pas la respecter.
Et comme je suis le Torquemada du code bien présenté, ça me fait tord.

Alors, ça te plait ?

ben j'ai copie colle dans un dreamweaver histoire de voir ce que ca donne comme ça... puis j'ai commence a lire un peu mais c'est beaucoup trop complexe pour moi... autant pour la 1ere partie, je comprenais la plupart des trucs (et je voyais l'incidence qu'avaient les changements que je faisais) autant là c'est du véritable chinois...

je suis désolé suis vraiment pas doué :( 
Expert Programmation

Eh, c'est pour ça que je voulais qu'on y aille doucement. Mais tu m'as foutu la pression : j'ai pas l'temps, ça n'sera pas prêt avant le 24 nov...

Sinon, ça marche quand même ?
zeb a édité ce message
Expert Programmation

Ah bon.
Et que veux-tu changer en particulier. Par ce que le php, a priori, ce n'est pas ce qui est à changer en priorité !

J'ai apporté deux trois bricoles. Je te les soumets.

Pour la partie Javascript :
  1. function show_kb(e)
  2. {
  3. 	var divs = document.getElementsByTagName('div');
  4.  
  5. 	for (i=0; i < divs.length; i++)
  6. 	{
  7. 		if (divs[i].className== 'kb')
  8. 		{
  9. 			if (divs[i].id == 'kb_'+e)
  10. 			{
  11. 				if (divs[i].style.display == 'block')
  12. 					divs[i].style.display = 'none';
  13. 				else
  14. 					divs[i].style.display = 'block';
  15. 			}
  16. 			else
  17. 				divs[i].style.display = 'none';
  18. 		}
  19. 	}
  20. }
  21.  
  22. function lettre(l, e)
  23. {
  24. 	document.forms['formulaire'].elements[e].value += l;
  25. 	document.forms['formulaire'].elements[e].focus();
  26. }
  27.  
  28. function funct(f, e, n)
  29. {
  30. 	switch (f)
  31. 	{
  32. 		case "maj" :
  33. 			if (typeof this.flg_shift == 'undefined')
  34. 				this.flg_shift = 0;
  35. 			else
  36. 				this.flg_shift = 1 - this.flg_shift;
  37. 			var d = ['block', 'none'];
  38. 			for (i=0; i<=7; i+=2)
  39. 			{
  40. 				document.getElementById('kb_'+e+'_line_n'+i).style.display=d[0 + this.flg_shift];
  41. 				document.getElementById('kb_'+e+'_line_n'+(i+1)).style.display=d[1 - this.flg_shift];
  42. 			}
  43. 			break;
  44. 		case "spc" :
  45. 			lettre(' ', e);
  46. 			break;
  47. 		case "del" :
  48. 			document.forms['formulaire'].elements[e].value = document.forms['formulaire'].elements[e].value.substr(0, document.forms['formulaire'].elements[e].value.length - 1);
  49. 			break;
  50. 		case "ret" :
  51. 			show_kb("");
  52. 			break;
  53. 		case "tab" :
  54. 			show_kb(n);
  55. 			break;
  56. 	}
  57. }


Pour le php :
  1. <?php
  2. 	function print_kb($f, $next = "")
  3. 	{
  4. 		echo "<a id='a_$f' class='show_kb' href='javascript:show_kb(\"$f\");'> </a>";
  5. 		echo "<div id='kb_$f' class='kb' >";
  6. 		$i = 0;
  7. 		foreach(
  9. 				array("1","2","3","4","5","6","7","8","9","0","@","+","del"),
  10. 				array("&","é","#","'","(","-","è","_","ç","à",")","=","del"),
  11. 				array("tab","A","Z","E","R","T","Y","U","I","O","P","£","%"),
  12. 				array("tab","a","z","e","r","t","y","u","i","o","p","$","*"),
  13. 				array("Q","S","D","F","G","H","J","K","L","M","ret"),
  14. 				array("q","s","d","f","g","h","j","k","l","m","ret"),
  15. 				array("maj",">","W","X","C","V","B","N","?",".",":","maj"),
  16. 				array("maj","<","w","x","c","v","b","n",",",";","!","maj"),
  17. 				array("spc")) as $line)
  18. 		{
  19. 			echo "<div class='kbline n$i' id='kb_{$f}_line_n$i'>";
  20. 			foreach ($line as $touch)
  21. 			{
  22. 				if (strlen($touch)>1)
  23. 					echo "<a class='funct t_$touch' href=\"javascript:funct('$touch', '$f', '$next');\">&nbsp</a>";
  24. 				else
  25. 					echo "<a href=\"javascript:lettre('$touch', '$f');\">$touch</a>";
  26. 			}
  27. 			echo "</div>";
  28. 			$i++;
  29. 		}
  30. 	}
  31. ?>


Et pour le formulaire :
  1. <form name='formulaire' method='post' action='cible_formulaire.php'>
  2. 	<fieldset>
  3. 		<legend>Si vous avez la moindre remarque ou question, n'hésitez pas à remplir ce formulaire et le service concerné vous recontactera dans les plus brefs délais.</legend>
  4. 		<div>
  5. 			<label for='nom' >Nom : </label><input type='text' name='nom' id='nom' tabindex='1' />
  6. 			<?php print_kb('nom', 'prenom'); ?>
  7. 		</div>
  8. 		<div>
  9. 			<label for='prenom'>Prénom : </label><input type='text' name='prenom' id='prenom' tabindex='2' />
  10. 			<?php print_kb('prenom', 'tel'); ?>
  11. 		</div>
  12. 		<div>
  13. 			<label for='tel' >Tél. : </label><input type='text' name='tel' id='tel' tabindex='3' />
  14. 			<?php print_kb('tel', 'mel'); ?>
  15. 		</div>
  16. 		<div>
  17. 			<label for='email2'>Mél. : </label><input type='text' name='mel' id='mel' tabindex='4' />
  18. 			<?php print_kb('mel', 'precisions'); ?>
  19. 		</div>
  20. 		<div>
  21. 			<label for='precisions'>Question / Commentaire :</label>
  22. 			<br />
  23. 			<textarea name='precisions' id='precisions' cols='40' rows='4' tabindex='80'></textarea><?php print_kb('precisions', 'nom'); ?>
  24. 		</div>
  25. 	</fieldset>
  26. 	<div>
  27. 		<input type='submit' value='Envoyer' />
  28. 		<input type='reset' value='Effacer' />
  29. 	</div>
  30. </form>

bon je vais jeter un coup d'oeil a ces differents codes... je copie colle tout ca à la queue leu leu ou je dois faire des fichiers séparés? en tout cas c'est vraiment sympa de m'aider! je t'enverrai des photos du résultat final (avec qqes bonnes bouteilles de bieres belges ^^)
Expert Programmation

Mets tes fichiers dans le dossier _web.zmwsc où si tu as changé la config de ZMWS, dans le dossier pointé par Main:webdir (voir le fichier _config.zmwsc).

Il n'y a qu'un seul fichier, celui-là : http://www.presence-pc.com/forum/ppc/Programmation/crea... dont j'en ai réécris certaines parties, dans les messages qui ont suivis.

Pour que ton serveur web affiche ta page sans qu'il faille préciser de nom d'un fichier, appelle celui par défaut index.php (c'est facile, t'as qu'un fichier ;)  )

Pour que ton navigateur affiche la page web qui nous intéresse, utilise l'une des adresses suivantes :


  • Tu arrives à suivre ?
    Lassé par la pub ? Créez un compte

    Créer un nouveau sujet