Création formulaire de contact sur écran tactile

t3k1lla

Habitué
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...
 

zeb

Modérateur
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.
 

t3k1lla

Habitué
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 ^^
 

zeb

Modérateur
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.
 

zeb

Modérateur
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.

Demande à Gogol :
(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...
 

t3k1lla

Habitué
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 ^^
 

t3k1lla

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

Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>

<body>

<form 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><p>
         <label for="nom">NOM :</label>
         <input type="text" name="nom" id="nom" tabindex="1" />
       </p>
       <p>
         <label for="prenom">Prénom : </label>
         <input type="text" name="prenom" id="prenom" tabindex="2" />
     </p>
<p>
  <label for="gsm">Numéro de téléphone / gsm : </label><input type="text" name="gsm" id="gsm" tabindex="3" />
     </p>
       <p>
         <label for="email">Email : </label>
         <input type="text" name="email" id="email" tabindex="4" />
     <label for="precisions"><br />
       <br />
       Question / Commentaire :</label>
     <br />
           <textarea name="precisions" id="precisions" cols="40" rows="4" tabindex="5"></textarea>
       </p>
  </fieldset>

   <p>
     <input type="submit" value="Envoyer" />
     <input type="reset" value="Effacer" />
   </p>
   
</form>


</body>
</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
 

zeb

Modérateur
(Euh... Tu veux bien modifier ton message précédent et remplacer
par
Code:
, parce que là, on code, on ne le voit pas)
 

zeb

Modérateur
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.....)
 

t3k1lla

Habitué
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
 

zeb

Modérateur
Alors ?

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

Analyse ce bout de code :
Code:
 <!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'>
	<head>
		<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
		<title>Document sans nom</title>

		<script language='javascript' type='text/javascript'>
			function lettre(l)
			{
				document.forms['formulaire'].elements['nom'].value = document.forms['formulaire'].elements['nom'].value + l;
			}
		</script>
	</head>
	<body>
		<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>
				<p><label for='nom'   >Nom    : </label><input type='text' name='nom'    id='nom'    tabindex='1' /></p>
				<p><label for='prenom'>Prénom : </label><input type='text' name='prenom' id='prenom' tabindex='2' /></p>
				<p><label for='tel'   >Tél.   : </label><input type='text' name='tel'    id='tel'    tabindex='3' /></p>
				<p><label for='email2'>Mél.   : </label><input type='text' name='mel'    id='mel'    tabindex='4' /></p>
				<p>
					<label for='precisions'><br /><br />Question / Commentaire :</label>
					<br />
					<textarea name='precisions' id='precisions' cols='40' rows='4' tabindex='80'></textarea>
				</p>
			</fieldset>
			<p>
				<input type='submit' value='Envoyer' />
				<input type='reset'  value='Effacer' />
			</p>
		</form>

		<a href='javascript:lettre("a");'>a</a>
		<a href='javascript:lettre("z");'>z</a>
		<a href='javascript:lettre("e");'>e</a>
		<a href='javascript:lettre("r");'>r</a>
		<a href='javascript:lettre("t");'>t</a>
		<a href='javascript:lettre("y");'>y</a>
		<br />
		<a href='javascript:lettre("q");'>q</a>
		<a href='javascript:lettre("s");'>s</a>
		<a href='javascript:lettre("d");'>d</a>
		<a href='javascript:lettre("f");'>f</a>
		<a href='javascript:lettre("g");'>g</a>
		<a href='javascript:lettre("h");'>h</a>
				
	</body>
</html>

(J'ai passé le charset en iso-8859-1)
 

t3k1lla

Habitué
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 ^^
 

zeb

Modérateur
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: )
 

t3k1lla

Habitué
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 ^^
 

zeb

Modérateur
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 :
Vous devez être connecté pour voir les images.
(image piquée sur le site )

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 !
 

t3k1lla

Habitué
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
 

zeb

Modérateur
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 ^^
 

t3k1lla

Habitué
bon j'ai déjà télécharger apache 2.2.21 et php 5.3.8

vais voir sur le net s'il suffit d'installer ou s'il faut configurer qqch ^^
 

t3k1lla

Habitué
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?
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 079
Messages
6 716 703
Membres
1 586 247
Dernier membre
MrAzgarIII
Partager cette page
Haut