Dois-je taille un textarea avec CSS largeur / hauteur ou HTML colonnes / lignes d'attributs?
À chaque fois que je créer une nouvelle forme qui comprend un textarea
j'ai le dilemme suivant quand j'ai besoin de préciser ses dimensions:
Utilisation CSS ou utiliser le textarea
s'attributs cols
et rows
?
Quels sont les avantages et les inconvénients de chaque méthode?
Ce sont la sémantique de l'utilisation de ces attributs?
Comment est-il fait d'habitude?
Vous devez vous connecter pour publier un commentaire.
Je recommande d'utiliser les deux. Lignes et colonnes sont utiles et nécessaires si le client ne prend pas en charge les feuilles de style CSS. Mais en tant que designer, je les écraser pour obtenir exactement la taille que je souhaite.
Recommandé de le faire est par l'intermédiaire d'une feuille de style externe par exemple
CSS:
HTML:
line-height
pour la hauteur de votre textarea.rows
etcols
attributs ne sont pas requis pour lestextarea
élément à transmettre la validation HTML5, ils ne sont pas répertoriés comme requis par le W3C.En HTML définir
En CSS définir
Cela va déclencher le navigateur pour régler la hauteur de la textarea EXACTEMENT à la quantité de lignes, plus les paddings autour d'elle. Réglage de la CSS hauteur d'un montant exact de pixels feuilles arbitraire d'espaces.
height: auto;
en CSS ne semble pas affecter mon textarea à tous.Selon le w3c, cols et les lignes sont à la fois des attributs requis pour les textareas. Les lignes et les Cols sont au nombre de caractères qui vont tenir dans la zone de saisie. plutôt que de pixels ou de certains autres potentiellement arbitraire de la valeur. Aller avec les lignes/colonnes.
La réponse est "oui". Qui est, vous devez utiliser les deux. Sans lignes et colonnes (et il y a des valeurs par défaut même si vous ne les utilisez pas explicitement) le textarea est unusably petit si le CSS est désactivé ou remplacé par un utilisateur de la feuille de style. Gardez toujours les problèmes d'accessibilité à l'esprit. Cela étant dit, si votre feuille de style est autorisé à contrôler l'apparence de la textarea, vous sera généralement se retrouver avec quelque chose qui ressemble beaucoup mieux, s'intègre dans l'ensemble de la conception de page bien, et permet de redimensionner les garder jusqu'à la saisie de l'utilisateur (dans les limites du bon goût, bien sûr).
De la taille d'un textarea peut être spécifiée par les cols et les lignes attributs, ou mieux encore, grâce à CSS' propriétés height et width.
Les cols de l'attribut est pris en charge dans tous les principaux navigateurs.
Une différence principale est que
<TEXTAREA ...>
est une balise conteneur: il a une balise de début ().Pour la zone de texte on peut utiliser en dessous de css pour fixer la taille de l'
Testé dans angularjs et angular7
J'ai l'habitude de ne pas spécifier
height
, mais ne spécifiezwidth: ...
etrows
etcols
.Généralement, dans mon cas, seulement
width
etrows
sont nécessaires, pour le textarea à l'air sympa par rapport à d'autres elems. (Etcols
est une solution de secours si quelqu'un n'utilise pas de CSS, comme expliqué dans les autres réponses.)((En précisant à la fois
rows
etheight
se sent un peu comme la duplication de données, je pense?))Une des principales caractéristiques de ces zones de texte, c'est qu'ils sont extensibles. Sur une page web, cela peut entraîner des barres de défilement qui apparaissent sur la zone de texte si la longueur du texte trop-pleins de l'espace que vous avez défini (l'utilisation de lignes, ou que l'utilisation des CSS. Qui peut être un problème quand un utilisateur décide de les imprimer, en particulier avec "l'impression" pour le PDF, donc confortablement grand min-height pour les imprimés textareas avec une condition de la règle CSS:
si vous ne l'utiliser à chaque fois que l'utilisation line-height:'..'; propriété de son contrôle de la hauteur de textarea et de la propriété width pour la largeur de la zone de texte.
ou vous pouvez utiliser une taille de police en css suivant:
HTML lignes et colonnes ne sont pas sensibles!
J'ai donc définir la taille dans le CSS. Comme une astuce: si vous définissez une petite taille pour les mobiles penser à utiliser
textarea:focus {};
Ajouter un peu plus d'espace ici, qui ne se déploient dès qu'un utilisateur veut écrire quelque chose
CSS
HTML
textarea
...