Votre avis sur mon Formulaire d'inscription au club de tennis "Coup droit"

Bonsoir à tous,
Pourriez vous me donner votre avis sur mon formulaire .
Je vous en remercie par avance.

survey form

Cool.

I find the color combinations to be harsh, but I’m old fashioned. And the background image makes it hard to read the text.

For the code…

<h1 id="title"> FORMULAIRE D'INSCRIPTION AU CLUB DE TENNIS "COUP DROIT"</h1>

Do you see that space before “FORMULAIRE”? That is a bad habit to get into, adding spaces in text like that. That space will be on the page. Sometimes that can cause unexpected formatting errors that drive you crazy.

If you put your HTML into a validator like this one, you see some errors. You can ignore first 3 because it is cause by codepen, but the others are valid. Take a look.

The CSS looks pretty good, but one thing that caught my eye was things like:

margin: 20px 0px;

There is no need for “px” after “0” - if the value is 0, the units don’t matter. Not a big sin, per se, but it does make me question someone’s comfort with CSS.

Some of these colors are already defined. “#080” is “lime”.

But still, it looks good, joli travail. Have fun on the product landing page.

1 Like

In addition something to revisit;

  • User’s should be able to click on the label to toggle a selection, not just the radio button / checkbox
    The way your radio buttons are set now, no matter what the user clicks the first choice is always selected
  • Placeholder text should not mirror the label. It should be used to inform the user of the format of the required input.
  • Change the cursor to a pointer when hovering over the submit button
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

When asking for feedback on your projects you’ll get more people seeing it by putting it into the #project-feedback subforum. I’ve taken the liberty of moving this for you.

1 Like

Merci Kevin , d’avoir consacré du temps pour évaluer mon travail.
Je vais essayer de corriger mes erreurs en tenant compte de vos conseils.
Je vous souhaite une bonne journée.
Dan

Merci Steve pour l’analyse du code de mon formulaire et le temps que vous m’avez consacré .

  1. j’ai bien compris qu’il fallait que je supprime les balises
    et qu’il était plus judicieux d’ utiliser margin (CSS) pour créer des espaces.
  2. Il me semble que le curseur(trait vertical) se transforme en pointeur (flêche) lorsque je survole le bouton envoi . A moins que je me trompe.
  3. Pour les placeholder pouvez vous me préciser votre pensée lorsque vous parlez de types de format . Cela concerne (email, nombre de caractères maximum pour le texte ? ) . Cela n’empêche pas de laisser des instructions comme : saisissez votre nom, prénom, age, etc… pour guider l’utilisateur.
    4)Je n’ai pas compris ce que vous me demandez au sujet du basculement de la sélection en cliquant sur l’étiquette. il me semble que c’est déjà le cas dans les choix déroulants (select id ="dropdown) .
    Je vous remercie d’avance pour votre retour.

I may misunderstand something. The cursor by default is an arrow. When I hover over the button it does not change to a pointer. And I do not see anything in your code that would cause it to do so.

By format I mean when fields have a label (for instance, email) then you don’t want to repeat that in the input area. Instead, you would put something like guest@email.com
It’s a nit but something you should be aware of.

Let me clarify what a label is and clear up where the issue is in your code. In my feedback I mentioned the error is with the radio buttons. You have three radio buttons in your code, the first one is this

<input type="radio" id="scales" name="scales" radio value="0">
<label for="scales">Cours collectifs avec 4 élèves maximum</label>

The label is “cours collectifs avec 4 eleves maximum”
You have two additional radio buttons each with a different label. That is correct.
User’s should be able to click on the label to select (toggle) their choice. As it is now no matter which label they click, the first radio button gets selected. (It’s a small typo in your code probably from cut/paste)

Merci beaucoup Steve pour tous ces éclaircissements.
Je vais essayer de corriger mon code en tenant compte de vos remarques. Cela me fera progresser.
Bonne journée.
Dan.

1 Like

Bonjour Kévin,
J’ai essayé de tenir compte de vos conseils. J’ai également rectifié les erreurs que vous m’avez signalé.
J’espère que mon formulaire est désormais correct.
Merci et bonne journée.
Dan.

1 Like

Bonjour Steve,
J’ai travaillé sur mon formulaire pour corriger mes erreurs en tenant compte de vos remarques ainsi que vos conseils.
J’espère avoir corrigé l’ensemble de mes erreurs.
Je vous remercie pour votre collaboration.
Dan.

Salut. Au cas où vous souhaiteriez encore recevoir des avis concernant votre travail, en voici quelques une. Ce serait bien si vous ajoutiez un peu de marge entre les bords du formulaire et les bords de l´écran. L´ image de fond rend aussi la lecture un peu difficile. Pour finir, pensez à ajouter un peu de style sur les champs requis mais non renseignés par le visiteur, pour bien lui montrer quels champs il a omis. Bien cordialement.

Bonjour Yvelt,
Je vous remercie d’avoir consacré du temps à l’examen de mon site.
1)Pour l’image en background de mon site, Kevin m’a également fait la remarque et je compte faire une modification dans ce sens pour une meilleure lisibilité. Je suis en train de chercher une autre photo libre de droit que je pourrais utiliser.
2)Pour les marges, je vais les modifier.
3)En ce qui concerne l’addition de style dédié au champ non renseigné par l’utilisateur, vous me conseillez d’apporter une couleur de fond qui indique que le champ n’est pas renseigné si j’ai bien compris ?
Car normalement il y a un message qui alerte une omission de saisie.
Dans l’attente de votre retour.
Bien cordialement.
Dan

Good job cleaning things up @dantax7. For the issues I mentioned, everything looks good.

Le pensais à quelque chose de plus visuelle, comme colorer le champ. Mais le message peut suffire.

Cela peut s’envisager.
Je vais faire l’essai.
Merci pour votre retour.
Dan

Un grand merci pour votre collaboration. Many thanks for your advices.
Dan.

1 Like