Devrais-je dimensionner une zone de texte avec des attributs CSS width / height ou HTML cols / rows?
Chaque fois que je développe un nouveau formulaire qui inclut un textarea, je suis confronté au dilemme suivant lorsque je dois spécifier ses dimensions:
Utilisez CSS ou utilisez les attributs de textareacols et rows?
Quels sont les avantages et les inconvénients de chaque méthode?
Quelle est la sémantique de l'utilisation de ces attributs?
Comment cela se fait-il habituellement?
Je recommande d'utiliser les deux. Les lignes et les colonnes sont obligatoires et utiles si le client ne prend pas en charge CSS. Mais en tant que designer, je les écris pour obtenir exactement la taille souhaitée.
La méthode recommandée consiste à utiliser une feuille de style externe, par exemple.
textarea {
width: 300px;
height: 150px;
}<textarea> </textarea>En ensemble HTML
<textarea rows="10"></textarea>
En CSS set
textarea { height: auto; }
Cela déclenchera le navigateur pour définir la hauteur de la zone de texte EXACTEMENT à la quantité de lignes plus les rembourrages qui l’entourent. Définir la hauteur CSS sur un nombre exact de pixels laisse des espaces arbitraires.
Selon le w3c, les colonnes et les lignes sont des attributs obligatoires pour textareas. Les lignes et les colonnes sont le nombre de caractères qui vont tenir dans la zone de texte plutôt que des pixels ou une autre valeur potentiellement arbitraire. Allez avec les lignes/cols.
La réponse est oui". C'est-à-dire que vous devriez utiliser les deux. Sans lignes et colonnes (et il existe des valeurs par défaut même si vous ne les utilisez pas explicitement), la zone de texte est exceptionnellement petite si CSS est désactivé ou remplacé par une feuille de style de l'utilisateur. Gardez toujours à l'esprit les problèmes d'accessibilité. Cela étant dit, si votre feuille de style est autorisée à contrôler l'apparence de la zone de texte, vous obtiendrez généralement quelque chose de beaucoup plus élégant qui s'intégrera bien dans la conception générale de la page, et qui peut être redimensionné. suivre les entrées de l'utilisateur (dans les limites du bon goût, bien sûr).
La taille d'une zone de texte peut être spécifiée par les attributs cols et rows, voire mieux; via les propriétés CSS de hauteur et de largeur. L'attribut cols est pris en charge par tous les principaux navigateurs. Une différence principale est que <TEXTAREA ...> est une balise conteneur: elle a une balise de début ().
<textarea style="width:300px; height:150px;" ></textarea>
Pour la zone de texte, nous pouvons utiliser ci-dessous css pour corriger la taille
<textarea class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>
testé dans angularjs et angular7
si vous n'utilisez pas à chaque fois, utilisez line-height: '..'; property son contrôle la hauteur de la propriété textarea et width pour la largeur de textarea.
ou vous pouvez utiliser font-size en suivant css:
#sbr {
font-size: 16px;
line-height:1.4;
width:100%;
}
Je ne spécifie généralement pas height, mais spécifie width: ... et rows et cols.
Habituellement, dans mes cas, seules width et rows sont nécessaires pour que la zone de texte ait l’air agréable par rapport à d’autres élems. (Et cols est une solution de secours si quelqu'un n'utilise pas CSS, comme expliqué dans les autres réponses.)
((Spécifier à la fois rows et height ressemble un peu à la duplication de données, je pense?))
Une caractéristique majeure de textareas est qu’elles sont extensibles. Sur une page Web, des barres de défilement peuvent apparaître dans la zone de texte si la longueur du texte dépasse l'espace que vous avez défini (que vous utilisiez des lignes ou CSS). Cela peut être un problème lorsqu'un utilisateur décide d'imprimer, en particulier avec 'printing' to PDF - définissez donc une hauteur minimale confortable pour les zones de texte imprimées avec une règle CSS conditionnelle:
@media print {
textarea {
min-height: 900px;
}
}