24 - form : control textarea
El control textarea es utilizado cuando tenemos que introducir varias líneas de texto y cuando utilizamos Bootstrap 5 tenemos que agregar la clase form-control, igual que los otros controles de formulario.
Podemos inicializar la propiedad rows del control HTML textarea indicando cuantas filas deben ser visibles.
Veamos un ejemplo utilizando este control HTML asociado con Bootstrap 5:
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form>
<div class="mb-3">
<label for="comentarios" class="form-label">Deje aquí sus comentarios</label>
<textarea class="form-control" rows="5" id="comentarios" name="comentarios"></textarea>
</div>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div>
</body>
</html>
Luego en pantalla aparece de la siguiente forma cuando está seleccionado:
No tiene efecto si inicializamos la propiedad cols en la marca textarea. Veremos luego como resolver esta situación mediante grillas.