Cada vez que desarrollo un nuevo formulario que incluye un textarea, tengo el siguiente dilema cuando necesito especificar sus dimensiones:

Use CSS o use los textareaatributos de colsy rows?

¿Cuáles son los pros y los contras de cada método?

¿Cuáles son las semánticas del uso de estos atributos?

¿Cómo se hace generalmente?

Recomiendo usar ambos. Las filas y los cols son obligatorios y útiles si el cliente no admite CSS. Pero como diseñador los sobrescribo para obtener exactamente el tamaño que deseo.

La forma recomendada de hacerlo es a través de una hoja de estilo externa, por ejemplo

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

<textarea> </textarea>

textarea { height: auto; }

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

Esto hará que el navegador establezca la altura del área de texto EXACTAMENTE en la cantidad de filas más los rellenos a su alrededor. Establecer la altura CSS en una cantidad exacta de píxeles deja espacios en blanco arbitrarios.

Según el w3c, las columnas y las filas son atributos obligatorios para las áreas de texto. Las filas y las columnas son el número de caracteres que caben en el área de texto en lugar de píxeles o algún otro valor potencialmente arbitrario. Ir con las filas / cols.

La respuesta es sí". Es decir, debes usar ambos. Sin filas y columnas (y hay valores predeterminados incluso si no los usa explícitamente), el área de texto es inutilizable si CSS está deshabilitado o anulado por una hoja de estilo de usuario. Siempre tenga en cuenta las preocupaciones de accesibilidad. Dicho esto, si su hoja de estilo puede controlar la apariencia del área de texto, generalmente terminará con algo que se ve mucho mejor, encaja bien en el diseño general de la página y que puede cambiar el tamaño para mantenerse al día con la entrada del usuario ( dentro de los límites del buen gusto, por supuesto).

Para el área de texto podemos usar debajo de CSS para arreglar el tamaño

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

Probado en angularjs y angular7

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

El tamaño de un área de texto puede especificarse mediante los atributos de columnas y filas, o incluso mejor; a través de las propiedades de alto y ancho de CSS. El atributo cols es compatible con todos los principales navegadores. Una diferencia principal es que <TEXTAREA ...>es una etiqueta de contenedor: tiene una etiqueta de inicio ().

Usualmente no especifico height, pero sí especifico width: ...y rowsy cols.

Por lo general, en mis casos, solo widthy rowsson necesarios, para que el área de texto se vea bien en relación con otros elementos. (Y colses una alternativa si alguien no usa CSS, como se explica en las otras respuestas).

((¿Especifica ambas cosas rowsy se heightsiente un poco como duplicar datos, creo?))

Una característica importante de las áreas de texto es que son expandibles. En una página web, esto puede dar lugar a que aparezcan barras de desplazamiento en el área de texto si la longitud del texto sobrepasa el espacio establecido (ya sea usando filas o usando CSS. Eso puede ser un problema cuando un usuario decide imprimir, particularmente con 'imprimir' a PDF: establezca una altura mínima cómodamente grande para las áreas de texto impresas con una regla de CSS condicional:

@media print { 
textarea {
min-height: 900px;  
}
}

si no usa cada vez use line-height: '..'; propiedad su control de la altura de textarea y ancho de propiedad para el ancho de textarea.

o puede utilizar el tamaño de fuente siguiendo css:

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

¡Las filas y columnas HTML no responden!

Entonces defino el tamaño en CSS. Como consejo: si define un tamaño pequeño para móviles, piense en usartextarea:focus {};

Agregue un poco de espacio extra aquí, que solo se desplegará en el momento en que un usuario quiera escribir algo

CSS

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

HTML

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