Tutorial de entrada de múltiples líneas en HTML

Introducción

La etiqueta HTML <textarea> permite a los usuarios ingresar y enviar texto libre dentro de un formulario. En este laboratorio, crearemos un formulario HTML simple con una entrada <textarea> y aplicaremos algunos atributos comúnmente utilizados.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 92%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Crea un esqueleto HTML

Crea un archivo HTML vacío llamado index.html y escribe el código básico del boilerplate de HTML5.

<!doctype html>
<html>
  <head>
    <title>Tutorial de la etiqueta HTML Textarea</title>
  </head>
  <body>
    <!-- Tu código HTML aquí -->
  </body>
</html>

Agrega un elemento de formulario

Agrega un elemento <form> al cuerpo HTML. Utilizaremos este formulario para recopilar información del usuario.

<form>
  <!-- Los elementos del formulario van aquí -->
</form>

Agrega una entrada de área de texto

Agrega un elemento <textarea> dentro del elemento <form>. Puedes personalizar el tamaño del área de texto estableciendo los atributos rows y cols.

<form>
  <label for="feedback">Ingrese sus comentarios:</label>
  <textarea id="feedback" name="feedback" rows="10" cols="50"></textarea>
</form>

Aquí, hemos agregado una etiqueta para describir el campo de entrada (comentarios), y una entrada <textarea> con un atributo id de "feedback". El atributo name se utiliza para identificar el campo de entrada en el lado del servidor.

Agrega otros atributos de formulario

Podemos agregar otros atributos HTML a nuestros elementos de formulario y entrada. Por ejemplo, podemos agregar un atributo required para asegurarnos de que el usuario ingrese algún texto.

<form>
  <label for="feedback">Ingrese sus comentarios:</label>
  <textarea
    id="feedback"
    name="feedback"
    rows="10"
    cols="50"
    required
  ></textarea>
  <input type="submit" value="Enviar comentarios" />
</form>

Aquí, hemos agregado un elemento input de tipo submit para permitir que el usuario envíe sus comentarios. Ahora el usuario no puede enviar un formulario en blanco ya que se ha agregado el atributo required al textarea.

Personalización adicional con CSS

Finalmente, puedes aplicar algunos estilos CSS a los elementos de formulario y entrada para que el formulario sea más atractivo visualmente.

<style>
  form {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 20px auto;
    max-width: 500px;
  }

  label,
  textarea,
  input[type="submit"] {
    display: block;
    margin-bottom: 10px;
    width: 100%;
  }
</style>

Aquí, hemos establecido un borde, agregado relleno y márgenes, y limitado el ancho máximo del formulario. También hemos ajustado la visualización y el ancho de los elementos de etiqueta, área de texto y entrada de envío.

Resumen

En este laboratorio, hemos aprendido cómo crear un formulario HTML básico con una entrada <textarea> y aplicar atributos comúnmente utilizados. También hemos aplicado algunos estilos CSS para personalizar la apariencia de los elementos del formulario. Puedes personalizar aún más el formulario y los elementos de entrada según tus necesidades.

Entrada de múltiples líneas en HTML