Saltar al contenido principal

Formularios

Los formularios nos permiten pedirle información a los usuarios. Por ejemplo, puedes crear un formulario que pida el nombre del usuario y envíe esa información a POST /hello:

<form action="/hello" method="post">
  <label for="name"><input type="text" id="name" name="name">
  <button type="submit">Enviar</button>
</form>
  • El atributo method de la etiqueta <form> puede ser get o post.
  • El atributo action de la etiqueta <form> define el path o el URL a donde se quiere enviar la información del formulario.
  • <label> se utiliza para mostrar una etiqueta para el campo de entrada. El atributo for debe tener el id del campo al que se quiere relacionar.
  • El atributo name del campo de entrada (en este caso el campo de texto) define la llave que se va a utilizar para enviar al servidor.
  • El botón se utiliza para enviar el formulario (el type="submit" es importante!).

Configurando el middleware​

Por defecto, req.body es undefined. Para leer el cuerpo con los campos necesitas configurar express.urlencoded:

app.use(express.urlencoded());

Leyendo los parámetros​

Para leer los parámetros del formulario utiliza el objeto req.body. Por ejemplo, para obtener la información del campo name utilizarías req.body.name:

app.post('/hello', (req, res) => {
  res.render("Hola " + req.body.name);
});

Otros campos de entrada​

Además de los campos de texto existen otro elementos que nos permiten capturar información del usuario.

Recuerda que el atributo id se utiliza para identificar el elemento en el documento y name para definir la llave con la que se va a enviar al servidor.

Un campo de contraseña​

Es parecido a un campo de texto pero no muestra los caracteres:

<input type="password" name="password">

En HTML5 ahora existen muchos más tipos de campos como email, url, number y date, entre otros.

Un área de texto​

Un área de texto es como un campo de texto pero de varias líneas:

<textarea name="message" rows="10">Acá va el texto inicial</textarea>

Una lista desplegable​

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Un botón de radio​

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

En este caso se envía al servidor el value de la opción seleccionada.

Un campo de selección (checkbox)​

<input type="checkbox" name="terms" value="accep"> Acepto los términos y condiciones