Formulaire JavaScript

le 23 août 2011

Bonjour à tous,

Je suis tout nouveau dans la programmation et j'apprends beaucoup sur le tas.

J'ai quelques soucis de compréhension dus à mon manque d'expérience.

Je m'explique :

Je viens de réaliser un formulaire pour mon site internet en HTML (voir le "Form" en bas de page).

Je souhaite que ce formulaire, une fois rempli et validé par l'utilisateur, s'affiche dans une nouvelle page pour en effectuer l'impression papier.

Je ne sais absolument pas comment récupérer les valeurs et les afficher pour l'impression...

Quelqu'un pourrait-il m'aider à la réalisation du code JavaScript ?

Je suis au bout de mes recherches…

Merci d'avance.

<div style="background-image: url(); padding-bottom: 8px; margin: 3px; padding-left: 8px; width: 775px; padding-right: 8px; height: 20px; padding-top: 8px" align="left"><span style="font-family: Arial; color: #000000; font-size: 14px"><strong style="font-size: 14px">Informations Clients</strong></span></div>

<!-- align='left'

<p-->

<div align="left"><label for="nom"><span style="color: #000000">Votre Nom</span></label><br />

</div>

<div align="left"><label for="prenom"><span style="color: #000000">Votre Prénom</span></label><br />

</div>

<div align="left"><label for="email"><span style="color: #000000">Votre adresse email</span></label></div>

</div>

<div style="background-image: url(); padding-bottom: 8px; margin: 3px; padding-left: 8px; padding-right: 8px; padding-top: 8px" align="left"><span style="text-transform: none; color: #000000"><strong style="font-size: 14px">Informations sur le produit à retourner dans nos services</strong></span></div>

<p><span style="color: #ffffff; font-weight: bold"><label style="text-transform: none; color: #000000" for="ref">N° de référence de la montre<br />

(Elle se trouve gravée au dos de la montre et se compose de 4 chiffres)</label></span><strong style="color: #ffffff"><br />

</strong><strong></strong></p>

</p>

<p><label style="text-transform: none; color: #000000" for="ref"><strong>Garantie<br />

</strong>(Dans le cas où votre montre est encore couverte par la garantie 24 mois,<br />

il est <span style="color: #ffcc00"><strong>impératif de joindre la carte de garantie </strong></span>qui vous a été délivrée le jour de votre achat)</label><br style="color: #000000" />

</p>

<div style="background-image: url(); padding-bottom: 8px; margin: 3px; padding-left: 8px; padding-right: 8px; padding-top: 8px" align="left"><span style="text-transform: none; color: #000000; font-size: 14px"><strong>Description de la panne</strong></span><span style="text-transform: none; color: #ffcc00"><strong style="font-size: 14px"><br />

</strong></span></div>

<p><label style="text-transform: none; color: #000000" for="description panne">Décrire la panne ou les travaux à réaliser sur la montre</label><br style="color: #000000" />

<div style="background-image: url(); padding-bottom: 8px; margin: 3px; padding-left: 8px; padding-right: 8px; padding-top: 8px" align="left"><span style="text-transform: none; color: #000000"><strong style="font-size: 14px">Renvoyer votre montre</strong></span></div>

<div> <span style="text-transform: none; color: #000000">Nous vous recommandons d'utiliser du papier bulle pour emballer votre montre afin qu'elle soit protégée durant le transport et de l'expédier par la Poste en 'Colissimo' à l'adresse ci-dessous :</span><span style="text-transform: none; color: #ffffff"><br />

</span></div>

<div align="center"><span style="color: #000000; font-size: 14pt">Service Après-Vente<br />

</span></div>

</span></div>

<div align="center"><span style="color: #000000; font-size: 14pt">06400 Cannes</span></div>

<div align="center"><span style="color: #000000; font-size: 14pt">France</span><span style="color: #ffffff; font-size: 14pt"> </span></div>

</fieldset>

</form>

<HTML>

P.S.: il existe peut-être quelques erreurs dans mon "form"

Dylav · le 25 août 2011

Salut Alex,

La rédaction HTML de ton formulaire n'est pas un exemple de clarté, c'est le moins que l'on puisse dire :outch:

On va arranger ça en développant trois aspects,

- la séparation contenu / mise en forme,

- la structuration du contenu,

- les feuilles de style spécialisées par média.

Contenu / mise en forme

