Formularios

Search…
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:
1
<form action="/hello" method="post">
2
  <label for="name"><input type="text" id="name" name="name">
3
  <button type="submit">Enviar</button>
4
</form>
Copied!
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!).
Definiendo la ruta
La ruta se debería definir de la siguiente forma (si el method es post):
1
post '/hello' do
2
​
3
end
Copied!
La información de cada campo viene en el hash params:
1
post '/hello' do
2
  "Hola #{params[:name]}"
3
end
Copied!
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:
1
<input type="password" name="password">
Copied!
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:
1
<textarea name="message" rows="10">Acá va el texto inicial</textarea>
Copied!
Una lista desplegable
1
<select name="cars">
2
  <option value="volvo">Volvo</option>
3
  <option value="saab">Saab</option>
4
  <option value="fiat">Fiat</option>
5
  <option value="audi">Audi</option>
6
</select>
Copied!
Un botón de radio
1
<input type="radio" name="gender" value="male" checked> Male<br>
2
<input type="radio" name="gender" value="female"> Female<br>
3
<input type="radio" name="gender" value="other"> Other
Copied!
En este caso se envía al servidor el value de la opción seleccionada.
Un campo de selección (checkbox)
1
<input type="checkbox" name="terms" value="accep"> Acepto los términos y condiciones
Copied!
Rutas
Cookies y sesión
Last modified 4yr ago
Copy link
Contents
Definiendo la ruta
Otros campos de entrada
Un campo de contraseña
Un área de texto
Una lista desplegable
Un botón de radio
Un campo de selección (checkbox)