Chaque fois que je développe un nouveau formulaire qui comprend un textareaj'ai le dilemme suivant quand j'ai besoin de préciser ses dimensions:

Utilisez CSS ou utilisez les textareaattributs de colset 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 écrase pour obtenir exactement la taille que je souhaite.

La façon recommandée de le faire est via une feuille de style externe, par exemple

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

textarea { height: auto; }

<textarea rows="10"></textarea>

Cela déclenchera le navigateur pour définir la hauteur de la zone de texte EXACTEMENT au nombre de lignes plus les rembourrages qui l'entourent. La définition de la hauteur CSS sur une quantité exacte de pixels laisse des espaces blancs arbitraires.

Selon le w3c, les cols et les lignes sont tous deux des attributs obligatoires pour les zones de texte. 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". Autrement dit, vous devez 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 anormalement petite si CSS est désactivé ou remplacé par une feuille de style 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 vous retrouverez généralement avec quelque chose qui ressemble beaucoup mieux, s'intègre bien dans la conception globale de la page et qui peut être redimensionné pour suivre les entrées de l'utilisateur ( dans les limites du bon goût, bien sûr).

Pour la zone de texte, nous pouvons utiliser ci-dessous CSS pour fixer la taille

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

Testé en angularjs et angular7

 <textarea style="width:300px; height:150px;" ></textarea>

La taille d'une zone de texte peut être spécifiée par les attributs cols et row, ou mieux encore; à travers les propriétés de hauteur et de largeur de CSS. L'attribut cols est pris en charge dans tous les principaux navigateurs. Une différence principale est qu'il <TEXTAREA ...>s'agit d'une balise conteneur: elle a une balise de début ().

Je ne précise généralement pas height, mais spécifiez width: ...et rowset cols.

Habituellement, dans mes cas, seulement widthet rowssont nécessaires, pour que la zone de texte soit belle par rapport aux autres elems. (Et colsc'est une solution de rechange si quelqu'un n'utilise pas CSS, comme expliqué dans les autres réponses.)

((Spécifier les deux rowset heightressemble un peu à la duplication de données, je pense?))

Une caractéristique majeure des zones de texte est qu'elles sont extensibles. Sur une page Web, cela peut entraîner l'apparition de barres de défilement dans la zone de texte si la longueur du texte dépasse l'espace que vous définissez (que ce soit à l'aide de lignes ou à l'aide de CSS. Cela peut être un problème lorsqu'un utilisateur décide d'imprimer, en particulier avec 'impression' au format 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;  
}
}

si vous n'utilisez pas à chaque fois utilisez line-height: '..'; sa propriété contrôle la hauteur de la zone de texte et la propriété width pour la largeur de la zone de texte.

ou vous pouvez utiliser la taille de police en suivant css:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

Les lignes et les colonnes HTML ne répondent pas!

Je définis donc la taille en CSS. Un conseil: si vous définissez une petite taille pour les mobiles pensez à utilisertextarea:focus {};

Ajoutez de l'espace supplémentaire ici, qui ne se déploiera qu'au moment où un utilisateur souhaite réellement écrire quelque chose

CSS

input
{
    width: 300px;
    height: 40px;
} 

HTML

<textarea rows="4" cols="50">HELLO</textarea>