[spip-dev] Saisies input type=number

Holla,

le html5 permet une saisie de type number en précisant les nombre max et min.

Cela correspond peu ou prou à ce qu'on propose en PHP en terme de vérificaiton d'une saisies de type input.

Du coup je me dis que si une personne demande cela lorsqu'on construit une saisie dans Formidable (ou tout autre constructeur de formulaire), ce serait cohérent de modifier automatiquement le html5 pour appliquer type="number" "max" et "min".

En meme temps je trouverais bizarre de faire dépendre cela d'une vérification qu'on configure en yaml/php mais pas forcéement en squelette brut

Qu'en pensez vous ?

Maïeul

Il n’est pas du tout déconnant d’avoir ces paramètres …pour peu qu’on soit en HTML5 (dans les autres cas de doctype on devrait avoir type=“text” pour ne pas avoir de page non valide)

Maintenant, ceci n’empêche et ne se substitue pas à la vérification côté serveur…
Il faut voir ce qui est fait côté client comme un plus pouvant ne pas être disponible (tout comme un navigateur peut ne pas supporter JS, il peut ne pas connaître cette DTD)

oui, oui, ma question était plutot sur l'application automatique de ces
paramètres coté client en html5 a partir de quelque chose censé être au
départ une vérif coté serveur

Oui et non, le soucis c est qu en CSS le type number et trop pénible a décorer suivant le navigateur. Parfois j utilise un input text pour la saisie d un nombre a cause des petits boutons d incrémentation/decrementation qui sont vraiment pénible à décorer. Ex: les même version de Firefox sous Linux et Windows ne réagissent pas de la même façon.

Moi j'avais fait ça (rapide et sale)

<input type="number" name="#ENV{nom}" class="#ENV{class, number}" id="#ENV{nom}" min="#ENV{min}" max="#ENV{max}" step="#ENV{step}" value="#VALEUR" />

<script>
function sliderChange(e) {
  // Prend les range
  var ranges = document.getElementsByClassName("range");
  // Loop les range et les stocke dans quant
  for (var i = 0, quant = ranges.length; i < quant; ++i) {
     // Trouve les id des ranges
     ranges[i] = ranges[i].id;
      ranges[i].addEventListener("input", function() {
       let here = this.nextSibling.id;
       let there = document.getElementById(here);
       there.innerHTML = this.value;
    }, false);
  }
}
sliderChange();
</script>

Mes des centimes de rupias

Oups j'ai oubliè ça

[(#SAISIE{range,head_nom_space}{min="1"}{max="10"}{step="0.1"}{label=<:zbox:head_nom_space:>[<br /><i>(#CONFIG{zbox/head_nom_space})</i>]})]

.saisie_range{position:relative}
.range{width:100%;height:1.5rem}
.there{font-size:70%;display:block;text-align:center;height:2rem;width:2rem;clear:both;position:absolute;top:0;right:0}

Oui et non, le soucis c est qu en CSS le type number et trop pénible a décorer suivant le navigateur. Parfois j utilise un input text pour la saisie d un nombre a cause des petits boutons d incrémentation/decrementation qui sont vraiment pénible à décorer. Ex: les même version de Firefox sous Linux et Windows ne réagissent pas de la même façon.

Salut la liste

Je suis plutôt favorable à l’usage des types plus précis et sémantiques pour ma part ; et donc suis d’accord avec la proposition initiale de Maïeul.

Je n’ai pas de soucis avec la stylisation des champs, et je n’ai jamais besoin de retoucher aux boutons de …crémentation fort utiles et qui semblent en effet casse gueule à cibler (C’est dommage de s’acharner à les virer alors que ça apporte plus d’aide aux usagers…)

Que Firefox présente des différences d’un système d’exploitation à un autre est normal et a toujours été assumé : ça s’intègre au maximum à la plateforme, et je parie qu’il y a de subtiles différences d’un bureau à un autre.

Hello,

Oui je suis d’accord, mais la fonction de vérification n’as pas lieu d’être exclusive a un input type number. d’ailleurs Maieul le souligne:

En meme temps je trouverais bizarre de faire dépendre cela d’une
vérification qu’on configure en yaml/php mais pas forcéement en
squelette brut

Au final il s’agit plus d’avoir une saisie type number qu’un input qui change en fonction des vérifications associées