#1 Le 26/05/2009, à 00:14
- jajaX
[abandonné] conception de formulaire avec kompozer
salut
1er sujet ici
bon alors, j'explique vite fait. j'avais, avant, un site avec à la base un portail et un forum, le tout fonctionnant avec php/mySQL. j'ai fermé mon site. voulant le réouvrir, j'essaie de repartir de zéro avec un site en html simple et un forum.
le but de mon site est le référencement des live/bootleg de marilyn manson. avec le portail, les entrées se faisaient automatiquement et j'avais un page pour les différentes listes.
là, j'essaie de me créer un formulaire tout "bête" pour faire la même chose. c'est presque bon sauf quelques trucs que je vais exposer après.
voici le code de mon formulaire :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>formulaire</title>
<script src="passparam.js"></script>
</head>
<body style="color: rgb(0, 0, 0); background-color: black;"
alink="#ee0000" link="#0000ee" vlink="#551a8b">
<form onsubmit="page.html"
style="color: red; font-weight: bold;" method="post"
action="page.html" name="bootleg"><small><span
style="font-family: "Sans Serif";"><br>
Type de Bootleg :
<select name="type">
<option>Booltegs (remix, b-side, live.....)</option>
<option>Compilations/Best of</option>
<option>Tribute</option>
<option>Fake</option>
<option>Biographies/Interview</option>
<optgroup label="Live">
<option>1994 : Live tournée nine inch nails</option>
<option>1994-1995 : Live tournée portrait of an american family</option>
<option>1995 - Live tournée danzig</option>
<option>1995-1996 - Live tournée smells like children</option>
<option>1996-1997 - Live tournée dead to the world</option>
<option>1998-1999 - Live tournée rock is dead</option>
<option>2000-2001 - Live tournée guns, god and government</option>
<option>2001 - Live tournée Japan & festival europe</option>
<option>2001 - Live tournée ozzfest</option>
<option>2003 - Live tournée grotesk burlesk</option>
<option>2003 - Live tournée ozzfest</option>
<option>2004-2005 - live tournée Against All Gods</option>
<option>NON TOUR show</option>
</optgroup><optgroup label="The Spooky Kids">
<option>démos</option>
<option>bootlegs</option>
<option>Compilations</option>
<option>live</option>
</optgroup><optgroup label="Vidéos">
<option>Vidéos live</option>
<option>Autres vidéos/DVD/VHS</option>
</optgroup>
</select>
<br>
<br>
titre du bootleg
: <input name="titre"><br>
<br>
Année : <input name="annee"><br>
<br>
Durée : <input name="duree"><br>
<br>
Qualité :
<select name="qualite">
<option>A+</option>
<option>A</option>
<option>A-</option>
<option>B+</option>
<option>B</option>
<option>B-</option>
<option>C+</option>
<option>C</option>
<option>C-</option>
</select>
<br>
<br>
Playlist : <textarea wrap="hard" cols="35"
rows="10" name="playlist"
onfocus="javascript:this.value=''">insérez la playlist ici</textarea><br>
<br>
covers :</span>
</small>
<p><small>Choisissez un fichier image "front" de votre
ordinateur:<br>
<input name="fichier1" type="file"> </small></p>
<p><small>Choisissez un fichier image "back" de votre
ordinateur:<br>
<input name="fichier2" type="file"> </small></p>
<p><small>Choisissez un fichier image de votre
ordinateur:<br>
<input name="fichier3" type="file"> </small></p>
<p><small>Choisissez un fichier image de votre
ordinateur:<br>
<input name="fichier4" type="file"> </small></p>
<p><small>Choisissez un fichier image de votre
ordinateur:<br>
<input name="fichier5" type="file"> </small></p>
<small><input value="Envoyer" type="submit">
<input value="Réinitialiser" type="reset"><input
name="previsualiser" tabindex="3" value="Prévisualiser"
onclick="affichage();" type="button"></small><br>
<br>
</form>
</body>
</html>
et le code du fichier "passparam.js" :
function affichage() {
FenetreAffichage = window.open('','NouvelleFenetre', 'toolbar=no,status=no,width=800,height=600')
FenetreAffichage.document.write("Visualiser votre message");
FenetreAffichage.document.write("<br><br><b>Type : </b>" + document.bootleg.type.value);
FenetreAffichage.document.write("<br><br><b>Titre du boolteg : </b>" + document.bootleg.titre.value);
FenetreAffichage.document.write("<br><br><b>Année : </b>" + document.bootleg.annee.value);
FenetreAffichage.document.write("<br><br><b>Durée : </b>" + document.bootleg.duree.value);
FenetreAffichage.document.write("<br><br><b>Qualité : </b>" + document.bootleg.qualite.value);
FenetreAffichage.document.write("<br><br><b>Playlist : </b>" + document.bootleg.playlist.value);
FenetreAffichage.document.write("<br><br><b>Covers : </b>" + document.bootleg.fichier1.value);
FenetreAffichage.document.write("<br><br><A HREF='javascript:window.close()'>Fermer la fenetre</A><br>");
FenetreAffichage.document.write("<br>");
}
j'aimerais utiliser uniquement du html avec javascript. pas de php. car c'est que moi qui m'en servira.
1/ je voudrais valider mon formulaire avec l'enregistrement, dans le dossier qui va bien ("live" pour un live, "demos" pour une démos, etc... avec ma variable "type" en fait), d'une page en html dont le nom serait de cette forme : (valeur de) "annee"-(valeur de)"titre".html
2/ j'aimerais avoir, comme sur pas mal de forum maintenant, la fonction d'upload des images une seule fois à l'affichage (pas comme j'ai fait là). une fois qu'une image est envoyée (enfin le chemin), une autre proposition d'upload s'ouvre en dessous. ça m'arrangerais car je ne sais jamais combien d'image il y aura à mettre.
3/ je me suis fait un bouton "previsualiser" qui m'ouvre une pop up avec la fonction dans le fichier javascript. je vois les "entrées" des champs de formulaires.
par contre, pour la zone de texte, je n'ai pas de retour à la ligne.
j'ai aussi un soucis avec les images. avec la fonction utilisée, il m'affiche le nom du fichier j'aimerais également qu'il m'affiche les images alignées dans un tableau mais là on verra plus tard.
voilà. merci d'avance pour votre aide
note : kompozer me faut un "seg fault" à chaque fois que je veux voir un sous menu, normal ?
Dernière modification par jajaX (Le 28/05/2009, à 10:43)
@+
jajaX
Asus X93SM-YZ157V / Asus X93SM-YZ065V sous KDE Neon
ASUS K95VB sous Kubuntu 24.04 Noble Numbat (64 bits) / ACER Aspire 5612 WLMI sous Kubuntu 18.04 Bionic Beaver (32 bits)
Hors ligne
#2 Le 27/05/2009, à 00:02
- jajaX
Re : [abandonné] conception de formulaire avec kompozer
hello
j'avance un peu ma pop up fonctionne enfin. la validation me renvoie quelque chose que si je fais un aperçu avant... je pense oublier l'upload d'image pour seulement une url.
voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>formulaire</title>
<script src="passparam.js"></script>
</head>
<body style="color: rgb(0, 0, 0); background-color: black;" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<form method="get" action="/home/jaja/Projects/site/page.htm" enctype="application/x-www-form-urlencoded" target="_parent" style="color: red; font-weight: bold;" name="bootleg"><small><span style="font-family: "Sans Serif";"><br>
Type de Bootleg :
<select name="types"><option>Booltegs (remix, b-side, live.....)</option><option>Compilations/Best of</option><option>Tribute</option><option>Fake</option><option>Biographies/Interview</option><optgroup label="Live"><option>1994 : Live tournée nine inch nails</option><option>1994-1995 : Live tournée portrait of an american family</option><option>1995 - Live tournée danzig</option><option>1995-1996 - Live tournée smells like children</option><option>1996-1997 - Live tournée dead to the world</option><option>1998-1999 - Live tournée rock is dead</option><option>2000-2001 - Live tournée guns, god and government</option><option>2001 - Live tournée Japan & festival europe</option><option>2001 - Live tournée ozzfest</option><option>2003 - Live tournée grotesk burlesk</option><option>2003 - Live tournée ozzfest</option><option>2004-2005 - live tournée Against All Gods</option><option>NON TOUR show</option></optgroup><optgroup label="The Spooky Kids"><option>démos</option><option>bootlegs</option><option>Compilations</option><option>live</option></optgroup><optgroup label="Vidéos"><option>Vidéos live</option><option>Autres vidéos/DVD/VHS</option></optgroup></select>
<br>
<br>
titre du bootleg
: <input name="titre"><br>
<br>
Année : <input name="annee"><br>
<br>
Durée : <input name="duree"><br>
<br>
Qualité :
<select name="qualite"><option>A+</option><option>A</option><option>A-</option><option>B+</option><option>B</option><option>B-</option><option>C+</option><option>C</option><option>C-</option></select>
<br>
<br>
Playlist : <textarea wrap="hard" cols="35" rows="10" name="playlist" onfocus="javascript:this.value=''">insérez la playlist ici</textarea><br>
<br>
covers :</span>
</small>
<p><small>Choisissez un fichier image "front" de votre
ordinateur:<br>
<input name="fichier1" type="file"> </small></p>
<p><small>Choisissez un fichier image "back" de votre
ordinateur:<br>
<input name="fichier2" type="file"> </small></p>
<p><small>Choisissez un fichier image de votre
ordinateur:<br>
<input name="fichier3" type="file"> </small></p>
<p><small>Choisissez un fichier image de votre
ordinateur:<br>
<input name="fichier4" type="file"> </small></p>
<p><small>Choisissez un fichier image de votre
ordinateur:<br>
<input name="fichier5" type="file"> </small></p>
<small><input name="envoyer" value="envoyer" type="submit" onclick="validation();">
<input value="Réinitialiser" type="reset"><input name="previsualiser" tabindex="3" value="Prévisualiser" onclick="affichage();" type="button"></small><br>
<br></form>
</body></html>
et le fichier "passparam.js" :
function affichage() {
FenetreAffichage = window.open('','NouvelleFenetre', 'toolbar=no,status=no,width=800,height=600')
FenetreAffichage.document.write("Visualiser votre message");
FenetreAffichage.document.write("<br><br><b>Type : </b>" + document.bootleg.types.value);
FenetreAffichage.document.write("<br><br><b>Titre du boolteg : </b>" + document.bootleg.titre.value);
FenetreAffichage.document.write("<br><br><b>Année : </b>" + document.bootleg.annee.value);
FenetreAffichage.document.write("<br><br><b>Durée : </b>" + document.bootleg.duree.value);
FenetreAffichage.document.write("<br><br><b>Qualité : </b>" + document.bootleg.qualite.value);
FenetreAffichage.document.write("<br><br><b>Playlist : </b>" + document.bootleg.playlist.value);
FenetreAffichage.document.write("<br><br><b>Covers : </b>" + document.images[i].src.bootleg.fichier1.value);
FenetreAffichage.document.write("<br><br><A HREF='javascript:window.close()'>Fermer la fenetre</A><br>");
FenetreAffichage.document.write("<br>");
}
function validation() {
document.write("Données envoyées");
document.write("<br><br><b>Type : </b>" + document.bootleg.types.value);
document.write("<br><br><b>Titre du boolteg : </b>" + document.bootleg.titre.value);
document.write("<br><br><b>Année : </b>" + document.bootleg.annee.value);
document.write("<br><br><b>Durée : </b>" + document.bootleg.duree.value);
document.write("<br><br><b>Qualité : </b>" + document.bootleg.qualite.value);
document.write("<br><br><b>Playlist : </b>" + document.bootleg.playlist.value);
document.write("<br><br><b>Covers : </b>" + document.images[i].src.bootleg.fichier1.value);
document.write("<br>");
}
@+
jajaX
Asus X93SM-YZ157V / Asus X93SM-YZ065V sous KDE Neon
ASUS K95VB sous Kubuntu 24.04 Noble Numbat (64 bits) / ACER Aspire 5612 WLMI sous Kubuntu 18.04 Bionic Beaver (32 bits)
Hors ligne
#3 Le 28/05/2009, à 10:42
- jajaX
Re : [abandonné] conception de formulaire avec kompozer
bon, je laisse tomber, c'est trop chaud pour moi !
@+
jajaX
Asus X93SM-YZ157V / Asus X93SM-YZ065V sous KDE Neon
ASUS K95VB sous Kubuntu 24.04 Noble Numbat (64 bits) / ACER Aspire 5612 WLMI sous Kubuntu 18.04 Bionic Beaver (32 bits)
Hors ligne
#4 Le 29/05/2009, à 02:43
- GTalbot
Re : [abandonné] conception de formulaire avec kompozer
salut
1er sujet ici
bon alors, j'explique vite fait. j'avais, avant, un site avec à la base un portail et un forum, le tout fonctionnant avec php/mySQL. j'ai fermé mon site. voulant le réouvrir, j'essaie de repartir de zéro avec un site en html simple et un forum.
le but de mon site est le référencement des live/bootleg de marilyn manson. avec le portail, les entrées se faisaient automatiquement et j'avais un page pour les différentes listes.
là, j'essaie de me créer un formulaire tout "bête" pour faire la même chose. c'est presque bon sauf quelques trucs que je vais exposer après.voici le code de mon formulaire :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>formulaire</title> <script src="passparam.js"></script> </head> <body style="color: rgb(0, 0, 0); background-color: black;" alink="#ee0000" link="#0000ee" vlink="#551a8b"> <form onsubmit="page.html" style="color: red; font-weight: bold;" method="post" action="page.html" name="bootleg"><small><span style="font-family: "Sans Serif";"><br> Type de Bootleg : <select name="type"> <option>Booltegs (remix, b-side, live.....)</option> <option>Compilations/Best of</option> <option>Tribute</option> <option>Fake</option> <option>Biographies/Interview</option> <optgroup label="Live"> <option>1994 : Live tournée nine inch nails</option> <option>1994-1995 : Live tournée portrait of an american family</option> <option>1995 - Live tournée danzig</option> <option>1995-1996 - Live tournée smells like children</option> <option>1996-1997 - Live tournée dead to the world</option> <option>1998-1999 - Live tournée rock is dead</option> <option>2000-2001 - Live tournée guns, god and government</option> <option>2001 - Live tournée Japan & festival europe</option> <option>2001 - Live tournée ozzfest</option> <option>2003 - Live tournée grotesk burlesk</option> <option>2003 - Live tournée ozzfest</option> <option>2004-2005 - live tournée Against All Gods</option> <option>NON TOUR show</option> </optgroup><optgroup label="The Spooky Kids"> <option>démos</option> <option>bootlegs</option> <option>Compilations</option> <option>live</option> </optgroup><optgroup label="Vidéos"> <option>Vidéos live</option> <option>Autres vidéos/DVD/VHS</option> </optgroup> </select> <br> <br> titre du bootleg : <input name="titre"><br> <br> Année : <input name="annee"><br> <br> Durée : <input name="duree"><br> <br> Qualité : <select name="qualite"> <option>A+</option> <option>A</option> <option>A-</option> <option>B+</option> <option>B</option> <option>B-</option> <option>C+</option> <option>C</option> <option>C-</option> </select> <br> <br> Playlist : <textarea wrap="hard" cols="35" rows="10" name="playlist" onfocus="javascript:this.value=''">insérez la playlist ici</textarea><br> <br> covers :</span> </small> <p><small>Choisissez un fichier image "front" de votre ordinateur:<br> <input name="fichier1" type="file"> </small></p> <p><small>Choisissez un fichier image "back" de votre ordinateur:<br> <input name="fichier2" type="file"> </small></p> <p><small>Choisissez un fichier image de votre ordinateur:<br> <input name="fichier3" type="file"> </small></p> <p><small>Choisissez un fichier image de votre ordinateur:<br> <input name="fichier4" type="file"> </small></p> <p><small>Choisissez un fichier image de votre ordinateur:<br> <input name="fichier5" type="file"> </small></p> <small><input value="Envoyer" type="submit"> <input value="Réinitialiser" type="reset"><input name="previsualiser" tabindex="3" value="Prévisualiser" onclick="affichage();" type="button"></small><br> <br> </form> </body> </html>
et le code du fichier "passparam.js" :
function affichage() { FenetreAffichage = window.open('','NouvelleFenetre', 'toolbar=no,status=no,width=800,height=600') FenetreAffichage.document.write("Visualiser votre message"); FenetreAffichage.document.write("<br><br><b>Type : </b>" + document.bootleg.type.value); FenetreAffichage.document.write("<br><br><b>Titre du boolteg : </b>" + document.bootleg.titre.value); FenetreAffichage.document.write("<br><br><b>Année : </b>" + document.bootleg.annee.value); FenetreAffichage.document.write("<br><br><b>Durée : </b>" + document.bootleg.duree.value); FenetreAffichage.document.write("<br><br><b>Qualité : </b>" + document.bootleg.qualite.value); FenetreAffichage.document.write("<br><br><b>Playlist : </b>" + document.bootleg.playlist.value); FenetreAffichage.document.write("<br><br><b>Covers : </b>" + document.bootleg.fichier1.value); FenetreAffichage.document.write("<br><br><A HREF='javascript:window.close()'>Fermer la fenetre</A><br>"); FenetreAffichage.document.write("<br>"); }
j'aimerais utiliser uniquement du html avec javascript. pas de php. car c'est que moi qui m'en servira.
Jajax,
Avant d'aller plus loin, je crois absolument nécessaire d'éliminer toutes les erreurs de codage HTML et les erreurs de codage javascript. Donc:
1- Il faut changer/remplacer
<script src="passparam.js"></script>
par
<script type="text/javascript" src="passparam.js"></script>
2- Je propose:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head profile="http://www.ietf.org/rfc/rfc2731.txt">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="DC.author" content="Jajax">
<meta name="DC.creator" content="Jajax">
<title>Choisissez le bootleg de Marilyn Manson</title>
Les meta content-style-type et content-script-type sont nécessaires puisque tu utilises des styles enligne et des gestionnaires d'évenements.
3-
J'enleverais le onsubmit de
<form onsubmit="page.html" ...>
..`a moins que je n'ai pas compris ce que tu essaies de faire.
4- J'enl`everais/remplacerais
Playlist : <textarea wrap="hard" cols="35"
rows="10" name="playlist"
onfocus="javascript:this.value=''">insérez la playlist ici</textarea>
par
<p>Insérez la liste de lecture ici <textarea cols="35"
rows="10" name="playlist">insérez la playlist ici</textarea></p>
Raison: simplifier, minimiser le recours au javascript, rendre davantage accessible et robuste. L'attribut wrap devrait ^etre remplacé judicieusement par la déclaration white-space: pre-line;: `a vérifier.
5- Il faut corriger les erreurs dans le fichier javascript. Il faut remplacer
function affichage() {
FenetreAffichage = window.open('','NouvelleFenetre', 'toolbar=no,status=no,width=800,height=600')
FenetreAffichage.document.write("Visualiser votre message");
FenetreAffichage.document.write("<br><br><b>Type : </b>" + document.bootleg.type.value);
(...)
par
var FenetreAffichage; /* Déclaration formelle d'une variable globale */
function affichage() {
if(FenetreAffichage == null || FenetreAffichage.closed)
/* Il faut d'abord tester si la fenetre secondaire n'existe pas en mémoire ou si elle existe, si elle n'a pas été déj`a fermée */
{
FenetreAffichage = window.open('', 'NouvelleFenetre');
if(FenetreAffichage != null || !FenetreAffichage.closed) /* Si la création de la nouvelle fen^etre a réussie */
{
FenetreAffichage.document.open();
/*
Lire
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-72161170
*/
FenetreAffichage.document.writeln("<h1>Visualiser votre message<\/h1>");
FenetreAffichage.document.writeln("<p><strong>Type : <\/strong>" + document.forms["bootleg"].elements["type"].value +"<\/p");
/*
Lire
https://developer.mozilla.org/en/Using_Web_Standards_in_your_Web_Pages/Using_the_W3C_DOM#Accessing_Elements_with_the_W3C_DOM
et
http://www.javascripttoolbox.com/bestpractices/#forms
pour référencer les éléments de formulaire de fa¸con plus s^ure.
Il faut aussi échapper les barres obliques (slashes) dans les blocs javascript: lire
http://htmlhelp.com/tools/validator/problems.html.en#script
*/
(...)
FenetreAffichage.document.close();
}
/*
Lire
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-98948567
*/
};
6- Il faudrait retirer cette instruction
FenetreAffichage.document.write("<br><br><A HREF='javascript:window.close()'>Fermer la fenetre</A><br>");
Toute fen^etre a par défaut un bouton systeme commande pour faire cela. Donc l'instruction est inutile et va m^eme causer des problemes dans certaines situations.
En conclusion: c'est surtout l'omission de document.open() et document.close() qui font que ¸ca échoue.
Plus d'info:
List of web design tips and resources for KompoZer users
Gérard (désolé: j'ai eu un probl`eme avec les voyelles et lettres accentués)
J'utilise Debian (Stretch) 9.6 sous KDE plasma, 64bits
Hors ligne
#5 Le 29/05/2009, à 14:03
- jajaX
Re : [abandonné] conception de formulaire avec kompozer
heu.. ben là... je savais que mes connaissances en dev étaient à la ramasse mais là je crois que je touche le fond.
un grand merci à toi pour ton aide. j'essaierais tes corrections pour voir ce que ça donne mais je laisse tomber. je vais tout gèrer avec un forum, ça sera plus simple pour moi...
merci encore
@+
jajaX
Asus X93SM-YZ157V / Asus X93SM-YZ065V sous KDE Neon
ASUS K95VB sous Kubuntu 24.04 Noble Numbat (64 bits) / ACER Aspire 5612 WLMI sous Kubuntu 18.04 Bionic Beaver (32 bits)
Hors ligne