1485 sujets

Web Mobile et responsive web design

[Résolu] Formulaires responsive

Hello.

La majeure partie des guidelines donnent une dimension d'environ 40px (de tête Apple 44 et Microsoft 48) minimum pour les éléments d'interface "tappable" (ex: bouton).

Je me demandais comment vous faisiez pour les éléments de formulaire, en particulier pour les checkbox.

Je ne trouve rien de bien probant dans mes recherches, et j'aimerais autant que possible garder les éléments de formulaires natifs (et surtout éviter les trucs crades façon jQuery mobile).

Merci d'avance.
Modifié par Florian_R (26 Sep 2012 - 14:39)
Modérateur
Hello,

Pour moi une checkbox avec son label c'est bien assez grand pour être «tapable», si le texte est suffisamment grand et suffisamment espacée des autres éléments. C'est surtout ce dernier point qui est crucial selon mes tests. Pour les boutons et input texte, on peut définir la taille et c'est généralement au moins assez large. Donc j'utilise plutôt les inputs par défaut, sauf pour des apps demandant beaucoup d'entrées de formulaires, où la vaut la peine d'implémenter des systèmes plus agréables dans certains cas (des spinners par exemple)
@Patidou: Pas de soucis, ça m'arrive tout le temps aussi.

@kustolovic: J'étais effectivement parti dans l'idée de modifier la hauteur des input, mais comme c'est quasi impossible d'avoir un rendu homogène avec les select, ça n'est pas trop possible (select + height en CSS => pas possible d'aligner verticalement le texte de l'option visible, en tous cas avec toutes les techniques que j'ai testé).

Pour les checkbox et radio, je sais bien que le label est cliquable, mais l'utilisateur n'en est pas toujours conscient.

Sous Android, ils ne sont pas vraiment bien gros, et pour avoir observé des amis avec de grosses paluches (du genre 5 chipos au bout de la main), ça n'est pas des plus pratique pour tout le monde, et là j'ai pas mal de champs.

Au pire, je pense me rabattre sur des boutons radios en CSS3, même si je ne suis pas fan du tout des hacks qui imposent une structure HTML pour des besoins de CSS.
Salut,

Si ton problème concerne le meilleur moyen d'imposer tes styles aux cases à cocher et boutons radio, il rejoint le problème épineux de l'application des CSS aux contrôles de formulaire, auquel cas je ne vois pas de meilleure solution que de lâcher prise. Autrement dit, comment ne pas styler ? Smiley cligne
Victor BRITO a écrit :
(...) auquel cas je ne vois pas de meilleure solution que de lâcher prise. Autrement dit, comment ne pas styler ? Smiley cligne
Je suis également partisan du lâcher prise (c'est pour ça que je bannissais d'entrée une solution JS), mais là je trouve que c'est un peu léger niveau ergonomie (sur certains device en fait) avec les éléments natifs, donc du coup je me demandais s'il n'existait pas de moyen d'améliorer ça.

Je pense que je vais laisser en l'état pour l'instant, et je verrais selon les retours utilisateurs quelques temps après la mise en ligne, auquel cas j'aviserais.

Merci à tous.
Modifié par Florian_R (26 Sep 2012 - 14:37)
Modérateur
Ah ben il m'est venu une idée: vu que les labels peuvent être implicites et englober l'input, quel serait le résultat si on agrandissait le label?


<!DOCTYPE html>
<html lang="fr">
<head>

<title>Label size</title>

<meta name="viewport" content="width=device-width" />
    
<style>
body {
	font-size: 2em;	
}
label {
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  padding: 0.5em;
  margin: 10px;
  background-color: #f0f0f0;
  display: block;
}
</style>

</head>
<body>
<label><input type="checkbox" name="bidule" value="chouette" /> Bidule chouette</label>
<label><input type="checkbox" name="machin" value="chouette" /> Machin chouette</label>
</body>
</html>

Je viens de tester et ça marche, en tout cas sur Android. Bon les checkbox restent ridiculement petites mais la zone du label est très large! Testable sur http://kusto.ch/label.html
Hello,

Pas mal vu...
Je viens de tester avec un Ipod (vieille génération...) ça ne fonctionne pas, seul la checkbox reste cliquable.
Je ferai le test demain sur iphone Smiley cligne
6l20 a écrit :
Je viens de tester avec un Ipod (vieille génération...) ça ne fonctionne pas, seul la checkbox reste cliquable.

Pareil avec un iPad 1 sous iOS 5.1.1.
6l20 a écrit :
Las, même chanson avec iPhone sous iOS 5.1.1 Smiley ohwell

En revanche, sous iOS 6, ça marche (testé sur iPhone).
Victor BRITO a écrit :

En revanche, sous iOS 6, ça marche (testé sur iPhone).

Je voulais tester ce soir, le test précédent a été fait sur un 3GS fatigué... (et ma meuf m'a littéralement volé mon iPhone 4 avec IOS 6... Smiley sweatdrop ).
L'exemple ci-dessus donne quoi sur IOS 6 (iPhone/iPad) ?
Modérateur
Bon ben zut pour ios.
Sinon sympa les checkbox pour le fun! vu qu'ils se servent du label pour la taille sa fonctionne aussi sur ios?
Parce que dans ce cas on peut laisser le label à droite de l'input, et décaler le label sur la gauche, par dessus l'input, avec un padding-left…
kustolovic a écrit :
Bon ben zut pour ios.
Sinon sympa les checkbox pour le fun! vu qu'ils se servent du label pour la taille sa fonctionne aussi sur ios?
Parce que dans ce cas on peut laisser le label à droite de l'input, et décaler le label sur la gauche, par dessus l'input, avec un padding-left…

Oui, ça "fonctionne", après, faut étudier le bouzin...niveau accessibilité, je ne suis pas convaincu Smiley ohwell
C'est quand même beaucoup de travail pour peu de chose finalement, même si c'est esthétiquement très convainquant Smiley cligne
Pour le coup des labels implicites, je me demande si ça ne marcherais pas sous iOS en "implicito-explicite" : label englobant l'input plus attribut for.

Je vais essayer de tester ça dès que je récupère le téléphone qui va bien.
Sujet clos
Aller à