Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Améliorer la prise en charge des navigateurs où le JavaScript est désactivé #15

Closed
DavidLibeau opened this issue Apr 7, 2020 · 11 comments · May be fixed by #17
Closed

Améliorer la prise en charge des navigateurs où le JavaScript est désactivé #15

DavidLibeau opened this issue Apr 7, 2020 · 11 comments · May be fixed by #17

Comments

@DavidLibeau
Copy link

Ce formulaire fonctionne exclusivement avec JavaScript. Si aucune alternative pour le faire fonctionner sans cette technologie est possible, on peut tout de même améliorer le site pour les utilisateur·rice·s n'ayant pas JavaScript d'activé ou ayant des problèmes pour le chargement du script.

Par exemple, en utilisant des balises <noscript> pour informer l'utilisateur·rice que ce site web n'est pas utilisable sur son navigateur.

Un autre problème concerne le formulaire en lui même. Si le JavaScript est désactivé, les données personnelles de l'utilisateur·rice sont transmises au serveur. En effet, le formulaire HTML est paramétré pour envoyer les données en paramètres GET. On se retrouve avec une url de ce type :

http://localhost:1234/index.html?firstname=Test&lastname=Test&birthday=01%2F01%2F1970&lieunaissance=Lyon&address=999+avenue+de+france&town=Paris&zipcode=75001&field-reason=sport&datesortie=2020-04-07&heure=12%3A05

On pourrait imaginer que le formulaire ne s'affiche carrément pas si le JavaScript n'est pas activé.

@JohnXLivingston
Copy link

Très bon point pour l'envoie du formulaire !

@babache
Copy link

babache commented Apr 7, 2020

Tout simplement on ajoute avant le


<noscript> <style>#form-profile{display:none}</style> <div class="alert alert-danger text-center"><b><u>/!\</u></b> Le javascript doit être activé pour générer l'attestation <b><u>/!\</u></b></div> </noscript>

@BlueskyFR
Copy link

BlueskyFR commented Apr 7, 2020

Bonjour, je viens de faire une PR (#17) pour afficher un message d'avertissement renvoyant aux instructions permettant d'activer JavaScript dans le navigateur de l'utilisateur dans le cas où celui-ci serait désactivé.
Je pense que cela permettra à plus de français d'utiliser le générateur.

@infosteph
Copy link

infosteph commented Apr 7, 2020

Bonjour, je viens de faire une PR (#17) pour afficher un message d'avertissement renvoyant aux instructions permettant d'activer JavaScript dans le navigateur de l'utilisateur dans le cas-où celui-ci serait désactivé.

Bonjour, Merci pour votre proposition. Nous la retenons et allons l'utiliser.

@JohnXLivingston
Copy link

JohnXLivingston commented Apr 7, 2020

Ne faudrait-il pas aussi enlever la balise "form" et l'ajouter par javascript ?

@BlueskyFR
Copy link

Ne faudrait-il pas aussi enlever la balise

et l'ajouter par javascript ?

de quelle balise parles-tu ? Dans tous les cas, il est préférable de passer par un display: none qui évite les ajouts et suppressions du DOM qui, eux, prennent plus de temps.
C'est ce que j'ai utilisé ici.

@BlueskyFR
Copy link

Bonjour, je viens de faire une PR (#17) pour afficher un message d'avertissement renvoyant aux instructions permettant d'activer JavaScript dans le navigateur de l'utilisateur dans le cas-où celui-ci serait désactivé.

Bonjour, Merci pour votre proposition. Nous la retenons et allons l'utiliser.

Super 😄

@JohnXLivingston
Copy link

JohnXLivingston commented Apr 7, 2020

de quelle balise parles-tu ? Dans tous les cas, il est préférable de passer par un display: none qui évite les ajouts et suppressions du DOM qui, eux, prennent plus de temps.
C'est ce que j'ai utilisé ici.

Je n'ai que survolé rapidement la PR. Si j'ai bien compris, elle ajoute un bandeau en haut pour avertir, mais laisse le formulaire en dessous. Donc quelqu'un qui n'a pas le javascript activé peut toujours envoyer le formulaire (clic sur le bouton ou touche entrée dans un champs).
Je me trompe peut être, comme dit que j'ai que survolé le commit.

La solution que je préconise en pareil cas, c'est de retirer la balise form du fichier html. Et c'est le javascript qui transformera une balise div en form, ou qui ajoutera une balise form autour d'une div. Pas de balise form => pas de submit.

Une autre solution : enlever uniquement le bouton submit.

@JohnXLivingston
Copy link

Oh ! je viens de comprendre l'ambiguité... J'avais mis les chevron autour de 'form', et github ne l'a pas échappé... J'édite le message plus haut.

@BlueskyFR
Copy link

BlueskyFR commented Apr 7, 2020

Du coup dans ma PR, par défaut le formulaire n'est pas affiché (présent mais invisible) et le code JavaScript l'affiche dès le chargement de la page. Du coup, si la personne n'a pas JavaScript, le formulaire reste invisible.
Pas de risque de se tromper donc.

@infosteph
Copy link

Bonjour, Les améliorations ont été apportées en tenant compte de vos recommandations @BlueskyFR. Je clos cet issue. Merci.

@LAB-MI LAB-MI locked as resolved and limited conversation to collaborators Apr 10, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants