Mise en forme des éléments HTML FORM avec remplissage 100%

Question

Je suis en train de styler un formulaire en utilisant une table avec des colonnes de largeur fixe et je souhaite que les éléments d'entrée à l'intérieur du <td> remplissent le conteneur. Je connais le modèle de boîte CSS et je sais que les éléments seraient saigner avec width: 100%, mais le problème est avec sa cohérence. Les éléments traversent comme prévu mais les éléments <select> ne le font pas. Il en résulte que mes champs ne sont pas alignés correctement. J'ai essayé toutes les propriétés comme le débordement, l'affichage, les espaces blancs ... cela ne fait aucune différence. Qu'y a-t-il avec l'élément <select>? Je peux voir dans Firebug qu'ils ont les mêmes propriétés de modèle de boîte avec l'élément d'entrée, mais ils ne rendent pas le même. J'utilise HTML 5 doctype et cela se produit à la fois dans Firefox et Chrome.

À l'heure actuelle, je corrige cela en utilisant une fonction JS qui sélectionne tous les éléments avec étirement de classe et calcule et définit la largeur statique pour le faire rentrer dans le conteneur. Cela harmonise parfaitement les éléments de la forme. (J'ai dû exclure <select> éléments parce que leurs largeurs étaient déjà correctes ... étrange bizarrerie.)

Existe-t-il une solution CSS pure à cela? Je ne voudrais pas exécuter cette fonction chaque fois qu'une partie de la page est mise à jour, comme sur les appels AJAX ...

Answer 1

Pas la réponse la plus utile, mais le style CSS des éléments de formulaire est assez peu fiable entre les navigateurs. Une solution JavaScript comme la vôtre est la meilleure solution.

Deux raisons pour le manque de fiabilité:

1. Quelques caractéristiques des éléments de formulaire ne peuvent pas être décrits par CSS. L'élément est un bon exemple: aucune propriété CSS ne peut décrire les différents aspects d'un élément <select> sur différents systèmes d'exploitation.

   Essayer de savoir quelles propriétés CSS devraient affecter les éléments de formulaire, et comment, est un nid de rat pour les créateurs de navigateurs, donc ils l'ont surtout laissé seul. Safari est une exception notable. voir par exemple http://webkit.org/blog/17/the-new-form-controls-checkbox-2/

2. Vous pouvez affirmer que les éléments de formulaire doivent être identiques d'un site à l'autre, quelles que soient les intentions des propriétaires de sites, afin que les utilisateurs sachent sur quoi ils cliquent.

Voir http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ pour un examen plus approfondi.

Answer 2

Le meilleur moyen est de truquer les frontières des éléments avec un div.

<div class="formholder> 
    <textarea></textarea> 
</div> 

Avec ce CSS:

.formholder {padding:10px;background:white;border:1px solid #ccc} 
.formholder textarea {width:100%;padding:0;margin:0;background:white;border:0} 

Bien sûr, vous pouvez étendre que, pour d'autres domaines. Certains navigateurs peuvent vous poser des problèmes. Chrome et webkit vous permettent de redimensionner des zones de texte, mais si vous ajoutez resize: none; à votre CSS, il devrait le désactiver mais YMMV.

Answer 3

que votre html ressemble un peu à ceci:

<form><table><tr> 
<td><input type="text" /></td> 
<td><select><option /><option /></select></td> 
</tr></table></form> 

Que diriez-vous simplement en utilisant la input et select pour le réglage de la largeur?

td { width: auto; } 
input[type=text] { width: 100px; } 
select { width: 100px; } 

Ou ai-je eu votre problème?

Answer 4

Il peut vous être utile de connaître les résultats suivants de diverses études d'utilisabilité.

1) Pour la plupart des formes, les gens préfèrent voir l'étiquette juste au-dessus de l'élément de forme:

2) Les gens trouvent utile si les éléments de formulaire sont dimensionnés de façon appropriée pour aider à suggérer la quantité d'informations prévu.

<ul> 

    <li><label for="firstname">First Name</label><br> 
     <input type="text" id="firstname" name="firstname" size="15"></li> 

    <li><label for="age">Age</label><br> 
     <input type="text" id="age" name="age" size="3"></li> 

    <!-- ... more list items --> 

</ul> 

Remarque: la liste de cet exemple serait stylée de sorte qu'elle n'apparaisse pas comme une liste à puce. L'utilisation de listes de cette manière facilite l'accessibilité car les lecteurs d'écran indiquent à l'utilisateur le nombre d'éléments contenus dans la liste.

Je pensais que cela pourrait être utile car cela suggère que vos efforts peuvent être un peu gaspillés en essayant de mettre en forme le formulaire dans une table et d'étirer toutes les entrées à la même longueur.

http://dev.w3.org/html5/markup/input.html#input

Answer 5

Vous pouvez utiliser box-sizing: border-box; sur textfields et textarea de. Il résout la différence avec la selectbox.

Answer 6

Le CSS suivant fonctionne pour Moz Firefox, pour les éléments d'entrée html (soumettre, bouton, texte), éléments de zone de texte, et même sélectionner des éléments. Les éléments de sélection sont presque la même longueur dans le navigateur que j'essaie.

table {width:100%;} 
form input { width: 100%; } 
form textarea { width: 100%; overflow-y: scroll; resize: vertical; } 
form select { width: 100%; }