Personnaliser un formulaire

a marqué ce sujet comme résolu.

Pour les images, je ne comprend pas, mon serveur à dû crasher.

Tu peux héberger les images sur ZdS directement, comme ca pas de souci :) (une galerie avec le nom de ton tuto a du être créée dans ton profil. Pour la trouver clique sur ton avatar en haut a droite puis "galerie").

Sinon my 2 cents que j'avais ecrit lors des debuts de ton tuto :

Bon la c'est pas un tuto, c'est un ensemble de code. Jveux dire que un bon tuto tu en sors tu dois savoir tweaker les choses pour faire ce que tu veux. La c'est juste une invitation au copier-coller.

Il faudrait rajouter le surlignage des lignes de code nouvelles ou importantes, expliquer ce qu'elles font, mettre des captures d’écran, raconter quelles paramètres peuvent être change et leur impact etc..

+0 -0 
1
2
3
4
5
6
7
8
   {
   ...
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
}

Source

  • Pense à utiliser des commentaires plutôt que de mettre du texte invalide
  • Quand on fait les choses proprement, on met la propriété officielle (celle qui est valide, sans préfixe propriétaire) à la fin, pas au début
1
2
3
4
function ChangeStatut(a) {
if(a.regagree.checked === true) {a.validation.disabled === false}
if(a.regagree.checked === false) {a.validation.disabled === true}
}

Source

Tu penses vraiment que c'est lisible et compréhensible ? La remarque est d'ailleurs valide pour le tout premier bout de code du tuto (celui pour l'outline de Firefox) où il n'y a pas d'indentation et les propriétés sont collées les unes aux autres sans séparation ni explication.

1
input[type="submit"]:disabled{display:none}

Source

Non seulement c'est pas forcément une bonne idée niveau accessibilité mais en plus côté esthétique c'est une catastrophe : un bouton désactivé est désactivé, pas caché. Sans compter qu'en plus ça risque de faire changer la hauteur du conteneur et donc forcer pas mal de calculs supplémentaires inutiles.

1
2
3
4
<div class="input-file-container"> 
    <input class="input-file" id="my-file" type="file">
    <label tabindex="0" for="my-file" class="input-file-trigger">S&eacute;lectionner un fichier...</label>
 </div>

Source

  • Tu ferais mieux d'utiliser la balise label comme conteneur ou appliquer un attribut aria-labelledby à ton input
  • Les caractères encodés en XML… sérieusement ? En 2015 tu sais toujours pas gérer les charsets pour afficher les caractères non-ASCII proprement ?
  • Juste après tu cites plein de sélecteurs mais tu ne donnes aucun exemple de CSS à appliquer : c'est pas le but de ton tuto à la base ?
1
document.querySelector("html").classList.add('js');

Au lieu de cette ligne de code, vous pouvez très bien mettre ça dans le HTML, c'est pareil !

1
<html class="js">

Source

Euh… non. Belle connerie. Quelqu'un qui désactive le JS se tapera des CSS spécifiques sans exécuter le JS. Au mieux le design sera un peu bancal, au pire la page sera inutilisable.

Soit dit en passant, au lieu d'utiliser des querySelector pour rien, utilise plutôt des méthodes plus anciennes : tu gagneras en compatibilité et en performance.

1
2
3
var fileInput  = document.querySelector( ".input-file" ),
    button     = document.querySelector( ".input-file-trigger" ),
    the_return = document.querySelector( ".file-return" );

Source

Quand il y a un seul bouton dans la page, je veux bien, mais quand il y en a plusieurs, ça se passe comment ?

+0 -0

Bonjour, Merci pour ton retour rapide.

Je ne comprend pas pour le texte invalide, qu'est-ce qui est invalide ? Sinon, je ne savais pas, je vais changer ça.

Pour le sélecteur des class, je vais changer, merci du conseil, je vais changer ça. Je vais abandonner l'idée du "bouton désactivé" alors il est "invisible".

Pour quand il y en a plusieurs, j'avais complètement zappé, je vais aussi changer ça.

La prochaine version sera la définitive, à part en cas de gros pépin, donc si vous avez d'autres conseils, surtout n'hésitez pas

Merci beaucoup,

Noam

+0 -2
Ce sujet est verrouillé.