Guías de Make it Real
  • Introduction
  • Preparación
    • Conceptos básicos
    • El editor de texto
    • La línea de comandos
    • Git y Github
  • Git
    • Instalación y configuración
    • Conceptos y comandos esenciales
    • Ignorando archivos y carpetas
    • Trabajando con ramas
    • Repositorios remotos
    • Etiquetas
    • Reescribiendo la historia
    • Stashing
    • Github
  • HTML y CSS
    • Introducción a HTML
    • Introducción a CSS
    • Más elementos de HTML
    • Tablas
    • Formularios
    • El modelo de caja en CSS
    • Fondos (backgrounds)
    • Posicionamiento
    • Selectores CSS
    • Bordes, sombras y gradientes
    • Media Queries
    • Unidades en CSS
    • Flexbox
  • Bootstrap 3
    • Primeros pasos
    • Elementos básicos de HTML
    • Componentes
    • La grilla
    • Personalizando Bootstrap
    • Utilizando plantillas
  • Bootstrap 4
    • Primeros pasos
    • Elementos básicos de HTML
    • Componentes
    • La grilla
    • Clases utilitarias
    • Personalizando Bootstrap
  • Ruby
    • Primeros pasos
    • Tipos y operadores
    • Variables y entrada de usuario
    • Condicionales
    • Ciclos
    • Arreglos
    • Más cadenas de texto
    • Hashes
    • Métodos
    • Manipulación de archivos
    • Gemas
  • Programación Orientada a Objetos en Ruby
    • Clases y objetos
    • Métodos y atributos de clase
    • Herencia
    • Módulos
    • Excepciones
  • JavaScript I
    • Primeros pasos
    • Tipos y operadores
    • Variables
    • Condicionales
    • Ciclos
    • Arreglos
    • Más cadenas de texto
    • Funciones
    • Objetos literales
    • Manipulación de archivos
  • JavaScript en el navegador
    • Primeros pasos
    • Manipulando HTML
    • Escuchando eventos
    • Local Storage
    • History API
    • Canvas
    • Notificaciones Web
    • Audio y Video
    • Arrastrar y soltar
    • JSON
    • Realizando peticiones HTTP
  • jQuery
    • Primeros pasos
    • Manipulando HTML
    • Escuchando eventos
    • Plugins
    • Realizando peticiones con AJAX
  • JavaScript II
    • Prototipos
    • Librerías (Node.js)
    • ES6
    • Uso de this (call, apply, bind)
    • Programación funcional
    • Scope, hoisting, closures
    • Programación asincrónica
    • Testing
  • HTTP y Sinatra
    • Primeros pasos con Sinatra
    • El protocolo HTTP
    • Rutas
    • Formularios
    • Cookies y sesión
  • Bases de datos
    • Bases de datos relacionales
    • SQL
    • DDL
    • MongoDB
  • Ruby on Rails I
    • Primeros pasos
    • Arquitectura
    • Rutas
    • Layouts y rendering
    • ActiveRecord - Modelos
    • ActiveRecord - Migraciones
    • ActiveRecord - Validaciones
    • ActiveRecord - Asociaciones
    • ActiveRecord - Scopes
    • ActiveRecord - Callbacks
    • Recursos REST
    • Formularios
    • Autenticación con Devise
    • Sass y Bootstrap
    • Envío de correos
    • Carga de imágenes
    • Seeds
    • Heroku
  • Ruby on Rails II
    • Usando JavaScript (y jQuery) en Rails
    • Testing en Ruby
    • Testing en Rails
    • Creando una Web API
    • Web Sockets
  • Express.js
    • Primeros Pasos
    • El protocolo HTTP
    • Rutas
    • Vistas
    • Middlewares y manejo de errores
    • Formularios
    • Cookies y sesión
  • Express.js II
    • Mongoose
    • Web Sockets
    • Autenticación
    • Envío de correos
    • Cargar imágenes
    • Deployment
    • Testing
    • Creando una Web API
  • React
    • Primeros pasos
    • JSX
    • Componentes
    • Más sobre estado
    • Formularios
    • Peticiones HTTP con Axios
    • React Hooks
    • React Context
    • React Bootstrap
    • React Router
    • Carga de Imágenes
    • Testing
    • Estructura de carpetas
    • Componentes de clase
  • Redux
    • Primeros pasos
    • Action creators
    • Usando la librería react-redux
    • Middlewares
    • Operaciones asincrónicas con redux-thunk
    • Combinando funciones reductoras
    • Testing
    • Redux Tool Kit
  • Algoritmos
    • Describiendo un algoritmo
    • Complejidad (Big-O)
    • Estructuras de datos
    • Recursión
    • Ordenamiento
    • Búsqueda
    • Programación dinámica
  • Python
    • Primeros Pasos
    • Tipos y Variables
    • Funciones
    • Control de Flujo
    • Listas
    • Ciclos
    • Diccionarios, Tuplas y Sets
  • NumPy
    • Primeros Pasos
    • Arreglos
    • Arreglos Multidimensionales
    • Estadística con NumPy
    • Distribución Estadística
  • Pandas
    • Primeros Pasos
    • Inspección y Selección de Datos
    • Modificando Dataframes
    • La Función Lambda
    • Aggregates en Pandas
    • Múltiples Tablas