Pour obtenir une page Web claire (qui sera d'autant plus facile à modifier), il faut séparer le contenu des modalités de sa présentation,

- le contenu, c'est la page HTML,

- la présentation, c'est la feuille de style CSS.

Structure du contenu

Plutôt que cet empilement de blocs <div>, <span>, etc., il suffit de décrire ton formulaire en trois paragraphes <p>,

- le client (dont les modalités de présentation seront décrites par la classe "client"),

- le produit (classe "produit"),

- l'adresse (classe "adresse").

Peut-on faire plus clair, plus simple ? Les deux premiers paragraphes comportent des éléments de formulaire, pour chacun desquels on peut décrire des modalités de présentation,

- élément input/text, classe "simple",

- élément textarea, classe "textarea",

- élément input/radio (sans besoin particulier de présentation).

J'ai laissé les balises <label>, qui me semblent néanmoins tout à fait inutiles…

Feuilles de style par média

Les clauses de style (les classes évoquées ci-dessus) sont représentées par des étiquettes dans la feuille de style (par exemple .client), qui seront référencées dans la page HTML (dans l'exemple, <p class="client">).

D'après tes desiderata, nous devrions avoir besoin de mettre en œuvre deux médias, l'écran (screen) et l'impression (print), mais il faut savoir qu'il en existe bien d'autres, en particulier destinés à ceux qui souffrent de handicaps (voir ici) !

Tu trouveras ci-dessous la page HTML "désossée"

<html>

<head>

<title>Mon formulaire</title>

</head>

<body>

<strong>Informations Client</strong><br>

<br><label for="nom">Votre Nom</label>

<br>Votre Prénom

<br><label for="email">Votre adresse email</label>

</p>

<strong>Informations sur le produit à retourner dans nos services</strong><br>

<br><label for="ref">N° de référence de la montre

<br>(elle se trouve gravée au dos de la montre et se compose de 4 chiffres)</label>

<br><label for="ref"><strong>Garantie</strong>

<br>(dans le cas où votre montre est encore couverte par la garantie 24 mois,

<br>il est <strong class="orange">impératif de joindre la carte de garantie </strong>qui vous a été délivrée le jour de votre achat)

</label><br>

<br><strong>Description de la panne</strong><br>

<br><label for="description panne">Décrire la panne ou les travaux à réaliser sur la montre</label>

<br><strong>Renvoyer votre montre</strong><br>

<br>Nous vous recommandons d'utiliser du papier bulle pour emballer votre montre afin qu'elle soit protégée durant le transport et de l'expédier par la Poste en 'Colissimo' à l'adresse ci-dessous :

</p>

<p class="adresse">Service Après-Vente<br>06400 Cannes<br>France</p>

</fieldset>

</form>

</body>

</html>

et la feuille de style "écran"

body {font-family: Arial;

color: #000;

font-size: 14px;

}

form {width: 650px}

fieldset {width: 640px;

border: 1 solid #F60;

padding: 8px;

margin: 3px;

}

.client {padding: 8px;

margin: 3px;

text-align:left;

}

.produit {padding: 8px;

margin: 3px;

text-align:left;

}

.adresse {text-align:center;

font-size: 18px;

}

.simple {background-color: #000;

width: 200px;

height: 30px;

color: #FFF;

}

textarea {background-color: #000;

width: 500px;

height: 200px;

color: #FFF;

}

.orange {color: #C60}

Il te restera donc à construire la feuille de style "impression".

Ce sont les balises <link> de la page HTML qui en assurent le lien avec les fichiers feuilles de style.

Quelques remarques personnelles d'esthétique … dont tu feras ce que tu voudras

Italiques : il est déconseillé d'utiliser les caractères italiques, car ils sont représentés à l'écran de façon peu agréable à l'œil et freinent la vitesse de lecture. Si tu y tiens, tu peux en revanche les utiliser dans la feuille de style "impression" (où la qualité sera excellente).

Sérif : il est communément admis que les polices sans sérifs sont plus lisibles à l'écran, et les polices avec sérifs plus lisibles sur papier. Tu pourras donc en jouer dans les feuilles de style !

Zones de saisie : je trouve triste et peu esthétique cette saisie en blanc sur fond noir. Je te suggérerais plutôt de donner à ton fieldset une couleur de fond pastel (jaune pâle sur l'écran, par exemple, mais blanc sur impression, ne gâchons pas les cartouches d'encre qui sont si chères), et des zones de saisie en noir sur fond blanc.

Récupération des données

Oui, au fait, si l'on revenait à la question initiale ? :hein:

Eh bien là, j'arrive à mes limites. Ce que je pense, c'est que si ton visiteur remplit son formulaire, puis appuie sur CTRL+P, il devrait avoir une impression conforme à la feuille de style "impression" (données incluses).

Mais je laisse à d'autres le soin de répondre plus précisément.

@+

Dylav

Dylav · le 26 août 2011

HTML5 & CSS3

Les avancées de ces deux langages ouvrent la voie à une meilleure clarté des données et à de nouvelles possibilités en matière d'esthétisme, y compris pour un formulaire !

À ce sujet, tu trouveras – sur l'excellent site Pompage – la traduction de Frédéric Chotard de l'article Formulaires HTML5 : prenez la clé des champs de Inayaili de León. Ça va te donner plein d'idées, j'en suis certain :sourire:

Connexion

Pas encore inscrit ?

Formulaire JavaScript

Messages recommandés

Invité alexferny

Dylav

Dylav

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer