-
Notifications
You must be signed in to change notification settings - Fork 0
/
form_helpers.html
1790 lines (1737 loc) · 192 KB
/
form_helpers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ayudantes de Formularios de Action View — Ruby on Rails Guides</title>
<link rel="stylesheet" type="text/css" href="stylesheets/style-v2.css" data-turbo-track="reload">
<link rel="stylesheet" type="text/css" href="stylesheets/print-v2.css" media="print">
<link rel="stylesheet" type="text/css" href="stylesheets/highlight-v2.css" data-turbo-track="reload">
<link rel="icon" href="images/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="images/icon.png">
<script src="javascripts/@hotwired--turbo.js" data-turbo-track="reload"></script>
<script src="javascripts/clipboard.js" data-turbo-track="reload"></script>
<script src="javascripts/guides.js" data-turbo-track="reload"></script>
<meta property="og:title" content="Ayudantes de Formularios de Action View — Ruby on Rails Guides" />
<meta name="description" content="NO LEA ESTE ARCHIVO EN GITHUB, LAS GUÍAS ESTÁN PUBLICADAS EN https://guides.rubyonrails.org.Ayudantes de Formularios de Action ViewLos formularios son una interfaz común para la entrada de usuario en aplicaciones web. Sin embargo, el marcado de formularios puede ser tedioso de escribir y mantener debido a la necesidad de manejar controles de formulario, nombres y atributos. Rails simplifica esto proporcionando ayudantes de vista, que son métodos que generan marcado HTML para formularios. Esta guía te ayudará a entender los diferentes métodos de ayudantes y cuándo usar cada uno.Después de leer esta guía, sabrás: Cómo crear formularios básicos, como un formulario de búsqueda. Cómo trabajar con formularios basados en modelos para crear y editar registros específicos de la base de datos. Cómo generar cuadros de selección a partir de múltiples tipos de datos. Qué ayudantes de fecha y hora proporciona Rails. Qué hace que un formulario de carga de archivos sea diferente. Cómo enviar formularios a recursos externos y especificar el ajuste de un authenticity_token. Cómo construir formularios complejos." />
<meta property="og:description" content="NO LEA ESTE ARCHIVO EN GITHUB, LAS GUÍAS ESTÁN PUBLICADAS EN https://guides.rubyonrails.org.Ayudantes de Formularios de Action ViewLos formularios son una interfaz común para la entrada de usuario en aplicaciones web. Sin embargo, el marcado de formularios puede ser tedioso de escribir y mantener debido a la necesidad de manejar controles de formulario, nombres y atributos. Rails simplifica esto proporcionando ayudantes de vista, que son métodos que generan marcado HTML para formularios. Esta guía te ayudará a entender los diferentes métodos de ayudantes y cuándo usar cada uno.Después de leer esta guía, sabrás: Cómo crear formularios básicos, como un formulario de búsqueda. Cómo trabajar con formularios basados en modelos para crear y editar registros específicos de la base de datos. Cómo generar cuadros de selección a partir de múltiples tipos de datos. Qué ayudantes de fecha y hora proporciona Rails. Qué hace que un formulario de carga de archivos sea diferente. Cómo enviar formularios a recursos externos y especificar el ajuste de un authenticity_token. Cómo construir formularios complejos." />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="Ruby on Rails Guides" />
<meta property="og:image" content="https://avatars.githubusercontent.com/u/4223" />
<meta property="og:type" content="website" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:[email protected]&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Heebo:[email protected]&family=Noto+Sans+Arabic:[email protected]&display=swap" rel="stylesheet">
<meta name="theme-color" content="#C81418">
</head>
<body class="guide">
<nav id="topNav" aria-label="Secondary">
<div class="wrapper">
<strong class="more-info-label">Más en <a href="https://rubyonrails.org/">rubyonrails.org:</a> </strong>
<span class="red-button more-info-button">
Más Ruby on Rails
</span>
<ul class="more-info-links s-hidden">
<li class="more-info"><a href="https://rubyonrails.org/blog">Blog</a></li>
<li class="more-info"><a href="https://guides.rubyonrails.org/">Guías</a></li>
<li class="more-info"><a href="https://api.rubyonrails.org/">API</a></li>
<li class="more-info"><a href="https://discuss.rubyonrails.org/">Foro</a></li>
<li class="more-info"><a href="https://github.com/rails/rails">Contribuir en GitHub</a></li>
</ul>
</div>
</nav>
<header id="page_header">
<div class="wrapper clearfix">
<nav id="feature_nav">
<div class="header-logo">
<a href="index.html" title="Regresar a la página principal de Guías para Edge">Guías</a>
<span id="version_switcher">
Versión:
<select class="guides-version">
<option value="https://edgeguides.rubyonrails.org/" selected>Edge</option>
<option value="https://guides.rubyonrails.org/v7.2/">7.2</option>
<option value="https://guides.rubyonrails.org/v7.1/">7.1</option>
<option value="https://guides.rubyonrails.org/v7.0/">7.0</option>
<option value="https://guides.rubyonrails.org/v6.1/">6.1</option>
<option value="https://guides.rubyonrails.org/v6.0/">6.0</option>
<option value="https://guides.rubyonrails.org/v5.2/">5.2</option>
<option value="https://guides.rubyonrails.org/v5.1/">5.1</option>
<option value="https://guides.rubyonrails.org/v5.0/">5.0</option>
<option value="https://guides.rubyonrails.org/v4.2/">4.2</option>
<option value="https://guides.rubyonrails.org/v4.1/">4.1</option>
<option value="https://guides.rubyonrails.org/v4.0/">4.0</option>
<option value="https://guides.rubyonrails.org/v3.2/">3.2</option>
<option value="https://guides.rubyonrails.org/v3.1/">3.1</option>
<option value="https://guides.rubyonrails.org/v3.0/">3.0</option>
<option value="https://guides.rubyonrails.org/v2.3/">2.3</option>
</select>
</span>
</div>
<ul class="nav">
<li><a class="nav-item" id="home_nav" href="https://rubyonrails.org/">Inicio</a></li>
<li class="guides-index guides-index-large">
<a href="index.html" id="guidesMenu" class="guides-index-item nav-item">Índice de Guías</a>
<div id="guides" class="clearfix" style="display: none;">
<hr />
<dl class="guides-section-container">
<div class="guides-section">
<dt>Comienza Aquí</dt>
<dd><a href="getting_started.html">Primeros Pasos con Rails</a></dd>
</div>
<div class="guides-section">
<dt>Modelos</dt>
<dd><a href="active_record_basics.html">Conceptos Básicos de Active Record</a></dd>
<dd><a href="active_record_migrations.html">Migraciones de Active Record</a></dd>
<dd><a href="active_record_validations.html">Validaciones de Active Record</a></dd>
</div>
<div class="guides-section">
<dt>Vistas</dt>
<dd><a href="action_view_overview.html">Resumen de Action View</a></dd>
<dd><a href="layouts_and_rendering.html">Diseños y Renderizado en Rails</a></dd>
</div>
<div class="guides-section">
<dt>Controladores</dt>
<dd><a href="action_controller_overview.html">Resumen de Action Controller</a></dd>
<dd><a href="routing.html">Enrutamiento en Rails desde el Exterior</a></dd>
</div>
<div class="guides-section">
<dt>Otros Componentes</dt>
<dd><a href="active_support_core_extensions.html">Extensiones Básicas de Active Support</a></dd>
<dd><a href="action_mailer_basics.html">Conceptos Básicos de Action Mailer</a></dd>
<dd><a href="action_mailbox_basics.html">Conceptos Básicos de Action Mailbox</a></dd>
<dd><a href="action_text_overview.html">Resumen de Action Text</a></dd>
<dd><a href="active_job_basics.html">Conceptos Básicos de Active Job</a></dd>
</div>
<div class="guides-section">
<dt>Políticas</dt>
<dd><a href="maintenance_policy.html">Política de Mantenimiento</a></dd>
</div>
<div class="guides-section">
<dt>Notas de Lanzamiento</dt>
<dd><a href="upgrading_ruby_on_rails.html">Actualizando Ruby on Rails</a></dd>
<dd><a href="7_2_release_notes.html">Versión 7.2 - ?</a></dd>
<dd><a href="7_1_release_notes.html">Versión 7.1 - Octubre 2023</a></dd>
<dd><a href="7_0_release_notes.html">Versión 7.0 - Diciembre 2021</a></dd>
<dd><a href="6_1_release_notes.html">Versión 6.1 - Diciembre 2020</a></dd>
</div>
</dl>
</div>
</li>
<li><a class="nav-item" href="contributing_to_ruby_on_rails.html">Contribuir</a></li>
<li class="guides-index guides-index-small">
<select class="guides-index-item nav-item">
<option value="index.html">Índice de Guías</option>
<optgroup label="Comienza Aquí">
<option value="getting_started.html">Primeros Pasos con Rails</option>
</optgroup>
<optgroup label="Modelos">
<option value="active_record_basics.html">Conceptos Básicos de Active Record</option>
<option value="active_record_migrations.html">Migraciones de Active Record</option>
<option value="active_record_validations.html">Validaciones de Active Record</option>
</optgroup>
<optgroup label="Vistas">
<option value="action_view_overview.html">Resumen de Action View</option>
<option value="layouts_and_rendering.html">Diseños y Renderizado en Rails</option>
</optgroup>
<optgroup label="Controladores">
<option value="action_controller_overview.html">Resumen de Action Controller</option>
<option value="routing.html">Enrutamiento en Rails desde el Exterior</option>
</optgroup>
<optgroup label="Otros Componentes">
<option value="active_support_core_extensions.html">Extensiones Básicas de Active Support</option>
<option value="action_mailer_basics.html">Conceptos Básicos de Action Mailer</option>
<option value="action_mailbox_basics.html">Conceptos Básicos de Action Mailbox</option>
<option value="action_text_overview.html">Resumen de Action Text</option>
<option value="active_job_basics.html">Conceptos Básicos de Active Job</option>
</optgroup>
<optgroup label="Políticas">
<option value="maintenance_policy.html">Política de Mantenimiento</option>
</optgroup>
<optgroup label="Notas de Lanzamiento">
<option value="upgrading_ruby_on_rails.html">Actualizando Ruby on Rails</option>
<option value="7_2_release_notes.html">Versión 7.2 - ?</option>
<option value="7_1_release_notes.html">Versión 7.1 - Octubre 2023</option>
<option value="7_0_release_notes.html">Versión 7.0 - Diciembre 2021</option>
<option value="6_1_release_notes.html">Versión 6.1 - Diciembre 2020</option>
</optgroup>
</select>
</li>
</ul>
</nav>
</div>
</header>
<hr class="hide" />
<section id="feature">
<div class="wrapper">
<p><strong>NO LEA ESTE ARCHIVO EN GITHUB, LAS GUÍAS ESTÁN PUBLICADAS EN <a href="https://guides.rubyonrails.org">https://guides.rubyonrails.org</a>.</strong></p><h1>Ayudantes de Formularios de Action View</h1><p>Los formularios son una interfaz común para la entrada de usuario en aplicaciones web. Sin embargo, el marcado de formularios puede ser tedioso de escribir y mantener debido a la necesidad de manejar controles de formulario, nombres y atributos. Rails simplifica esto proporcionando ayudantes de vista, que son métodos que generan marcado HTML para formularios. Esta guía te ayudará a entender los diferentes métodos de ayudantes y cuándo usar cada uno.</p><p>Después de leer esta guía, sabrás:</p>
<ul>
<li>Cómo crear formularios básicos, como un formulario de búsqueda.</li>
<li>Cómo trabajar con formularios basados en modelos para crear y editar registros específicos de la base de datos.</li>
<li>Cómo generar cuadros de selección a partir de múltiples tipos de datos.</li>
<li>Qué ayudantes de fecha y hora proporciona Rails.</li>
<li>Qué hace que un formulario de carga de archivos sea diferente.</li>
<li>Cómo enviar formularios a recursos externos y especificar el ajuste de un <code>authenticity_token</code>.</li>
<li>Cómo construir formularios complejos.</li>
</ul>
<nav id="subCol">
<h3 class="chapter">
<picture>
<!-- Using the `source` HTML tag to set the dark theme image -->
<source
srcset="images/icon_book-close-bookmark-1-wht.svg"
media="(prefers-color-scheme: dark)"
/>
<img src="images/icon_book-close-bookmark-1.svg" alt="Chapter Icon" />
</picture>
Chapters
</h3>
<ol class="chapters">
<li><a href="#trabajando-con-formularios-básicos">Trabajando con Formularios Básicos</a>
<ul>
<li><a href="#un-formulario-de-búsqueda-genérico">Un Formulario de Búsqueda Genérico</a></li>
<li><a href="#ayudantes-para-generar-elementos-de-formulario">Ayudantes para Generar Elementos de Formulario</a></li>
<li><a href="#otros-ayudantes-de-interés">Otros Ayudantes de Interés</a></li>
</ul></li>
<li><a href="#creando-formularios-con-objetos-de-modelo">Creando Formularios con Objetos de Modelo</a>
<ul>
<li><a href="#vinculando-un-formulario-a-un-objeto">Vinculando un Formulario a un Objeto</a></li>
<li><a href="#confiando-en-la-identificación-de-registros">Confiando en la Identificación de Registros</a></li>
<li><a href="#trabajando-con-espacios-de-nombres">Trabajando con Espacios de Nombres</a></li>
<li><a href="#formularios-con-métodos-patch-put-o-delete">Formularios con Métodos PATCH, PUT, o DELETE</a></li>
</ul></li>
<li><a href="#creando-cuadros-de-selección-con-facilidad">Creando Cuadros de Selección con Facilidad</a>
<ul>
<li><a href="#grupos-de-opciones-para-cuadros-de-selección">Grupos de Opciones para Cuadros de Selección</a></li>
<li><a href="#vinculando-cuadros-de-selección-a-objetos-de-modelo">Vinculando Cuadros de Selección a Objetos de Modelo</a></li>
</ul></li>
<li><a href="#usando-ayudantes-de-formulario-de-fecha-y-hora">Usando Ayudantes de Formulario de Fecha y Hora</a>
<ul>
<li><a href="#cuadros-de-selección-para-componentes-de-fecha-o-hora">Cuadros de Selección para Componentes de Fecha o Hora</a></li>
<li><a href="#selección-de-zona-horaria">Selección de Zona Horaria</a></li>
</ul></li>
<li><a href="#ayudantes-relacionados-con-colecciones">Ayudantes Relacionados con Colecciones</a>
<ul>
<li><a href="#el-ayudante-collection-select">El Ayudante <code>collection_select</code></a></li>
<li><a href="#el-ayudante-collection-radio-buttons">El Ayudante <code>collection_radio_buttons</code></a></li>
<li><a href="#el-ayudante-collection-check-boxes">El Ayudante <code>collection_check_boxes</code></a></li>
</ul></li>
<li><a href="#subiendo-archivos">Subiendo Archivos</a>
<ul>
<li><a href="#ejemplo-de-carga-de-archivo-csv">Ejemplo de Carga de Archivo CSV</a></li>
</ul></li>
<li><a href="#personalizando-constructores-de-formularios">Personalizando Constructores de Formularios</a></li>
<li><a href="#convenciones-de-nombres-de-entrada-de-formularios-y-hash-params">Convenciones de Nombres de Entrada de Formularios y Hash <code>params</code></a>
<ul>
<li><a href="#estructura-básica">Estructura Básica</a></li>
<li><a href="#combinando-arrays-y-hashes">Combinando Arrays y Hashes</a></li>
<li><a href="#hashes-con-un-índice">Hashes con un Índice</a></li>
</ul></li>
<li><a href="#construyendo-formularios-complejos">Construyendo Formularios Complejos</a>
<ul>
<li><a href="#configurando-el-modelo-para-atributos-anidados">Configurando el Modelo para Atributos Anidados</a></li>
<li><a href="#formularios-anidados-en-la-vista">Formularios Anidados en la Vista</a></li>
<li><a href="#permitiendo-parámetros-en-el-controlador">Permitiendo Parámetros en el Controlador</a></li>
<li><a href="#eliminando-objetos-asociados">Eliminando Objetos Asociados</a></li>
<li><a href="#previniendo-registros-vacíos">Previniendo Registros Vacíos</a></li>
</ul></li>
<li><a href="#formularios-para-recursos-externos">Formularios para Recursos Externos</a></li>
<li><a href="#usando-ayudantes-de-etiqueta-sin-un-form-builder">Usando Ayudantes de Etiqueta sin un Form Builder</a></li>
<li><a href="#usando-form-tag-y-form-for">Usando <code>form_tag</code> y <code>form_for</code></a></li>
</ol>
</nav>
<hr>
</div>
</section>
<main id="container">
<div class="wrapper">
<div id="mainCol">
<p>Esta guía no está destinada a ser una lista completa de todos los ayudantes de formulario disponibles. Por favor, consulta <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers.html">la documentación de la API de Rails</a> para una lista exhaustiva de ayudantes de formulario y sus argumentos.</p><h2 id="trabajando-con-formularios-básicos"><a class="anchorlink" href="#trabajando-con-formularios-básicos"><span>1</span> Trabajando con Formularios Básicos</a></h2><p>El principal ayudante de formulario es <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with"><code>form_with</code></a>.</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
Contenido del formulario
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with do |form| %>
Contenido del formulario
<% end %>
">Copy</button>
</div>
<p>Cuando se llama sin argumentos, crea una etiqueta HTML <code><form></code> con el valor del atributo <code>method</code> establecido en <code>post</code> y el valor del atributo <code>action</code> establecido en la página actual. Por ejemplo, suponiendo que la página actual es una página de inicio en <code>/home</code>, el HTML generado se verá así:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/home"</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="na">method=</span><span class="s">"post"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"authenticity_token"</span> <span class="na">value=</span><span class="s">"Lz6ILqUEs2CGdDa-oz38TqcqQORavGnbGkG0CQA8zc8peOps-K7sHgFSTPSkBx89pQxh3p5zPIkjoOTiA_UWbQ"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
Contenido del formulario
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form action="/home" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="Lz6ILqUEs2CGdDa-oz38TqcqQORavGnbGkG0CQA8zc8peOps-K7sHgFSTPSkBx89pQxh3p5zPIkjoOTiA_UWbQ" autocomplete="off">
Contenido del formulario
</form>
">Copy</button>
</div>
<p>Observa que el formulario contiene un elemento <code>input</code> con tipo <code>hidden</code>. Este input oculto <code>authenticity_token</code> es requerido para envíos de formularios no GET. Este token es una función de seguridad en Rails utilizada para prevenir ataques de falsificación de solicitudes entre sitios (CSRF), y los ayudantes de formulario lo generan automáticamente para cada formulario no GET (suponiendo que la función de seguridad esté habilitada). Puedes leer más sobre esto en la guía <a href="security.html#cross-site-request-forgery-csrf">Asegurando Aplicaciones Rails</a>.</p><h3 id="un-formulario-de-búsqueda-genérico"><a class="anchorlink" href="#un-formulario-de-búsqueda-genérico"><span>1.1</span> Un Formulario de Búsqueda Genérico</a></h3><p>Uno de los formularios más básicos en la web es un formulario de búsqueda. Este formulario contiene:</p>
<ul>
<li>un elemento de formulario con método "GET",</li>
<li>una etiqueta para la entrada,</li>
<li>un elemento de entrada de texto, y</li>
<li>un elemento de envío.</li>
</ul>
<p>Aquí se muestra cómo crear un formulario de búsqueda con <code>form_with</code>:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">url: </span><span class="s2">"/search"</span><span class="p">,</span> <span class="ss">method: :get</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:query</span><span class="p">,</span> <span class="s2">"Buscar:"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">text_field</span> <span class="ss">:query</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">submit</span> <span class="s2">"Buscar"</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with url: "/search", method: :get do |form| %>
<%= form.label :query, "Buscar:" %>
<%= form.text_field :query %>
<%= form.submit "Buscar" %>
<% end %>
">Copy</button>
</div>
<p>Esto generará el siguiente HTML:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/search"</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="na">method=</span><span class="s">"get"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"query"</span><span class="nt">></span>Buscar:<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"query"</span> <span class="na">id=</span><span class="s">"query"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">name=</span><span class="s">"commit"</span> <span class="na">value=</span><span class="s">"Buscar"</span> <span class="na">data-disable-with=</span><span class="s">"Buscar"</span><span class="nt">></span>
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form action="/search" accept-charset="UTF-8" method="get">
<label for="query">Buscar:</label>
<input type="text" name="query" id="query">
<input type="submit" name="commit" value="Buscar" data-disable-with="Buscar">
</form>
">Copy</button>
</div>
<p>Observa que para el formulario de búsqueda estamos usando la opción <code>url</code> de <code>form_with</code>. Establecer <code>url: "/search"</code> cambia el valor de acción del formulario del valor por defecto de la ruta de la página actual a <code>action="/search"</code>.</p><p>En general, pasar <code>url: my_path</code> a <code>form_with</code> le dice al formulario dónde hacer la solicitud. La otra opción es pasar objetos de modelo Active Model al formulario, como aprenderás <a href="#creating-forms-with-model-objects">a continuación</a>. También puedes usar <a href="routing.html#path-and-url-helpers">ayudantes de URL</a>.</p><p>El ejemplo de formulario de búsqueda anterior también muestra el objeto <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html">form builder</a>. Aprenderás sobre los muchos ayudantes proporcionados por el objeto form builder (como <code>form.label</code> y <code>form.text_field</code>) en la siguiente sección.</p><p>CONSEJO: Para cada elemento de <code>input</code> de formulario, se genera un atributo <code>id</code> a partir de su nombre (<code>"query"</code> en el ejemplo anterior). Estos IDs pueden ser muy útiles para el estilo CSS o la manipulación de controles de formulario con JavaScript.</p><p>IMPORTANTE: Usa "GET" como el método para formularios de búsqueda. En general, las convenciones de Rails fomentan el uso del verbo HTTP correcto para las acciones del controlador. Usar "GET" para la búsqueda permite a los usuarios marcar una búsqueda específica.</p><h3 id="ayudantes-para-generar-elementos-de-formulario"><a class="anchorlink" href="#ayudantes-para-generar-elementos-de-formulario"><span>1.2</span> Ayudantes para Generar Elementos de Formulario</a></h3><p>El objeto form builder producido por <code>form_with</code> proporciona muchos métodos de ayuda para generar elementos de formulario comunes como campos de texto, casillas de verificación y botones de opción.</p><p>El primer argumento de estos métodos es siempre el nombre de la entrada. Esto es útil recordar porque cuando se envía el formulario, ese nombre se pasará al controlador junto con los datos del formulario en el hash <code>params</code>. El nombre será la clave en los <code>params</code> para el valor ingresado por el usuario para ese campo.</p><p>Por ejemplo, si el formulario contiene <code><%= form.text_field :query %></code>, entonces podrías obtener el valor de este campo en el controlador con <code>params[:query]</code>.</p><p>Al nombrar las entradas, Rails utiliza ciertas convenciones que hacen posible enviar parámetros con valores no escalares como matrices o hashes, que también serán accesibles en <code>params</code>. Puedes leer más sobre ellos en la sección <a href="#form-input-naming-conventions-and-params-hash">Convenciones de Nombres de Entrada de Formularios y Hash de Params</a> de esta guía. Para obtener detalles sobre el uso preciso de estos ayudantes, consulta la <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html">documentación de la API</a>.</p><h4 id="casillas-de-verificación"><a class="anchorlink" href="#casillas-de-verificación"><span>1.2.1</span> Casillas de Verificación</a></h4><p>Una casilla de verificación es un control de formulario que permite seleccionar o deseleccionar un único valor. Un grupo de casillas de verificación generalmente se utiliza para permitir que un usuario elija una o más opciones del grupo.</p><p>Aquí hay un ejemplo con tres casillas de verificación en un formulario:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">check_box</span> <span class="ss">:biography</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:biography</span><span class="p">,</span> <span class="s2">"Biografía"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">check_box</span> <span class="ss">:romance</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:romance</span><span class="p">,</span> <span class="s2">"Romance"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">check_box</span> <span class="ss">:mystery</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:mystery</span><span class="p">,</span> <span class="s2">"Misterio"</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.check_box :biography %>
<%= form.label :biography, "Biografía" %>
<%= form.check_box :romance %>
<%= form.label :romance, "Romance" %>
<%= form.check_box :mystery %>
<%= form.label :mystery, "Misterio" %>
">Copy</button>
</div>
<p>Lo anterior generará lo siguiente:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><input</span> <span class="na">name=</span><span class="s">"biography"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"biography"</span> <span class="na">id=</span><span class="s">"biography"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"biography"</span><span class="nt">></span>Biografía<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"romance"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"romance"</span> <span class="na">id=</span><span class="s">"romance"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"romance"</span><span class="nt">></span>Romance<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"mystery"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">value=</span><span class="s">"0"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">name=</span><span class="s">"mystery"</span> <span class="na">id=</span><span class="s">"mystery"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"mystery"</span><span class="nt">></span>Misterio<span class="nt"></label></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<input name="biography" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="biography" id="biography">
<label for="biography">Biografía</label>
<input name="romance" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="romance" id="romance">
<label for="romance">Romance</label>
<input name="mystery" type="hidden" value="0" autocomplete="off"><input type="checkbox" value="1" name="mystery" id="mystery">
<label for="mystery">Misterio</label>
">Copy</button>
</div>
<p>El primer parámetro de <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-check_box"><code>check_box</code></a> es el nombre de la entrada que se puede encontrar en el hash <code>params</code>. Si el usuario ha marcado solo la casilla de verificación "Biografía", el hash <code>params</code> contendría:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="p">{</span>
<span class="s2">"biography"</span> <span class="o">=></span> <span class="s2">"1"</span><span class="p">,</span>
<span class="s2">"romance"</span> <span class="o">=></span> <span class="s2">"0"</span><span class="p">,</span>
<span class="s2">"mystery"</span> <span class="o">=></span> <span class="s2">"0"</span>
<span class="p">}</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="{
"biography" => "1",
"romance" => "0",
"mystery" => "0"
}
">Copy</button>
</div>
<p>Puedes usar <code>params[:biography]</code> para verificar si esa casilla de verificación está seleccionada por el usuario.</p><p>Los valores de la casilla de verificación (los valores que aparecerán en <code>params</code>) pueden especificarse opcionalmente usando los parámetros <code>checked_value</code> y <code>unchecked_value</code>. Consulta la <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-check_box">documentación de la API</a> para más detalles.</p><p>También hay un <code>collection_check_boxes</code>, del cual puedes aprender en la <a href="#collection-related-helpers">sección de Ayudantes Relacionados con Colecciones</a>.</p><h4 id="botones-de-opción"><a class="anchorlink" href="#botones-de-opción"><span>1.2.2</span> Botones de Opción</a></h4><p>Los botones de opción son controles de formulario que solo permiten al usuario seleccionar una opción a la vez de la lista de opciones.</p><p>Por ejemplo, botones de opción para elegir tu sabor de helado favorito:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">radio_button</span> <span class="ss">:flavor</span><span class="p">,</span> <span class="s2">"chocolate_chip"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:flavor_chocolate_chip</span><span class="p">,</span> <span class="s2">"Chocolate Chip"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">radio_button</span> <span class="ss">:flavor</span><span class="p">,</span> <span class="s2">"vanilla"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:flavor_vanilla</span><span class="p">,</span> <span class="s2">"Vainilla"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">radio_button</span> <span class="ss">:flavor</span><span class="p">,</span> <span class="s2">"hazelnut"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:flavor_hazelnut</span><span class="p">,</span> <span class="s2">"Avellana"</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.radio_button :flavor, "chocolate_chip" %>
<%= form.label :flavor_chocolate_chip, "Chocolate Chip" %>
<%= form.radio_button :flavor, "vanilla" %>
<%= form.label :flavor_vanilla, "Vainilla" %>
<%= form.radio_button :flavor, "hazelnut" %>
<%= form.label :flavor_hazelnut, "Avellana" %>
">Copy</button>
</div>
<p>Lo anterior generará el siguiente HTML:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"chocolate_chip"</span> <span class="na">name=</span><span class="s">"flavor"</span> <span class="na">id=</span><span class="s">"flavor_chocolate_chip"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"flavor_chocolate_chip"</span><span class="nt">></span>Chocolate Chip<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"vanilla"</span> <span class="na">name=</span><span class="s">"flavor"</span> <span class="na">id=</span><span class="s">"flavor_vanilla"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"flavor_vanilla"</span><span class="nt">></span>Vainilla<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">value=</span><span class="s">"hazelnut"</span> <span class="na">name=</span><span class="s">"flavor"</span> <span class="na">id=</span><span class="s">"flavor_hazelnut"</span><span class="nt">></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"flavor_hazelnut"</span><span class="nt">></span>Avellana<span class="nt"></label></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<input type="radio" value="chocolate_chip" name="flavor" id="flavor_chocolate_chip">
<label for="flavor_chocolate_chip">Chocolate Chip</label>
<input type="radio" value="vanilla" name="flavor" id="flavor_vanilla">
<label for="flavor_vanilla">Vainilla</label>
<input type="radio" value="hazelnut" name="flavor" id="flavor_hazelnut">
<label for="flavor_hazelnut">Avellana</label>
">Copy</button>
</div>
<p>El segundo argumento de <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-radio_button"><code>radio_button</code></a> es el valor de la entrada. Debido a que estos botones de opción comparten el mismo nombre (<code>flavor</code>), el usuario solo podrá seleccionar uno de ellos, y <code>params[:flavor]</code> contendrá <code>"chocolate_chip"</code>, <code>"vanilla"</code>, o <code>hazelnut</code>.</p><p>NOTA: Usa siempre etiquetas para casillas de verificación y botones de opción. Asocian texto con una opción específica usando el atributo <code>for</code> y, al expandir la región clickeable, facilitan a los usuarios hacer clic en las entradas.</p><h3 id="otros-ayudantes-de-interés"><a class="anchorlink" href="#otros-ayudantes-de-interés"><span>1.3</span> Otros Ayudantes de Interés</a></h3><p>Hay muchos otros controles de formulario incluyendo texto, correo electrónico, contraseña, fecha y hora. Los ejemplos a continuación muestran algunos más ayudantes y su HTML generado.</p><p>Ayudantes relacionados con fechas y horas:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">date_field</span> <span class="ss">:born_on</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">time_field</span> <span class="ss">:started_at</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">datetime_local_field</span> <span class="ss">:graduation_day</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">month_field</span> <span class="ss">:birthday_month</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">week_field</span> <span class="ss">:birthday_week</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.date_field :born_on %>
<%= form.time_field :started_at %>
<%= form.datetime_local_field :graduation_day %>
<%= form.month_field :birthday_month %>
<%= form.week_field :birthday_week %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><input</span> <span class="na">type=</span><span class="s">"date"</span> <span class="na">name=</span><span class="s">"born_on"</span> <span class="na">id=</span><span class="s">"born_on"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"time"</span> <span class="na">name=</span><span class="s">"started_at"</span> <span class="na">id=</span><span class="s">"started_at"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"datetime-local"</span> <span class="na">name=</span><span class="s">"graduation_day"</span> <span class="na">id=</span><span class="s">"graduation_day"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"month"</span> <span class="na">name=</span><span class="s">"birthday_month"</span> <span class="na">id=</span><span class="s">"birthday_month"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"week"</span> <span class="na">name=</span><span class="s">"birthday_week"</span> <span class="na">id=</span><span class="s">"birthday_week"</span><span class="nt">></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<input type="date" name="born_on" id="born_on">
<input type="time" name="started_at" id="started_at">
<input type="datetime-local" name="graduation_day" id="graduation_day">
<input type="month" name="birthday_month" id="birthday_month">
<input type="week" name="birthday_week" id="birthday_week">
">Copy</button>
</div>
<p>Ayudantes con formato especial:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">password_field</span> <span class="ss">:password</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">email_field</span> <span class="ss">:address</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">telephone_field</span> <span class="ss">:phone</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">url_field</span> <span class="ss">:homepage</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.password_field :password %>
<%= form.email_field :address %>
<%= form.telephone_field :phone %>
<%= form.url_field :homepage %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><input</span> <span class="na">type=</span><span class="s">"password"</span> <span class="na">name=</span><span class="s">"password"</span> <span class="na">id=</span><span class="s">"password"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"email"</span> <span class="na">name=</span><span class="s">"address"</span> <span class="na">id=</span><span class="s">"address"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"tel"</span> <span class="na">name=</span><span class="s">"phone"</span> <span class="na">id=</span><span class="s">"phone"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"url"</span> <span class="na">name=</span><span class="s">"homepage"</span> <span class="na">id=</span><span class="s">"homepage"</span><span class="nt">></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<input type="password" name="password" id="password">
<input type="email" name="address" id="address">
<input type="tel" name="phone" id="phone">
<input type="url" name="homepage" id="homepage">
">Copy</button>
</div>
<p>Otros ayudantes comunes:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">text_area</span> <span class="ss">:message</span><span class="p">,</span> <span class="ss">size: </span><span class="s2">"70x5"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">hidden_field</span> <span class="ss">:parent_id</span><span class="p">,</span> <span class="ss">value: </span><span class="s2">"foo"</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">number_field</span> <span class="ss">:price</span><span class="p">,</span> <span class="ss">in: </span><span class="mf">1.0</span><span class="o">..</span><span class="mf">20.0</span><span class="p">,</span> <span class="ss">step: </span><span class="mf">0.5</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">range_field</span> <span class="ss">:discount</span><span class="p">,</span> <span class="ss">in: </span><span class="mi">1</span><span class="o">..</span><span class="mi">100</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">search_field</span> <span class="ss">:name</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">color_field</span> <span class="ss">:favorite_color</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.text_area :message, size: "70x5" %>
<%= form.hidden_field :parent_id, value: "foo" %>
<%= form.number_field :price, in: 1.0..20.0, step: 0.5 %>
<%= form.range_field :discount, in: 1..100 %>
<%= form.search_field :name %>
<%= form.color_field :favorite_color %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><textarea</span> <span class="na">name=</span><span class="s">"message"</span> <span class="na">id=</span><span class="s">"message"</span> <span class="na">cols=</span><span class="s">"70"</span> <span class="na">rows=</span><span class="s">"5"</span><span class="nt">></textarea></span>
<span class="nt"><input</span> <span class="na">value=</span><span class="s">"foo"</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"parent_id"</span> <span class="na">id=</span><span class="s">"parent_id"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">step=</span><span class="s">"0.5"</span> <span class="na">min=</span><span class="s">"1.0"</span> <span class="na">max=</span><span class="s">"20.0"</span> <span class="na">type=</span><span class="s">"number"</span> <span class="na">name=</span><span class="s">"price"</span> <span class="na">id=</span><span class="s">"price"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">min=</span><span class="s">"1"</span> <span class="na">max=</span><span class="s">"100"</span> <span class="na">type=</span><span class="s">"range"</span> <span class="na">name=</span><span class="s">"discount"</span> <span class="na">id=</span><span class="s">"discount"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"search"</span> <span class="na">name=</span><span class="s">"name"</span> <span class="na">id=</span><span class="s">"name"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">value=</span><span class="s">"#000000"</span> <span class="na">type=</span><span class="s">"color"</span> <span class="na">name=</span><span class="s">"favorite_color"</span> <span class="na">id=</span><span class="s">"favorite_color"</span><span class="nt">></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<textarea name="message" id="message" cols="70" rows="5"></textarea>
<input value="foo" autocomplete="off" type="hidden" name="parent_id" id="parent_id">
<input step="0.5" min="1.0" max="20.0" type="number" name="price" id="price">
<input min="1" max="100" type="range" name="discount" id="discount">
<input type="search" name="name" id="name">
<input value="#000000" type="color" name="favorite_color" id="favorite_color">
">Copy</button>
</div>
<p>Los inputs ocultos no se muestran al usuario pero en su lugar contienen datos como cualquier entrada textual. Los valores dentro de ellos pueden cambiarse con JavaScript.</p><p>CONSEJO: Si estás usando campos de entrada de contraseña, es posible que desees configurar tu aplicación para evitar que esos parámetros se registren. Puedes aprender cómo en la guía <a href="security.html#logging">Asegurando Aplicaciones Rails</a>.</p><h2 id="creando-formularios-con-objetos-de-modelo"><a class="anchorlink" href="#creando-formularios-con-objetos-de-modelo"><span>2</span> Creando Formularios con Objetos de Modelo</a></h2><h3 id="vinculando-un-formulario-a-un-objeto"><a class="anchorlink" href="#vinculando-un-formulario-a-un-objeto"><span>2.1</span> Vinculando un Formulario a un Objeto</a></h3><p>El ayudante <code>form_with</code> tiene una opción <code>:model</code> que te permite vincular el objeto form builder a un objeto de modelo. Esto significa que el formulario estará limitado a ese objeto de modelo, y los campos del formulario se poblarán con valores de ese objeto de modelo.</p><p>Por ejemplo, si tenemos un objeto de modelo <code>@book</code>:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="vi">@book</span> <span class="o">=</span> <span class="no">Book</span><span class="p">.</span><span class="nf">find</span><span class="p">(</span><span class="mi">42</span><span class="p">)</span>
<span class="c1"># => #<Book id: 42, title: "Walden", author: "Henry David Thoreau"></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="@book = Book.find(42)
# => #<Book id: 42, title: "Walden", author: "Henry David Thoreau">
">Copy</button>
</div>
<p>Y el siguiente formulario para crear un nuevo libro:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">model: </span><span class="vi">@book</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
<span class="nt"><div></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:title</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">text_field</span> <span class="ss">:title</span> <span class="cp">%></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">label</span> <span class="ss">:author</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">text_field</span> <span class="ss">:author</span> <span class="cp">%></span>
<span class="nt"></div></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">submit</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with model: @book do |form| %>
<div>
<%= form.label :title %>
<%= form.text_field :title %>
</div>
<div>
<%= form.label :author %>
<%= form.text_field :author %>
</div>
<%= form.submit %>
<% end %>
">Copy</button>
</div>
<p>Generará este HTML:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/books"</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="na">method=</span><span class="s">"post"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"authenticity_token"</span> <span class="na">value=</span><span class="s">"ChwHeyegcpAFDdBvXvDuvbfW7yCA3e8gvhyieai7DhG28C3akh-dyuv-IBittsjPrIjETlQQvQJ91T77QQ8xWA"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
<span class="nt"><div></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"book_title"</span><span class="nt">></span>Título<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"book[title]"</span> <span class="na">id=</span><span class="s">"book_title"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><div></span>
<span class="nt"><label</span> <span class="na">for=</span><span class="s">"book_author"</span><span class="nt">></span>Autor<span class="nt"></label></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"book[author]"</span> <span class="na">id=</span><span class="s">"book_author"</span><span class="nt">></span>
<span class="nt"></div></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">name=</span><span class="s">"commit"</span> <span class="na">value=</span><span class="s">"Crear Libro"</span> <span class="na">data-disable-with=</span><span class="s">"Crear Libro"</span><span class="nt">></span>
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form action="/books" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="ChwHeyegcpAFDdBvXvDuvbfW7yCA3e8gvhyieai7DhG28C3akh-dyuv-IBittsjPrIjETlQQvQJ91T77QQ8xWA" autocomplete="off">
<div>
<label for="book_title">Título</label>
<input type="text" name="book[title]" id="book_title">
</div>
<div>
<label for="book_author">Autor</label>
<input type="text" name="book[author]" id="book_author">
</div>
<input type="submit" name="commit" value="Crear Libro" data-disable-with="Crear Libro">
</form>
">Copy</button>
</div>
<p>Algunas cosas importantes a notar al usar <code>form_with</code> con un objeto de modelo:</p>
<ul>
<li>La <code>action</code> del formulario se llena automáticamente con un valor apropiado, <code>action="/books"</code>. Si estuvieras actualizando un libro, sería <code>action="/books/42"</code>.</li>
<li>Los nombres de los campos del formulario están limitados con <code>book[...]</code>. Esto significa que <code>params[:book]</code> será un hash que contiene los valores de todos estos campos. Puedes leer más sobre la importancia de los nombres de entrada en el capítulo <a href="#form-input-naming-conventions-and-params-hash">Convenciones de Nombres de Entrada de Formularios y Hash de Params</a> de esta guía.</li>
<li>El botón de envío se le da automáticamente un valor de texto apropiado, "Crear Libro" en este caso.</li>
</ul>
<p>CONSEJO: Típicamente tus entradas de formulario reflejarán atributos del modelo. Sin embargo, no tienen que hacerlo. Si hay otra información que necesitas, puedes incluir un campo en tu formulario y acceder a él a través de <code>params[:book][:my_non_attribute_input]</code>.</p><h4 id="formularios-de-clave-primaria-compuesta"><a class="anchorlink" href="#formularios-de-clave-primaria-compuesta"><span>2.1.1</span> Formularios de Clave Primaria Compuesta</a></h4><p>Si tienes un modelo con una <a href="active_record_composite_primary_keys.html">clave primaria compuesta</a>, la sintaxis de construcción de formularios es la misma con una salida ligeramente diferente.</p><p>Por ejemplo, para actualizar un objeto de modelo <code>@book</code> con una clave compuesta <code>[:author_id, :id]</code> como esta:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="vi">@book</span> <span class="o">=</span> <span class="no">Book</span><span class="p">.</span><span class="nf">find</span><span class="p">([</span><span class="mi">2</span><span class="p">,</span> <span class="mi">25</span><span class="p">])</span>
<span class="c1"># => #<Book id: 25, title: "Some book", author_id: 2></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="@book = Book.find([2, 25])
# => #<Book id: 25, title: "Some book", author_id: 2>
">Copy</button>
</div>
<p>El siguiente formulario:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">model: </span><span class="vi">@book</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">text_field</span> <span class="ss">:title</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">submit</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with model: @book do |form| %>
<%= form.text_field :title %>
<%= form.submit %>
<% end %>
">Copy</button>
</div>
<p>Generará esta salida HTML:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/books/2_25"</span> <span class="na">method=</span><span class="s">"post"</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="nt">></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"authenticity_token"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">value=</span><span class="s">"ChwHeyegcpAFDdBvXvDuvbfW7yCA3e8gvhyieai7DhG28C3akh-dyuv-IBittsjPrIjETlQQvQJ91T77QQ8xWA"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"book[title]"</span> <span class="na">id=</span><span class="s">"book_title"</span> <span class="na">value=</span><span class="s">"Some book"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">name=</span><span class="s">"commit"</span> <span class="na">value=</span><span class="s">"Actualizar Libro"</span> <span class="na">data-disable-with=</span><span class="s">"Actualizar Libro"</span><span class="nt">></span>
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form action="/books/2_25" method="post" accept-charset="UTF-8" >
<input name="authenticity_token" type="hidden" value="ChwHeyegcpAFDdBvXvDuvbfW7yCA3e8gvhyieai7DhG28C3akh-dyuv-IBittsjPrIjETlQQvQJ91T77QQ8xWA" />
<input type="text" name="book[title]" id="book_title" value="Some book" />
<input type="submit" name="commit" value="Actualizar Libro" data-disable-with="Actualizar Libro">
</form>
">Copy</button>
</div>
<p>Observa que la URL generada contiene el <code>author_id</code> y <code>id</code> delimitados por un guion bajo. Una vez enviado, el controlador puede <a href="action_controller_overview.html#composite-key-parameters">extraer cada valor de clave primaria</a> de los parámetros y actualizar el registro como lo haría con una clave primaria singular.</p><h4 id="el-ayudante-fields-for"><a class="anchorlink" href="#el-ayudante-fields-for"><span>2.1.2</span> El Ayudante <code>fields_for</code></a></h4><p>El ayudante <code>fields_for</code> se utiliza para renderizar campos para objetos de modelo relacionados dentro del mismo formulario. El modelo "interno" asociado generalmente está relacionado con el modelo "principal" del formulario a través de una asociación de Active Record. Por ejemplo, si tuvieras un modelo <code>Person</code> con un modelo asociado <code>ContactDetail</code>, podrías crear un único formulario con entradas para ambos modelos de esta manera:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">model: </span><span class="vi">@person</span> <span class="k">do</span> <span class="o">|</span><span class="n">person_form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">person_form</span><span class="p">.</span><span class="nf">text_field</span> <span class="ss">:name</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">fields_for</span> <span class="ss">:contact_detail</span><span class="p">,</span> <span class="vi">@person</span><span class="p">.</span><span class="nf">contact_detail</span> <span class="k">do</span> <span class="o">|</span><span class="n">contact_detail_form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">contact_detail_form</span><span class="p">.</span><span class="nf">text_field</span> <span class="ss">:phone_number</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with model: @person do |person_form| %>
<%= person_form.text_field :name %>
<%= fields_for :contact_detail, @person.contact_detail do |contact_detail_form| %>
<%= contact_detail_form.text_field :phone_number %>
<% end %>
<% end %>
">Copy</button>
</div>
<p>Lo anterior producirá la siguiente salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/people"</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="na">method=</span><span class="s">"post"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"authenticity_token"</span> <span class="na">value=</span><span class="s">"..."</span> <span class="na">autocomplete=</span><span class="s">"off"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"person[name]"</span> <span class="na">id=</span><span class="s">"person_name"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">name=</span><span class="s">"contact_detail[phone_number]"</span> <span class="na">id=</span><span class="s">"contact_detail_phone_number"</span> <span class="nt">/></span>
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form action="/people" accept-charset="UTF-8" method="post">
<input type="hidden" name="authenticity_token" value="..." autocomplete="off" />
<input type="text" name="person[name]" id="person_name" />
<input type="text" name="contact_detail[phone_number]" id="contact_detail_phone_number" />
</form>
">Copy</button>
</div>
<p>El objeto producido por <code>fields_for</code> es un form builder como el que produce <code>form_with</code>. El ayudante <code>fields_for</code> crea un enlace similar pero sin renderizar una etiqueta <code><form></code>. Puedes aprender más sobre <code>fields_for</code> en los <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-fields_for">documentos de la API</a>.</p><h3 id="confiando-en-la-identificación-de-registros"><a class="anchorlink" href="#confiando-en-la-identificación-de-registros"><span>2.2</span> Confiando en la Identificación de Registros</a></h3><p>Al tratar con recursos RESTful, las llamadas a <code>form_with</code> pueden simplificarse confiando en la <strong>identificación de registros</strong>. Esto significa que pasas la instancia del modelo y dejas que Rails determine el nombre del modelo, el método y otras cosas. En el ejemplo a continuación para crear un nuevo registro, ambas llamadas a <code>form_with</code> generan el mismo HTML:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="c1"># forma más larga:</span>
<span class="n">form_with</span><span class="p">(</span><span class="ss">model: </span><span class="vi">@article</span><span class="p">,</span> <span class="ss">url: </span><span class="n">articles_path</span><span class="p">)</span>
<span class="c1"># forma abreviada:</span>
<span class="n">form_with</span><span class="p">(</span><span class="ss">model: </span><span class="vi">@article</span><span class="p">)</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="# forma más larga:
form_with(model: @article, url: articles_path)
# forma abreviada:
form_with(model: @article)
">Copy</button>
</div>
<p>De manera similar, para editar un artículo existente como a continuación, ambas llamadas a <code>form_with</code> también generarán el mismo HTML:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="c1"># forma más larga:</span>
<span class="n">form_with</span><span class="p">(</span><span class="ss">model: </span><span class="vi">@article</span><span class="p">,</span> <span class="ss">url: </span><span class="n">article_path</span><span class="p">(</span><span class="vi">@article</span><span class="p">),</span> <span class="ss">method: </span><span class="s2">"patch"</span><span class="p">)</span>
<span class="c1"># forma abreviada:</span>
<span class="n">form_with</span><span class="p">(</span><span class="ss">model: </span><span class="vi">@article</span><span class="p">)</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="# forma más larga:
form_with(model: @article, url: article_path(@article), method: "patch")
# forma abreviada:
form_with(model: @article)
">Copy</button>
</div>
<p>Observa cómo la invocación abreviada de <code>form_with</code> es convenientemente la misma, independientemente de si el registro es nuevo o existente. La identificación de registros es lo suficientemente inteligente como para determinar si el registro es nuevo preguntando a <a href="https://edgeapi.rubyonrails.org/classes/ActiveRecord/Persistence.html#method-i-persisted-3F"><code>record.persisted?</code></a>. También selecciona el camino correcto para enviar, y el nombre basado en la clase del objeto.</p><p>Esto asume que el modelo <code>Article</code> está declarado con <code>resources :articles</code> en el archivo de rutas.</p><p>Si tienes un <a href="routing.html#singular-resources">recurso singular</a>, necesitarás llamar a <code>resource</code> y <code>resolve</code> para que funcione con <code>form_with</code>:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="n">resource</span> <span class="ss">:article</span>
<span class="n">resolve</span><span class="p">(</span><span class="s1">'Article'</span><span class="p">)</span> <span class="p">{</span> <span class="p">[</span><span class="ss">:article</span><span class="p">]</span> <span class="p">}</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="resource :article
resolve('Article') { [:article] }
">Copy</button>
</div>
<p>CONSEJO: Declarar un recurso tiene una serie de efectos secundarios. Consulta la guía <a href="routing.html#resource-routing-the-rails-default">Rutas de Rails desde el Exterior Hacia Adentro</a> para obtener más información sobre cómo configurar y usar recursos.</p><p>ADVERTENCIA: Cuando estás usando <a href="association_basics.html#single-table-inheritance-sti">herencia de tabla única</a> con tus modelos, no puedes confiar en la identificación de registros en una subclase si solo su clase padre está declarada como recurso. Tendrás que especificar <code>:url</code>, y <code>:scope</code> (el nombre del modelo) explícitamente.</p><h3 id="trabajando-con-espacios-de-nombres"><a class="anchorlink" href="#trabajando-con-espacios-de-nombres"><span>2.3</span> Trabajando con Espacios de Nombres</a></h3><p>Si tienes rutas con espacios de nombres, <code>form_with</code> tiene una abreviatura para eso. Por ejemplo, si tu aplicación tiene un espacio de nombres <code>admin</code>:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="n">form_with</span> <span class="ss">model: </span><span class="p">[</span><span class="ss">:admin</span><span class="p">,</span> <span class="vi">@article</span><span class="p">]</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="form_with model: [:admin, @article]
">Copy</button>
</div>
<p>Lo anterior creará un formulario que se envía al <code>Admin::ArticlesController</code> dentro del espacio de nombres admin, por lo tanto enviando a <code>admin_article_path(@article)</code> en el caso de una actualización.</p><p>Si tienes varios niveles de espacios de nombres, la sintaxis es similar:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="n">form_with</span> <span class="ss">model: </span><span class="p">[</span><span class="ss">:admin</span><span class="p">,</span> <span class="ss">:management</span><span class="p">,</span> <span class="vi">@article</span><span class="p">]</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="form_with model: [:admin, :management, @article]
">Copy</button>
</div>
<p>Para más información sobre el sistema de enrutamiento de Rails y las convenciones asociadas, consulta la guía <a href="routing.html">Rutas de Rails desde el Exterior Hacia Adentro</a>.</p><h3 id="formularios-con-métodos-patch-put-o-delete"><a class="anchorlink" href="#formularios-con-métodos-patch-put-o-delete"><span>2.4</span> Formularios con Métodos PATCH, PUT, o DELETE</a></h3><p>El marco de Rails fomenta el diseño RESTful, lo que significa que los formularios en tu aplicación harán solicitudes donde el <code>method</code> es <code>PATCH</code>, <code>PUT</code>, o <code>DELETE</code> además de <code>GET</code> y <code>POST</code>. Sin embargo, los formularios HTML <em>no soportan</em> métodos distintos de <code>GET</code> y <code>POST</code> cuando se trata de enviar formularios.</p><p>Rails resuelve esta limitación emulando otros métodos sobre POST con un input oculto llamado <code>"_method"</code>. Por ejemplo:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="n">form_with</span><span class="p">(</span><span class="ss">url: </span><span class="n">search_path</span><span class="p">,</span> <span class="ss">method: </span><span class="s2">"patch"</span><span class="p">)</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="form_with(url: search_path, method: "patch")
">Copy</button>
</div>
<p>El formulario anterior generará esta salida HTML:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">action=</span><span class="s">"/search"</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="na">method=</span><span class="s">"post"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"_method"</span> <span class="na">value=</span><span class="s">"patch"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">name=</span><span class="s">"authenticity_token"</span> <span class="na">value=</span><span class="s">"R4quRuXQAq75TyWpSf8AwRyLt-R1uMtPP1dHTTWJE5zbukiaY8poSTXxq3Z7uAjXfPHiKQDsWE1i2_-h0HSktQ"</span> <span class="na">autocomplete=</span><span class="s">"off"</span><span class="nt">></span>
<span class="c"><!-- ... --></span>
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form action="/search" accept-charset="UTF-8" method="post">
<input type="hidden" name="_method" value="patch" autocomplete="off">
<input type="hidden" name="authenticity_token" value="R4quRuXQAq75TyWpSf8AwRyLt-R1uMtPP1dHTTWJE5zbukiaY8poSTXxq3Z7uAjXfPHiKQDsWE1i2_-h0HSktQ" autocomplete="off">
<!-- ... -->
</form>
">Copy</button>
</div>
<p>Al analizar los datos enviados por POST, Rails tomará en cuenta el parámetro especial <code>_method</code> y procederá como si el método HTTP de la solicitud fuera el establecido como el valor de <code>_method</code> (<code>PATCH</code> en este ejemplo).</p><p>Al renderizar un formulario, los botones de envío pueden anular el atributo <code>method</code> declarado a través de la palabra clave <code>formmethod:</code>:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">url: </span><span class="s2">"/posts/1"</span><span class="p">,</span> <span class="ss">method: :patch</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">button</span> <span class="s2">"Eliminar"</span><span class="p">,</span> <span class="ss">formmethod: :delete</span><span class="p">,</span> <span class="ss">data: </span><span class="p">{</span> <span class="ss">confirm: </span><span class="s2">"¿Estás seguro?"</span> <span class="p">}</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">button</span> <span class="s2">"Actualizar"</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with url: "/posts/1", method: :patch do |form| %>
<%= form.button "Eliminar", formmethod: :delete, data: { confirm: "¿Estás seguro?" } %>
<%= form.button "Actualizar" %>
<% end %>
">Copy</button>
</div>
<p>Similar a los elementos <code><form></code>, la mayoría de los navegadores <em>no soportan</em> anular métodos de formulario declarados a través de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod">formmethod</a> distintos de <code>GET</code> y <code>POST</code>.</p><p>Rails resuelve este problema emulando otros métodos sobre POST a través de una combinación de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod">formmethod</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value">value</a>, y <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name">name</a>:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><form</span> <span class="na">accept-charset=</span><span class="s">"UTF-8"</span> <span class="na">action=</span><span class="s">"/posts/1"</span> <span class="na">method=</span><span class="s">"post"</span><span class="nt">></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"_method"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">value=</span><span class="s">"patch"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">name=</span><span class="s">"authenticity_token"</span> <span class="na">type=</span><span class="s">"hidden"</span> <span class="na">value=</span><span class="s">"f755bb0ed134b76c432144748a6d4b7a7ddf2b71"</span> <span class="nt">/></span>
<span class="c"><!-- ... --></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">formmethod=</span><span class="s">"post"</span> <span class="na">name=</span><span class="s">"_method"</span> <span class="na">value=</span><span class="s">"delete"</span> <span class="na">data-confirm=</span><span class="s">"¿Estás seguro?"</span><span class="nt">></span>Eliminar<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">name=</span><span class="s">"button"</span><span class="nt">></span>Actualizar<span class="nt"></button></span>
<span class="nt"></form></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<form accept-charset="UTF-8" action="/posts/1" method="post">
<input name="_method" type="hidden" value="patch" />
<input name="authenticity_token" type="hidden" value="f755bb0ed134b76c432144748a6d4b7a7ddf2b71" />
<!-- ... -->
<button type="submit" formmethod="post" name="_method" value="delete" data-confirm="¿Estás seguro?">Eliminar</button>
<button type="submit" name="button">Actualizar</button>
</form>
">Copy</button>
</div>
<p>En este caso, el botón "Actualizar" será tratado como <code>PATCH</code> y el botón "Eliminar" será tratado como <code>DELETE</code>.</p><h2 id="creando-cuadros-de-selección-con-facilidad"><a class="anchorlink" href="#creando-cuadros-de-selección-con-facilidad"><span>3</span> Creando Cuadros de Selección con Facilidad</a></h2><p>Los cuadros de selección, también conocidos como listas desplegables, permiten a los usuarios seleccionar de una lista de opciones. El HTML para los cuadros de selección requiere una cantidad decente de marcado: un elemento <code><option></code> para cada opción a elegir. Rails proporciona métodos de ayuda para ayudar a generar ese marcado.</p><p>Por ejemplo, digamos que tenemos una lista de ciudades para que el usuario elija. Podemos usar el ayudante <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-select"><code>select</code></a>:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">select</span> <span class="ss">:city</span><span class="p">,</span> <span class="p">[</span><span class="s2">"Berlin"</span><span class="p">,</span> <span class="s2">"Chicago"</span><span class="p">,</span> <span class="s2">"Madrid"</span><span class="p">]</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.select :city, ["Berlin", "Chicago", "Madrid"] %>
">Copy</button>
</div>
<p>Lo anterior generará esta salida HTML:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"city"</span> <span class="na">id=</span><span class="s">"city"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Berlin"</span><span class="nt">></span>Berlín<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Chicago"</span><span class="nt">></span>Chicago<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Madrid"</span><span class="nt">></span>Madrid<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="city" id="city">
<option value="Berlin">Berlín</option>
<option value="Chicago">Chicago</option>
<option value="Madrid">Madrid</option>
</select>
">Copy</button>
</div>
<p>Y la selección estará disponible en <code>params[:city]</code> como de costumbre.</p><p>También podemos especificar valores <code><option></code> que difieren de sus etiquetas:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">select</span> <span class="ss">:city</span><span class="p">,</span> <span class="p">[[</span><span class="s2">"Berlin"</span><span class="p">,</span> <span class="s2">"BE"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Chicago"</span><span class="p">,</span> <span class="s2">"CHI"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Madrid"</span><span class="p">,</span> <span class="s2">"MD"</span><span class="p">]]</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.select :city, [["Berlin", "BE"], ["Chicago", "CHI"], ["Madrid", "MD"]] %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"city"</span> <span class="na">id=</span><span class="s">"city"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"BE"</span><span class="nt">></span>Berlín<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"CHI"</span><span class="nt">></span>Chicago<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"MD"</span><span class="nt">></span>Madrid<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="city" id="city">
<option value="BE">Berlín</option>
<option value="CHI">Chicago</option>
<option value="MD">Madrid</option>
</select>
">Copy</button>
</div>
<p>De esta manera, el usuario verá el nombre completo de la ciudad, pero <code>params[:city]</code> será uno de <code>"BE"</code>, <code>"CHI"</code>, o <code>"MD"</code>.</p><p>Por último, podemos especificar una opción predeterminada para el cuadro de selección con el argumento <code>:selected</code>:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">select</span> <span class="ss">:city</span><span class="p">,</span> <span class="p">[[</span><span class="s2">"Berlin"</span><span class="p">,</span> <span class="s2">"BE"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Chicago"</span><span class="p">,</span> <span class="s2">"CHI"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Madrid"</span><span class="p">,</span> <span class="s2">"MD"</span><span class="p">]],</span> <span class="ss">selected: </span><span class="s2">"CHI"</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.select :city, [["Berlin", "BE"], ["Chicago", "CHI"], ["Madrid", "MD"]], selected: "CHI" %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"city"</span> <span class="na">id=</span><span class="s">"city"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"BE"</span><span class="nt">></span>Berlín<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"CHI"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>Chicago<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"MD"</span><span class="nt">></span>Madrid<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="city" id="city">
<option value="BE">Berlín</option>
<option value="CHI" selected="selected">Chicago</option>
<option value="MD">Madrid</option>
</select>
">Copy</button>
</div>
<h3 id="grupos-de-opciones-para-cuadros-de-selección"><a class="anchorlink" href="#grupos-de-opciones-para-cuadros-de-selección"><span>3.1</span> Grupos de Opciones para Cuadros de Selección</a></h3><p>En algunos casos, podemos querer mejorar la experiencia del usuario agrupando opciones relacionadas. Podemos hacerlo pasando un <code>Hash</code> (o un <code>Array</code> comparable) a <code>select</code>:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">select</span> <span class="ss">:city</span><span class="p">,</span>
<span class="p">{</span>
<span class="s2">"Europa"</span> <span class="o">=></span> <span class="p">[</span> <span class="p">[</span><span class="s2">"Berlin"</span><span class="p">,</span> <span class="s2">"BE"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Madrid"</span><span class="p">,</span> <span class="s2">"MD"</span><span class="p">]</span> <span class="p">],</span>
<span class="s2">"América del Norte"</span> <span class="o">=></span> <span class="p">[</span> <span class="p">[</span><span class="s2">"Chicago"</span><span class="p">,</span> <span class="s2">"CHI"</span><span class="p">]</span> <span class="p">],</span>
<span class="p">},</span>
<span class="ss">selected: </span><span class="s2">"CHI"</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.select :city,
{
"Europa" => [ ["Berlin", "BE"], ["Madrid", "MD"] ],
"América del Norte" => [ ["Chicago", "CHI"] ],
},
selected: "CHI" %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"city"</span> <span class="na">id=</span><span class="s">"city"</span><span class="nt">></span>
<span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"Europa"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"BE"</span><span class="nt">></span>Berlín<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"MD"</span><span class="nt">></span>Madrid<span class="nt"></option></span>
<span class="nt"></optgroup></span>
<span class="nt"><optgroup</span> <span class="na">label=</span><span class="s">"América del Norte"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"CHI"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>Chicago<span class="nt"></option></span>
<span class="nt"></optgroup></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="city" id="city">
<optgroup label="Europa">
<option value="BE">Berlín</option>
<option value="MD">Madrid</option>
</optgroup>
<optgroup label="América del Norte">
<option value="CHI" selected="selected">Chicago</option>
</optgroup>
</select>
">Copy</button>
</div>
<h3 id="vinculando-cuadros-de-selección-a-objetos-de-modelo"><a class="anchorlink" href="#vinculando-cuadros-de-selección-a-objetos-de-modelo"><span>3.2</span> Vinculando Cuadros de Selección a Objetos de Modelo</a></h3><p>Al igual que otros controles de formulario, un cuadro de selección puede estar vinculado a un atributo de modelo. Por ejemplo, si tenemos un objeto de modelo <code>@person</code> como:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="vi">@person</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="ss">city: </span><span class="s2">"MD"</span><span class="p">)</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="@person = Person.new(city: "MD")
">Copy</button>
</div>
<p>El siguiente formulario:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">model: </span><span class="vi">@person</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">select</span> <span class="ss">:city</span><span class="p">,</span> <span class="p">[[</span><span class="s2">"Berlin"</span><span class="p">,</span> <span class="s2">"BE"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Chicago"</span><span class="p">,</span> <span class="s2">"CHI"</span><span class="p">],</span> <span class="p">[</span><span class="s2">"Madrid"</span><span class="p">,</span> <span class="s2">"MD"</span><span class="p">]]</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with model: @person do |form| %>
<%= form.select :city, [["Berlin", "BE"], ["Chicago", "CHI"], ["Madrid", "MD"]] %>
<% end %>
">Copy</button>
</div>
<p>Generará este cuadro de selección:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"person[city]"</span> <span class="na">id=</span><span class="s">"person_city"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"BE"</span><span class="nt">></span>Berlín<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"CHI"</span><span class="nt">></span>Chicago<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"MD"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>Madrid<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="person[city]" id="person_city">
<option value="BE">Berlín</option>
<option value="CHI">Chicago</option>
<option value="MD" selected="selected">Madrid</option>
</select>
">Copy</button>
</div>
<p>La única diferencia es que la opción seleccionada se encontrará en <code>params[:person][:city]</code> en lugar de <code>params[:city]</code>.</p><p>Observa que la opción apropiada fue automáticamente marcada como <code>selected="selected"</code>. Dado que este cuadro de selección estaba vinculado a un registro <code>@person</code> existente, no necesitábamos especificar un argumento <code>:selected</code>.</p><h2 id="usando-ayudantes-de-formulario-de-fecha-y-hora"><a class="anchorlink" href="#usando-ayudantes-de-formulario-de-fecha-y-hora"><span>4</span> Usando Ayudantes de Formulario de Fecha y Hora</a></h2><p>Además de los ayudantes <code>date_field</code> y <code>time_field</code> mencionados <a href="#other-helpers-of-interest">anteriormente</a>, Rails proporciona ayudantes alternativos de fecha y hora que renderizan cuadros de selección simples. El ayudante <code>date_select</code> renderiza un cuadro de selección separado para año, mes y día.</p><p>Por ejemplo, si tenemos un objeto de modelo <code>@person</code> como:</p><div class="interstitial code">
<pre><code class="highlight ruby"><span class="vi">@person</span> <span class="o">=</span> <span class="no">Person</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="ss">birth_date: </span><span class="no">Date</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="mi">1995</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">21</span><span class="p">))</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="@person = Person.new(birth_date: Date.new(1995, 12, 21))
">Copy</button>
</div>
<p>El siguiente formulario:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form_with</span> <span class="ss">model: </span><span class="vi">@person</span> <span class="k">do</span> <span class="o">|</span><span class="n">form</span><span class="o">|</span> <span class="cp">%></span>
<span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">date_select</span> <span class="ss">:birth_date</span> <span class="cp">%></span>
<span class="cp"><%</span> <span class="k">end</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form_with model: @person do |form| %>
<%= form.date_select :birth_date %>
<% end %>
">Copy</button>
</div>
<p>Generará cuadros de selección como:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"person[birth_date(1i)]"</span> <span class="na">id=</span><span class="s">"person_birth_date_1i"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1990"</span><span class="nt">></span>1990<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1991"</span><span class="nt">></span>1991<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1992"</span><span class="nt">></span>1992<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1993"</span><span class="nt">></span>1993<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1994"</span><span class="nt">></span>1994<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1995"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>1995<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1996"</span><span class="nt">></span>1996<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1997"</span><span class="nt">></span>1997<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1998"</span><span class="nt">></span>1998<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1999"</span><span class="nt">></span>1999<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2000"</span><span class="nt">></span>2000<span class="nt"></option></span>
<span class="nt"></select></span>
<span class="nt"><select</span> <span class="na">name=</span><span class="s">"person[birth_date(2i)]"</span> <span class="na">id=</span><span class="s">"person_birth_date_2i"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>Enero<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2"</span><span class="nt">></span>Febrero<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"3"</span><span class="nt">></span>Marzo<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"4"</span><span class="nt">></span>Abril<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"5"</span><span class="nt">></span>Mayo<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"6"</span><span class="nt">></span>Junio<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"7"</span><span class="nt">></span>Julio<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"8"</span><span class="nt">></span>Agosto<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"9"</span><span class="nt">></span>Septiembre<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"10"</span><span class="nt">></span>Octubre<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"11"</span><span class="nt">></span>Noviembre<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"12"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>Diciembre<span class="nt"></option></span>
<span class="nt"></select></span>
<span class="nt"><select</span> <span class="na">name=</span><span class="s">"person[birth_date(3i)]"</span> <span class="na">id=</span><span class="s">"person_birth_date_3i"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"1"</span><span class="nt">></span>1<span class="nt"></option></span>
...
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"21"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>21<span class="nt"></option></span>
...
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"31"</span><span class="nt">></span>31<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="person[birth_date(1i)]" id="person_birth_date_1i">
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995" selected="selected">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="person[birth_date(2i)]" id="person_birth_date_2i">
<option value="1">Enero</option>
<option value="2">Febrero</option>
<option value="3">Marzo</option>
<option value="4">Abril</option>
<option value="5">Mayo</option>
<option value="6">Junio</option>
<option value="7">Julio</option>
<option value="8">Agosto</option>
<option value="9">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12" selected="selected">Diciembre</option>
</select>
<select name="person[birth_date(3i)]" id="person_birth_date_3i">
<option value="1">1</option>
...
<option value="21" selected="selected">21</option>
...
<option value="31">31</option>
</select>
">Copy</button>
</div>
<p>Observa que, cuando se envía el formulario, no habrá un solo valor en el hash <code>params</code> que contenga la fecha completa. En su lugar, habrá varios valores con nombres especiales como <code>"birth_date(1i)"</code>. Sin embargo, Active Model sabe cómo ensamblar estos valores en una fecha completa, basada en el tipo declarado del atributo del modelo. Así que podemos pasar <code>params[:person]</code> a <code>Person.new</code> o <code>Person#update</code> tal como lo haríamos si el formulario usara un solo campo para representar la fecha completa.</p><p>Además del ayudante <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-date_select"><code>date_select</code></a>, Rails proporciona <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-time_select"><code>time_select</code></a> que genera cuadros de selección para la hora y el minuto. También hay <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-datetime_select"><code>datetime_select</code></a> que combina tanto cuadros de selección de fecha como de hora.</p><h3 id="cuadros-de-selección-para-componentes-de-fecha-o-hora"><a class="anchorlink" href="#cuadros-de-selección-para-componentes-de-fecha-o-hora"><span>4.1</span> Cuadros de Selección para Componentes de Fecha o Hora</a></h3><p>Rails también proporciona ayudantes para renderizar cuadros de selección para componentes individuales de fecha y hora: <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-select_year"><code>select_year</code></a>, <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-select_month"><code>select_month</code></a>, <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-select_day"><code>select_day</code></a>, <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-select_hour"><code>select_hour</code></a>, <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-select_minute"><code>select_minute</code></a>, y <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/DateHelper.html#method-i-select_second"><code>select_second</code></a>. Estos ayudantes son métodos "desnudos", lo que significa que no se llaman en una instancia de form builder. Por ejemplo:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">select_year</span> <span class="mi">2024</span><span class="p">,</span> <span class="ss">prefix: </span><span class="s2">"party"</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= select_year 2024, prefix: "party" %>
">Copy</button>
</div>
<p>Lo anterior genera un cuadro de selección como:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">id=</span><span class="s">"party_year"</span> <span class="na">name=</span><span class="s">"party[year]"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2019"</span><span class="nt">></span>2019<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2020"</span><span class="nt">></span>2020<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2021"</span><span class="nt">></span>2021<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2022"</span><span class="nt">></span>2022<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2023"</span><span class="nt">></span>2023<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2024"</span> <span class="na">selected=</span><span class="s">"selected"</span><span class="nt">></span>2024<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2025"</span><span class="nt">></span>2025<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2026"</span><span class="nt">></span>2026<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2027"</span><span class="nt">></span>2027<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2028"</span><span class="nt">></span>2028<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"2029"</span><span class="nt">></span>2029<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select id="party_year" name="party[year]">
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024" selected="selected">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
</select>
">Copy</button>
</div>
<p>Para cada uno de estos ayudantes, puedes especificar un objeto <code>Date</code> o <code>Time</code> en lugar de un número como valor predeterminado (por ejemplo <code><%= select_year Date.today, prefix: "party" %></code> en lugar de lo anterior), y las partes de fecha y hora apropiadas serán extraídas y utilizadas.</p><h3 id="selección-de-zona-horaria"><a class="anchorlink" href="#selección-de-zona-horaria"><span>4.2</span> Selección de Zona Horaria</a></h3><p>Cuando necesitas preguntar a los usuarios en qué zona horaria están, hay un ayudante muy conveniente <a href="https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-time_zone_select"><code>time_zone_select</code></a> para usar.</p><p>Típicamente, tendrías que proporcionar una lista de opciones de zona horaria para que los usuarios seleccionen. Esto puede ser tedioso si no fuera por la lista de objetos predefinidos <a href="https://edgeapi.rubyonrails.org/classes/ActiveSupport/TimeZone.html"><code>ActiveSupport::TimeZone</code></a>. El ayudante <code>time_with_zone</code> envuelve esto y puede ser usado de la siguiente manera:</p><div class="interstitial code">
<pre><code class="highlight erb"><span class="cp"><%=</span> <span class="n">form</span><span class="p">.</span><span class="nf">time_zone_select</span> <span class="ss">:time_zone</span> <span class="cp">%></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<%= form.time_zone_select :time_zone %>
">Copy</button>
</div>
<p>Salida:</p><div class="interstitial code">
<pre><code class="highlight html"><span class="nt"><select</span> <span class="na">name=</span><span class="s">"time_zone"</span> <span class="na">id=</span><span class="s">"time_zone"</span><span class="nt">></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"International Date Line West"</span><span class="nt">></span>(GMT-12:00) International Date Line West<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"American Samoa"</span><span class="nt">></span>(GMT-11:00) American Samoa<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Midway Island"</span><span class="nt">></span>(GMT-11:00) Midway Island<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Hawaii"</span><span class="nt">></span>(GMT-10:00) Hawaii<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Alaska"</span><span class="nt">></span>(GMT-09:00) Alaska<span class="nt"></option></span>
...
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Samoa"</span><span class="nt">></span>(GMT+13:00) Samoa<span class="nt"></option></span>
<span class="nt"><option</span> <span class="na">value=</span><span class="s">"Tokelau Is."</span><span class="nt">></span>(GMT+13:00) Tokelau Is.<span class="nt"></option></span>
<span class="nt"></select></span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="<select name="time_zone" id="time_zone">
<option value="International Date Line West">(GMT-12:00) International Date Line West</option>
<option value="American Samoa">(GMT-11:00) American Samoa</option>
<option value="Midway Island">(GMT-11:00) Midway Island</option>
<option value="Hawaii">(GMT-10:00) Hawaii</option>
<option value="Alaska">(GMT-09:00) Alaska</option>
...
<option value="Samoa">(GMT+13:00) Samoa</option>
<option value="Tokelau Is.">(GMT+13:00) Tokelau Is.</option>
</select>
">Copy</button>
</div>