1 00:00:03,250 --> 00:00:07,810 Ahora que hemos visto cómo añadir botones a nuestra página web. 2 00:00:07,810 --> 00:00:12,560 En este ejercicio, vamos a ver los formularios y cómo podemos agregar formularios a 3 00:00:12,560 --> 00:00:19,220 nuestra página web y también darle estilo a estos elementos de formulario usando las clases de Bootstrap. 4 00:00:19,220 --> 00:00:23,065 Volviendo a la página contactus.html, 5 00:00:23,065 --> 00:00:28,215 desplácese hacia abajo hasta que vea este comentario allí llamado «El formulario va aquí». 6 00:00:28,215 --> 00:00:32,990 Vamos a reemplazar esto con el formulario de esta página web. 7 00:00:32,990 --> 00:00:35,715 Entonces, eliminemos eso y luego construyamos 8 00:00:35,715 --> 00:00:39,945 el formulario en esa ubicación particular dentro del div allí. 9 00:00:39,945 --> 00:00:41,855 Para empezar con el formulario, 10 00:00:41,855 --> 00:00:50,585 voy a usar la etiqueta HTML del formulario y construir el formulario dentro de esta etiqueta HTML. 11 00:00:50,585 --> 00:00:52,960 Por lo tanto, dentro de esta etiqueta de formulario, 12 00:00:52,960 --> 00:00:57,925 vamos a añadir los elementos de radio de nuestra forma. 13 00:00:57,925 --> 00:01:00,195 Entonces, dentro de este formulario, 14 00:01:00,195 --> 00:01:04,405 voy a dividir este formulario en varias filas allí. 15 00:01:04,405 --> 00:01:06,780 Para dividir su formulario en filas, 16 00:01:06,780 --> 00:01:17,020 simplemente puede usar un div con la class="form-group» y luego aplicarle la clase de fila. 17 00:01:20,370 --> 00:01:26,540 Por lo tanto, con esto, vamos a añadir en dos grupos de formularios aquí. 18 00:01:26,540 --> 00:01:29,795 Voy a copiar esto y luego pegarlo aquí abajo. 19 00:01:29,795 --> 00:01:34,055 Por lo tanto, puede ver que voy a agregar dos filas a este formulario aquí. 20 00:01:34,055 --> 00:01:36,690 Entonces, para agregar un elemento a este formulario, 21 00:01:36,690 --> 00:01:44,330 vamos a este div y luego comenzaré usando una etiqueta de etiqueta aquí. 22 00:01:44,330 --> 00:01:46,550 Y para las etiquetas de etiqueta, 23 00:01:46,550 --> 00:01:48,460 así que tendré dos filas; 24 00:01:48,460 --> 00:01:51,270 una que permite al usuario rellenar su nombre 25 00:01:51,270 --> 00:01:53,470 y la segunda para su apellido. 26 00:01:53,470 --> 00:02:01,530 Entonces, aquí es donde vamos a usar esa etiqueta para especificar la clase allí. 27 00:02:01,530 --> 00:02:09,080 Ahora, Además, Bootstrap nos permite utilizar la cuadrícula de Bootstrap 28 00:02:09,080 --> 00:02:19,300 para especificar cómo se van a presentar estos formularios anuncio así que aplicaré el col-md-2. 29 00:02:19,300 --> 00:02:27,720 Puede ver que he aplicado las clases de columna md-2 a este elemento en particular. 30 00:02:27,720 --> 00:02:31,360 Por lo tanto, este elemento en el formulario ocupará dos columnas. 31 00:02:31,360 --> 00:02:33,465 Por lo tanto, dentro de este elemento de formulario, 32 00:02:33,465 --> 00:02:37,950 hemos dividido cada fila en 12 columnas. 33 00:02:37,950 --> 00:02:40,940 Entonces, porque ya hemos usado la fila para el div, 34 00:02:40,940 --> 00:02:45,030 por lo que nos proporcionará 12 columnas dentro del div allí. 35 00:02:45,030 --> 00:02:52,560 Además, tengo que aplicar la etiqueta del formulario col de clase a esto. 36 00:02:52,560 --> 00:02:56,905 Entonces, esto es lo que me permite especificar una etiqueta aquí. 37 00:02:56,905 --> 00:02:58,395 Por lo tanto, para esta etiqueta, 38 00:02:58,395 --> 00:03:07,070 rellenaré la etiqueta como nombre y luego cerraré la etiqueta de etiqueta. 39 00:03:07,070 --> 00:03:10,485 Por lo tanto, esta etiqueta de etiqueta me permite dar una etiqueta, 40 00:03:10,485 --> 00:03:14,150 que ocupará dos columnas izquierdas en esta fila en particular. 41 00:03:14,150 --> 00:03:22,740 En el lado derecho, voy a usar otro div que la clase aplicó como col-md-10. 42 00:03:22,740 --> 00:03:28,420 Observe que la etiqueta anterior usaba col-md-2 allí. 43 00:03:28,420 --> 00:03:29,665 Entonces, para este div, 44 00:03:29,665 --> 00:03:32,755 voy a aplicar el col-md-10 allí. 45 00:03:32,755 --> 00:03:35,120 Y luego dentro de este div, 46 00:03:35,120 --> 00:03:38,700 voy a aplicar un elemento de entrada, 47 00:03:38,700 --> 00:03:42,750 que es del tipo de texto. 48 00:03:42,750 --> 00:03:46,770 Por lo tanto, si está familiarizado con los formularios de HTML, 49 00:03:46,770 --> 00:03:50,460 verá que estamos utilizando los elementos de formulario de HTML para 50 00:03:50,460 --> 00:03:55,910 crear ese formulario aquí, por lo que el cuadro de entrada aquí es del tipo de texto. 51 00:03:55,910 --> 00:04:00,410 Ahora, aquí es donde vamos a aplicar las clases Bootstrap a esto 52 00:04:00,410 --> 00:04:05,500 y la clase Bootstrap correspondiente para esto 53 00:04:05,500 --> 00:04:10,710 es el control de formulario y luego puedo especificar 54 00:04:10,710 --> 00:04:16,165 un ID para esto como nombre de pila. 55 00:04:16,165 --> 00:04:21,260 Por lo tanto, observe que este ID coincide con esta etiqueta para div. 56 00:04:21,260 --> 00:04:26,625 Entonces, nombre, y luego nombre como 57 00:04:26,625 --> 00:04:30,735 nombre y también especificaré 58 00:04:30,735 --> 00:04:37,190 un marcador de posición para esto, así que permítanme usar la siguiente línea aquí, 59 00:04:37,940 --> 00:04:46,890 marcador de posición como, estoy seguro de su conocimiento de HTML, 60 00:04:46,890 --> 00:04:52,020 usted entiende cómo se hace esta especificación aquí. 61 00:04:52,020 --> 00:04:59,355 Así que, con esto, ahora hemos creado nuestro primer elemento de formulario en nuestra forma. 62 00:04:59,355 --> 00:05:03,170 Echemos un vistazo rápido a la página web. 63 00:05:03,170 --> 00:05:08,310 Ir a nuestra página web, ahora puede ver cómo agregar elementos en el formulario ha creado 64 00:05:08,310 --> 00:05:14,515 este cuadro de texto de entrada y la etiqueta en el lado izquierdo. 65 00:05:14,515 --> 00:05:18,105 Ahora, voy a añadir otra fila con el apellido. 66 00:05:18,105 --> 00:05:23,150 Volviendo a mi contactus.html, 67 00:05:23,150 --> 00:05:29,215 déjame simplemente copiar esta parte y luego pegarla en el segundo div aquí, 68 00:05:29,215 --> 00:05:32,875 y luego entrar y editar eso. 69 00:05:32,875 --> 00:05:39,890 De primer nombre cambiaré eso a apellido. 70 00:05:39,890 --> 00:05:45,090 Asegúrese de completar todas las ediciones correctamente. 71 00:05:45,550 --> 00:05:49,470 Incluso una edición incorrecta faltante, 72 00:05:49,470 --> 00:05:53,210 hará que su formulario no funcione correctamente, así que asegúrese de que 73 00:05:53,210 --> 00:05:58,220 todas las cosas del primer nombre aquí sean reemplazadas por mi apellido. 74 00:05:58,220 --> 00:05:59,795 Por lo tanto, el apellido, 75 00:05:59,795 --> 00:06:02,640 control de formulario de texto md-10. 76 00:06:02,640 --> 00:06:11,510 El ID aquí debe ser el apellido y el nombre también debe 77 00:06:11,510 --> 00:06:14,945 ser el apellido y el marcador de posición de 78 00:06:14,945 --> 00:06:21,030 nuevo el apellido, por lo que se debe agregar en una segunda fila con el apellido. Al 79 00:06:21,030 --> 00:06:22,530 ir a su página web, 80 00:06:22,530 --> 00:06:24,000 usted puede ver ahora el formulario 81 00:06:24,000 --> 00:06:28,150 poco a poco en forma para que tenga el nombre y apellido. 82 00:06:28,150 --> 00:06:33,790 Ahora, vamos a añadir un elemento de entrada. 83 00:06:33,790 --> 00:06:38,260 Veremos cómo funciona esto a medida que agregamos el código. 84 00:06:38,260 --> 00:06:41,989 Pasando ahora a la siguiente parte del ejercicio, 85 00:06:41,989 --> 00:06:46,220 aquí vamos a añadir dos campos más en 86 00:06:46,220 --> 00:06:51,690 nuestro formulario aquí para introducir el número de teléfono y el ID de correo electrónico. 87 00:06:51,690 --> 00:06:54,870 Dado que la estructura básica del código es similar al 88 00:06:54,870 --> 00:06:58,610 nombre y el apellido que ya ha agregado al formulario, 89 00:06:58,610 --> 00:07:02,370 así que solo voy a copiar el código del nombre y 90 00:07:02,370 --> 00:07:08,000 el apellido y luego pegarlo aquí y luego modificar el código en consecuencia. 91 00:07:08,000 --> 00:07:11,910 Por lo tanto, he pegado el código del nombre y el apellido aquí. 92 00:07:11,910 --> 00:07:17,080 Vamos a seguir adelante y ahora modificarlo para convertirlo en campos que permitan 93 00:07:17,080 --> 00:07:22,745 al usuario ingresar el número de teléfono y el ID de correo electrónico. 94 00:07:22,745 --> 00:07:24,420 Entonces, para el número de teléfono, 95 00:07:24,420 --> 00:07:28,200 así que aquí ya tenemos el nombre y el apellido de arriba. 96 00:07:28,200 --> 00:07:34,380 Entonces, el tercero, voy a cambiar esto a la etiqueta para «telnum». 97 00:07:34,380 --> 00:07:38,745 Por lo tanto, esto es desde el número de teléfono y luego las clases, 98 00:07:38,745 --> 00:07:44,790 voy a aplicar una clase col-12 a este dicho que esta etiqueta estará en 99 00:07:44,790 --> 00:07:52,795 su propio sorteo cuando el formulario se muestre en tamaños de pantalla extra pequeños a pequeños. 100 00:07:52,795 --> 00:07:55,660 Y luego, para el tamaño de pantalla medio a mayor, 101 00:07:55,660 --> 00:07:59,945 esto se mostraría en dos columnas 102 00:07:59,945 --> 00:08:04,655 de esa fila en particular aquí, así que ese es el cambio que haremos allí. 103 00:08:04,655 --> 00:08:06,875 Y luego también, la etiqueta en sí, 104 00:08:06,875 --> 00:08:14,860 permítanme cambiar eso a número de teléfono de contacto, contacto Tel. 105 00:08:15,230 --> 00:08:18,915 Ahora, el número de teléfono en sí, 106 00:08:18,915 --> 00:08:22,600 dejaremos que el usuario lo introduzca como dos partes; una, 107 00:08:22,600 --> 00:08:25,485 que es el código de área y la segunda, 108 00:08:25,485 --> 00:08:28,225 que sería el número de teléfono real. 109 00:08:28,225 --> 00:08:31,120 Por lo tanto, voy a tomar esta parte del código, 110 00:08:31,120 --> 00:08:34,640 que era el campo de entrada que teníamos para 111 00:08:34,640 --> 00:08:40,315 el primer nombre y luego crear otra abajo aquí abajo, 112 00:08:40,315 --> 00:08:44,190 que voy a usar para el número de teléfono en sí. 113 00:08:44,190 --> 00:08:50,560 Y ahora vamos a convertir este primero en el campo para ingresar el código de área. 114 00:08:50,560 --> 00:08:52,540 También puede usarlo, por ejemplo, 115 00:08:52,540 --> 00:08:57,220 para el código de país si eso es lo que desea poner en el formulario. 116 00:08:57,220 --> 00:09:00,190 Entonces, para el código de área en sí, 117 00:09:00,190 --> 00:09:02,520 voy a solicitar el div, 118 00:09:02,520 --> 00:09:09,105 la classes="col-5 col-md-3 aquí». 119 00:09:09,105 --> 00:09:13,410 Por lo tanto, observe que para la pantalla media, 120 00:09:13,410 --> 00:09:16,805 tenemos dos columnas ocupadas por la etiqueta, 121 00:09:16,805 --> 00:09:20,630 tres columnas ocupadas por el código de área en sí y 122 00:09:20,630 --> 00:09:25,385 las siete columnas restantes lo daré al campo de texto aquí. 123 00:09:25,385 --> 00:09:29,650 Entonces, de manera similar, para el código de área digo col cinco. 124 00:09:29,650 --> 00:09:32,680 Por lo tanto, para pantallas extra pequeñas a pequeñas esto ocupará 125 00:09:32,680 --> 00:09:37,520 cinco columnas y luego para las siete columnas restantes, 126 00:09:37,520 --> 00:09:42,640 dejaremos que el número de teléfono se alimente a sí mismo ocupado en. 127 00:09:42,640 --> 00:09:48,510 Entonces, déjame cambiar el siguiente a col-7 y col-md-7 aquí. 128 00:09:49,540 --> 00:09:54,365 Ahora, este campo voy a cambiar esto a tel, 129 00:09:54,365 --> 00:09:58,965 tipo de entrada tel para el número de teléfono y la clase es control de formulario, 130 00:09:58,965 --> 00:10:08,830 el ID es código de área y el nombre es código de área y luego el marcador de posición, 131 00:10:08,830 --> 00:10:12,415 Voy a cambiar esto a código de área. 132 00:10:12,415 --> 00:10:14,215 Y la siguiente parte, 133 00:10:14,215 --> 00:10:21,885 vamos a cambiar esto también tipo tel e ID es telnum, 134 00:10:21,885 --> 00:10:28,060 el nombre es telnum y el marcador de posición, 135 00:10:28,060 --> 00:10:34,830 en sí, sería número tel. 136 00:10:34,830 --> 00:10:40,975 Por lo tanto, esto formará el campo de número de teléfono, 137 00:10:40,975 --> 00:10:42,840 que se ingresará como dos partes; 138 00:10:42,840 --> 00:10:45,160 el código de área y el número de teléfono. 139 00:10:45,160 --> 00:10:47,180 Por lo tanto, estamos utilizando, de nuevo, 140 00:10:47,180 --> 00:10:51,540 las clases de columna con 141 00:10:51,540 --> 00:10:57,260 el fin de estructurar cómo se muestran las dos partes del campo de entrada en el formulario allí. 142 00:10:57,260 --> 00:10:59,490 Ahora el último, por supuesto, 143 00:10:59,490 --> 00:11:02,940 esto sería para ID de correo electrónico, así que la etiqueta, 144 00:11:02,940 --> 00:11:08,595 lo convierto en ID de correo electrónico y luego la etiqueta en sí 145 00:11:08,595 --> 00:11:14,345 es correo electrónico y el tipo de entrada es correo electrónico. 146 00:11:14,345 --> 00:11:16,575 Ahora, cambiamos el tipo a correo electrónico, 147 00:11:16,575 --> 00:11:22,060 que está permitido en HTML para que más adelante si necesitamos hacer la validación del formulario, 148 00:11:22,060 --> 00:11:24,040 entonces sabemos que este campo debe contener 149 00:11:24,040 --> 00:11:28,730 sólo un tipo de correo electrónico de entrada allí, y el ID, en 150 00:11:28,730 --> 00:11:37,490 sí mismo, ID de correo electrónico y el nombre ID de correo electrónico y el marcador de posición. 151 00:11:38,600 --> 00:11:42,295 Correo electrónico. Eso es todo. 152 00:11:42,295 --> 00:11:47,335 Vamos a guardar los cambios y vamos a echar un vistazo al formulario actualizado. 153 00:11:47,335 --> 00:11:49,820 Al ir al formulario en el navegador, 154 00:11:49,820 --> 00:11:54,030 ahora verá dos filas adicionales agregadas a nuestro formulario. 155 00:11:54,030 --> 00:11:57,030 El nombre y el apellido se añadirán en la parte anterior del ejercicio. 156 00:11:57,030 --> 00:11:59,050 Entonces, aquí, tenemos el número de teléfono de contacto, 157 00:11:59,050 --> 00:12:01,805 que se divide en el código de área y el número de teléfono. 158 00:12:01,805 --> 00:12:06,515 Tenga en cuenta cómo hemos utilizado las clases de columna para colocar estos dos en 159 00:12:06,515 --> 00:12:11,650 el formulario en sí y luego el campo de correo electrónico aquí. 160 00:12:11,650 --> 00:12:15,775 Echemos un vistazo a lo mismo en un tamaño de pantalla extra pequeño. 161 00:12:15,775 --> 00:12:18,465 Por lo tanto, cuando vaya a un tamaño de pantalla extra pequeño, 162 00:12:18,465 --> 00:12:20,800 notará cómo se presenta el formulario en sí. 163 00:12:20,800 --> 00:12:24,690 Verá que la etiqueta está en la parte superior y luego el campo mismo en la parte inferior. 164 00:12:24,690 --> 00:12:26,055 Así que nombre, apellido. 165 00:12:26,055 --> 00:12:28,605 Observe cómo los 166 00:12:28,605 --> 00:12:33,160 campos de entrada de número de teléfono de contacto se colocan utilizando las clases de columna, 167 00:12:33,160 --> 00:12:34,855 por lo que el código de área aquí, 168 00:12:34,855 --> 00:12:36,085 y el número de teléfono, 169 00:12:36,085 --> 00:12:38,410 y luego el ID de correo electrónico aquí. 170 00:12:38,410 --> 00:12:41,630 Ahora, continuaremos con el ejercicio. 171 00:12:41,630 --> 00:12:44,145 Continuando en el siguiente paso, 172 00:12:44,145 --> 00:12:49,680 vamos a añadir en una casilla de verificación y luego vamos a añadir en un seleccionar dos o cuatro. 173 00:12:49,680 --> 00:12:51,680 Para agregar una casilla de verificación, 174 00:12:51,680 --> 00:12:57,590 vamos a copiar este grupo de formularios aquí para que lo agreguemos como otra fila aquí, 175 00:12:57,590 --> 00:13:01,595 y luego agregar en el grupo de formulario div aquí, 176 00:13:01,595 --> 00:13:04,970 y luego cerrar el div aquí. 177 00:13:04,970 --> 00:13:08,860 Y luego dentro de esta fila de grupo de formularios, 178 00:13:08,860 --> 00:13:11,280 por lo que esto nos da una fila más en el formulario. 179 00:13:11,280 --> 00:13:13,330 Entonces, dentro de esta fila de grupo de formularios, 180 00:13:13,330 --> 00:13:16,120 permítanme agregar primero la casilla de verificación. 181 00:13:16,120 --> 00:13:22,655 Entonces, para hacer eso, agregaremos un div con la class="col-md-6" para 182 00:13:22,655 --> 00:13:26,610 que vea que esto va a ocupar 183 00:13:26,610 --> 00:13:31,695 seis columnas en el tamaño de pantalla medio a extra grande, 184 00:13:31,695 --> 00:13:36,800 y luego offset-md-2, por lo que esto lo compensará a 185 00:13:36,800 --> 00:13:43,850 la derecha por dos columnas y luego mostrará la casilla de verificación allí. 186 00:13:43,850 --> 00:13:48,490 Ahora, dentro de aquí, para agregar una casilla de verificación, 187 00:13:48,490 --> 00:13:58,170 div con la clase="form-check» y 188 00:13:58,170 --> 00:14:07,200 dentro de esta clase de verificación de formulario agregaremos un tipo de entrada="casilla de verificación» 189 00:14:07,200 --> 00:14:17,990 y la class="form-check-input» y luego déjame ir a la siguiente línea y luego 190 00:14:17,990 --> 00:14:24,400 decir name="approve» y el 191 00:14:24,400 --> 00:14:32,560 id = «aprobar» y el valor hay una cadena vacía allí. 192 00:14:32,560 --> 00:14:35,360 Y a esta casilla de verificación, 193 00:14:35,360 --> 00:14:36,735 agreguemos una etiqueta. 194 00:14:36,735 --> 00:14:38,380 Por lo tanto, para agregar una etiqueta, 195 00:14:38,380 --> 00:14:41,940 vamos a ir y agregar en label 196 00:14:41,940 --> 00:14:50,885 class="form-check-label» y luego esta etiqueta 197 00:14:50,885 --> 00:14:53,775 es para esta casilla de verificación que acabamos de agregar. 198 00:14:53,775 --> 00:15:00,270 Por lo tanto, es por eso que vamos a decir «aprobar», así que tenga en cuenta que para la casilla de verificación, 199 00:15:00,270 --> 00:15:03,635 hemos dado el nombre y el ID como aprobación, por lo que aquí, 200 00:15:03,635 --> 00:15:07,090 vamos a guardar para la etiqueta para aprobar. 201 00:15:07,090 --> 00:15:09,560 Y luego dentro de esta etiqueta, 202 00:15:09,560 --> 00:15:19,250 especificaremos el contenido como «¿Podemos ponernos en contacto con usted?» 203 00:15:19,250 --> 00:15:24,240 Y luego guarda los cambios y vamos a echar un vistazo a nuestro formulario. Al 204 00:15:24,240 --> 00:15:25,810 ir a la página web, 205 00:15:25,810 --> 00:15:30,970 ahora puede ver que hemos añadido en una casilla de verificación junto con una etiqueta aquí y observar 206 00:15:30,970 --> 00:15:36,685 que esta etiqueta está en negrita debido al uso de la etiqueta «fuerte» allí, 207 00:15:36,685 --> 00:15:40,270 y lo hicimos offset-md-2. 208 00:15:40,270 --> 00:15:42,850 Así que es por eso que presionamos esta casilla de verificación hasta aquí. 209 00:15:42,850 --> 00:15:46,750 Esto no tiene una etiqueta aquí, pero en su lugar esto se empuja aquí, por 210 00:15:46,750 --> 00:15:50,765 lo que esa es la razón para usar offset-md-2 aquí, 211 00:15:50,765 --> 00:15:56,980 y este ocupa md-6, así que seis columnas aquí. 212 00:15:56,980 --> 00:15:59,180 Aún no hemos terminado con eso. 213 00:15:59,180 --> 00:16:03,075 Voy a agregar en la siguiente parte aquí, 214 00:16:03,075 --> 00:16:06,995 que es un cuadro de selección allí. 215 00:16:06,995 --> 00:16:11,230 Así que aplicaré un div más aquí con 216 00:16:11,230 --> 00:16:20,475 la class="col-md-3 offset-md-1" aquí. 217 00:16:20,475 --> 00:16:23,375 Y dentro de este div, 218 00:16:23,375 --> 00:16:27,160 voy a definir un selecto. 219 00:16:27,160 --> 00:16:30,590 Por lo tanto, de nuevo, a partir de su conocimiento de HTML, 220 00:16:30,590 --> 00:16:33,260 usted sabe lo que un selecto hace por usted. 221 00:16:33,260 --> 00:16:36,635 Ahora, la selección aplicará 222 00:16:36,635 --> 00:16:45,920 el control de formulario de clases, por lo que esta es la clase Bootstrap que estoy aplicando a la selección aquí, 223 00:16:46,130 --> 00:16:49,245 y cierre la selección. 224 00:16:49,245 --> 00:16:53,745 Y dentro de aquí, necesito dar las opciones para el selecto. 225 00:16:53,745 --> 00:16:57,500 Por lo tanto, estoy usando una selección simple aquí, 226 00:16:57,500 --> 00:17:02,570 por lo que la primera es una opción 227 00:17:02,570 --> 00:17:09,060 para teléfono o correo electrónico y cierre la opción. 228 00:17:09,060 --> 00:17:13,735 Por lo tanto, esto crea un elemento de selección en mi formulario, 229 00:17:13,735 --> 00:17:15,310 que tiene dos opciones; 230 00:17:15,310 --> 00:17:17,080 teléfono y correo electrónico, así que, 231 00:17:17,080 --> 00:17:18,505 vamos a guardar los cambios. 232 00:17:18,505 --> 00:17:20,180 Echando un vistazo a nuestra página web, 233 00:17:20,180 --> 00:17:26,960 ahora puede ver cómo se crea la casilla de selección de teléfono y correo electrónico aquí, así 234 00:17:26,960 --> 00:17:34,025 que esto me permite seleccionar cuál hacer y luego también puede marcar la casilla de verificación como esta. 235 00:17:34,025 --> 00:17:36,730 Por lo tanto, esto termina la siguiente fila. 236 00:17:36,730 --> 00:17:39,040 Añadamos una fila más, 237 00:17:39,040 --> 00:17:42,960 lo que permitirá al usuario escribir realmente sus comentarios. 238 00:17:42,960 --> 00:17:47,535 Por lo tanto, usaré un área de texto para formatear eso. 239 00:17:47,535 --> 00:17:51,615 Para el siguiente, voy a usar un área de texto. Por 240 00:17:51,615 --> 00:17:58,840 lo tanto, lo que voy a hacer es subir y copiar esta parte de correo electrónico. 241 00:17:58,840 --> 00:18:02,115 Soy demasiado perezoso para seguir escribiendo todo todo el tiempo. 242 00:18:02,115 --> 00:18:06,950 Por lo tanto, tiendo a cortar y pegar siempre que sea posible, pero para este, 243 00:18:06,950 --> 00:18:15,670 la etiqueta debe ser retroalimentación y la etiqueta del formulario de columna, 244 00:18:15,670 --> 00:18:24,575 y luego el texto real es, «Sus comentarios aquí». 245 00:18:24,575 --> 00:18:26,450 Así que esa es la etiqueta. 246 00:18:26,450 --> 00:18:28,795 Y luego, aquí, el segundo, 247 00:18:28,795 --> 00:18:32,530 voy a formatear este. 248 00:18:32,530 --> 00:18:34,140 En lugar de tipo de entrada, 249 00:18:34,140 --> 00:18:39,085 voy a cambiar eso a un área de texto, 250 00:18:39,085 --> 00:18:42,815 y luego no necesito el tipo allí. 251 00:18:42,815 --> 00:18:51,400 Área de texto, la clase sigue siendo control de formulario y el ID es retroalimentación. El 252 00:18:51,400 --> 00:18:58,890 nombre es una retroalimentación y el marcador de posición no es necesario 253 00:18:58,890 --> 00:19:02,880 aquí y en su lugar cámbielo a cuántas filas 254 00:19:02,880 --> 00:19:06,890 quiero dar de la retroalimentación para el área de texto? 255 00:19:06,890 --> 00:19:10,340 Así que voy a decir 12 filas y luego cerrar el texto. 256 00:19:10,340 --> 00:19:15,215 Así que observe cómo he incluido el área de texto en mi forma. 257 00:19:15,215 --> 00:19:16,680 Guarde los cambios. 258 00:19:16,680 --> 00:19:19,560 Echa un vistazo. Al ir a mi página web, 259 00:19:19,560 --> 00:19:23,910 ahora ves que mi formulario toma su forma completa aquí. 260 00:19:23,910 --> 00:19:25,470 Tienes el nombre, apellidos, 261 00:19:25,470 --> 00:19:28,050 teléfono, correo electrónico, y luego los comentarios. 262 00:19:28,050 --> 00:19:30,720 El área de texto de 12 filas. 263 00:19:30,720 --> 00:19:36,080 Ahora, necesitará un botón en el que el usuario debe hacer clic para enviar sus comentarios. 264 00:19:36,080 --> 00:19:40,715 Por lo tanto, vamos a añadir un botón de envío a este formulario. 265 00:19:40,715 --> 00:19:44,030 Volviendo al formulario de nuevo, 266 00:19:44,030 --> 00:19:47,195 cree una fila más aquí usando 267 00:19:47,195 --> 00:19:55,715 el div aquí con la fila del grupo de formularios 268 00:19:55,715 --> 00:19:59,405 aquí, y dentro de aquí voy a agregar un botón aquí. 269 00:19:59,405 --> 00:20:02,300 Entonces, diría, div 270 00:20:02,340 --> 00:20:10,500 class="offset-md-2" porque quiero que mi botón se 271 00:20:10,500 --> 00:20:13,880 coloque justo debajo de todos los campos que 272 00:20:13,880 --> 00:20:17,850 tengo aquí para que las dos columnas de la izquierda se usen para la etiqueta. 273 00:20:17,850 --> 00:20:21,750 Entonces, el botón de enviar no necesita una etiqueta, así que solo 274 00:20:21,750 --> 00:20:25,890 lo presionaré hacia la derecha aquí y luego 275 00:20:25,890 --> 00:20:35,090 diría «col-md-10" para que esto ocupe las 10 columnas restantes allí. 276 00:20:35,090 --> 00:20:37,310 Y luego dentro de esos div, 277 00:20:37,310 --> 00:20:40,045 voy a agregar un botón allí. 278 00:20:40,045 --> 00:20:45,020 Por lo tanto, cuando agregue un botón a su formulario, 279 00:20:45,020 --> 00:20:50,190 use la etiqueta de botón aquí con un tipo enviar. 280 00:20:50,190 --> 00:20:56,440 Por lo tanto, este es el botón de enviar para su formulario allí y clase. 281 00:20:56,440 --> 00:21:02,890 Recuerde clases de botones, botón primario, 282 00:21:02,890 --> 00:21:07,890 por lo que esto crearía un botón azul oscuro en su formulario y 283 00:21:07,890 --> 00:21:15,110 luego cierre el botón allí, 284 00:21:15,110 --> 00:21:19,805 y luego simplemente voy a entrar y dentro del botón, 285 00:21:19,805 --> 00:21:28,725 voy a dar el nombre como «Enviar comentarios» y luego guardar los cambios. 286 00:21:28,725 --> 00:21:31,295 Ahora, nuestro formulario está completo. 287 00:21:31,295 --> 00:21:36,600 Entonces, echemos un vistazo a la versión final de nuestro formulario. 288 00:21:36,600 --> 00:21:38,660 Ir a nuestra página web, 289 00:21:38,660 --> 00:21:40,875 ahora puede ver el formulario completado. 290 00:21:40,875 --> 00:21:43,135 Todos estos campos que ya hemos visto, 291 00:21:43,135 --> 00:21:46,610 el botón en la parte inferior con la frase «Enviar 292 00:21:46,610 --> 00:21:51,265 comentarios» y el botón de color azul oscuro debido al uso del botón «primario». 293 00:21:51,265 --> 00:21:58,870 Por lo tanto, esto completa el formulario que queríamos crear en nuestra página web. 294 00:21:58,870 --> 00:22:02,380 Con esto, completamos este ejercicio, 295 00:22:02,380 --> 00:22:07,135 donde hemos visto cómo podemos construir un formulario e incluirlo en nuestra página web. 296 00:22:07,135 --> 00:22:10,130 Trabajará con formularios en algunos de 297 00:22:10,130 --> 00:22:13,720 los ejercicios posteriores, incluida su segunda asignación. 298 00:22:13,720 --> 00:22:19,310 Este es un buen momento para que hagas un buen comentario con los formularios de mensaje.