5542 sujets

Sémantique web et HTML

Pages :
Bonjour,

J'optimise l'implémentation d'un formulaire de paiement en ligne.
Je dois remplacer le champ type="text" pour que soit permis la saisie d'un champ alphanumérique acceptant les tirets, mais pas d'autres caractères spéciaux.
J'ai l'impression que ma demande est simple et pourtant, je ne trouve rien en ligne pour me guider. Pourriez-vous m'indiquer comment puis-je corriger mon code ci-dessous svp ?

<p><label for="Numéro de dossier">Numéro de dossier* <input name="orderid" required="required" type="text" /></label></p>


D'avance, merci pour votre aide précieuse !
Merci pour vos réponses (or may I say thank you for your help).

J'ai regardé de plus près le premier lien, à savoir, celui concernant les pattern attribute.
Mon formulaire est basé sur des balises <label for> et non <form action>. J'ai donc essayé de faire quelque chose mais je ne suis pas convaincue de l'efficacité de ce code... Smiley rolleyes . L'attribut Pattern est-il bien positionné ainsi ?

<p><label for="Numéro de dossier">Numéro de dossier* <input name="orderid" required="required" pattern="[a-ZA-Z0-9-]"/></label></p>


Merci par avance pour votre aide.
Modérateur
C'est presque parfait !

L'attribut pattern n'a rien à voir avec les caractéristiques de la balise form. Néanmoins qu'il y ait où non présence de label (vaut mieux en avoir pour l'accessibilité), tout formulaire devrait avoir une balise form ainsi qu'une page en guise de cible (action), même si la page n'est autre que celle-ci même.

Pour en revenir à nos moutons, le pattern que vous avez renseigné est presque bon, en effet la première série concerne les minuscules or vous la concluez par un Z majuscule. Du coup le pattern et rien ça fait deux rien. Essayez plutôt [a-zA-Z0-9-] Smiley cligne
<form>
  <label>
    Numéro de dossier
    <input type="text" pattern="[\w-]{4,10}" required placeholder="4 à 10 lettres ou chiffres"
           inputmode="text"
           autocomplete="off" />
  </label>
  <input type="submit" />
</form>

Si <input type="text" /> est dans <label>, alors "for" est inutile.
Sinon de façon classique, c'est
<label for="mon-id">Votre numéro</label><input id="mon-id" name="numero" />

Je pense que orderid a un format plus précis qu'une série illimitée de chiffres et lettres.
Donne un exemple de orderid si tu veux savoir le pattern qui va bien.
Merci pour votre aide à tous les deux.
Puis-je tenter la formulation suivante ?

<p><label for="Numéro de dossier">Numéro de dossier* <input name="orderid" required="required" pattern="[a-zA-Z0-9-]"/></label></p>
Modérateur
En ce qui concerne le pattern, rien à redire. Par contre je vous invite à bien relire le dernier message de Bazooka07 à propos de l'attribut for de la balise label (lisez bien la phrase qui en parle et observez aussi le contre-exemple).

Plus que cette petite correction et ce sera tout bon ! Smiley biggrin
Tu ne permets qu'un caractère ?
A la réception du formulaire, pense à forcer en majuscules/minuscules
Modérateur
bazooka07 a écrit :
Tu ne permets qu'un caractère ?
A la réception du formulaire, pense à forcer en majuscules/minuscules
Smiley rofl J'avais même pas vu Smiley fou
Merci pour vos retours.

Effectivement, je souhaite autoriser qu'un seul caractère car c'est ce que la documentation technique donnée par la banque autorise pour ce champs "order id" : "Champ au format alphanumérique. Seul le caractère spécial « - » est autorisé". Voici tout ce que j'ai.

Ainsi, ton conseil bazooka07 : ce serait de remplacer avec un label for ? Je ne peux pas conserver mon code comme proposé ci-dessus ?

La façon dont j'ai monté le formulaire a été approuvé par le support technique de la banque, j'aimerai donc conserver ma version du formulaire ainsi si possible...

Merci par avance pour votre aide.
Modifié par Elo_GG (08 Jun 2018 - 14:44)
Modérateur
Tu m'diras un seul caractère c'est cool :
* validation facile
* taille de la bdd très réduite
* facile à retenir
* moins de dossiers = moins de boulot = plus tôt à la maison
I'm loving it Smiley biggol
J'espère bien comprendre : effectivement, pour ce champ, je n'autorise que les tirets.

NB : bien sûr, il ne s'agit qu'une ligne de code d'un formulaire plus détaillé Smiley cligne
Modifié par Elo_GG (08 Jun 2018 - 14:44)
Modérateur
Elo_GG a écrit :
"Champ au format alphanumérique. Seul le caractère spécial « - » est autorisé".
Si on s'en tient à cette phrase pour moi elle ne signifie pas qu'un seul caractère est autorisé pour le champs mais bien que de tous les caractères spéciaux seul le signe moins l'est.

Le soucis avec
<p><label for="Numéro de dossier">Numéro de dossier* <input name="orderid" required="required" pattern="[a-zA-Z0-9-]"/></label></p>
C'est que la référence indiquée pour for doit correspondre à l'identifiant (orderid) du champs input auquel il s'applique et ce dans le cas ou label et input sont des éléments séparés.
Dans le cas où ils sont imbriqués, l'attribut for est superflu.
Modifié par Greg_Lumiere (08 Jun 2018 - 14:46)
Un seul caractère ???
Bossent pas trop dans cette banque
26 + 26 + 10 = 62 ordres seulement
Ils ont besoin d'un réseau informatique pour faire tout cela

Tu peux garder ton label mais ton "for" ne sert à rien. Donc drop it !
Modifié par bazooka07 (08 Jun 2018 - 14:47)
Modérateur
Elo_GG a écrit :
J'espère bien comprendre : effectivement, pour ce champ, je n'autorise que les tirets.
Sérieux ? Alors dans ta boite ça donne:
Monsieur Bidulle - dossier n°-
Madame Michu - dossier n°-
Monsieur Truc - dossier n°-
...

Aller, dis moi oui que je me marre un bon coup Smiley ola
Pages :