Powered by GitBook
On this page
  • Formularios asociados a modelos
  • Campos de entrada
  • Formularios no asociados a modelos
  1. Ruby on Rails I

Formularios

Aunque es posible crear manualmente los formularios para crear y editar recursos, Rails trae unos métodos de ayuda que te van a permitir reutilizar y escribir menos código.

Formularios asociados a modelos

Para crear un formulario asociado a un modelo utiliza form_for. Por ejemplo, asumiendo que estamos creando el formulario para la siguiente acción new:

def new
  @product = Product.new
end

Podemos utilizar form_for para crear un formulario asociado al modelo @product en la vista:

<%= form_for @product do |f| %>
  Acá van los campos del formulario
<% end %>

Si @product es un nuevo registro se crea un formulario a la ruta POST /products.

Si @product ya está persistido en la base de datos se crea un formulario a la ruta PATCH /products/:id.

Eso quiere decir que podemos reutilizar el mismo código tanto para crear como para actualizar los registros.

Campos de entrada

Rails viene con unos métodos de ayuda para crear los campos del formulario. Aunque es posible crearlos manualmente con HTML, los métodos se encargan del nombramiento y asociar el campo al valor que está en el modelo.

<%= form_for @product do |f| %>
  <div>
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <%= f.submit %>
<% end %>

Los campos se crean utilizando la variable que se le pasó en el bloque del form_for, en este caso f.

label se utiliza para crear una etiqueta <label> asociada al campo.

text_field se utiliza para crear una etiqueta de tipo <input type="text">.

submit se utiliza para crear un botón de submit <input type="submit"> cuyo texto puede ser "Create Product" o "Update Product" dependiendo si el registro está ya creado o no.

Otros campos de entrada incluyen:

  • text_area - crea un área de texto:

      <%= f.text_area :description, rows: 20 %>
  • check_box crea una caja de selección:

      <%= f.check_box :paid %>
  • date_field

  • password_field

  • radio_button - crea un botón de radio:

      <%= f.radio_button :gender, "male" %>
      <%= f.radio_button :gender, "female" %>
      `
  • hidden_field - crea un campo oculto

  • email_field - crea un campo de email

  • url_field - crea un campo de URL

  • collection_select - crea una lista desplegable

      <%= f.collection_select(:city_id, City.all, :id, :name) %>

Formularios no asociados a modelos

En algunas ocasiones vas a querer crear formularios que no están asociados a ningún modelo. Por ejemplo, para crear un formulario de búsqueda.

Para eso existe el método de ayuda form_tag y los campos que terminan en _tag:

<%= form_tag("/search", method: "get") do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
  <%= submit_tag("Search") %>
<% end %>
PreviousRecursos RESTNextAutenticación con Devise

Last updated 2 years ago

Si quieres aprender más sobre formularios de búsqueda y cómo implementaros te recomendamos este post en el blog de Make it Real:

https://blog.makeitreal.camp/formularios-de-busqueda-en-rails/