1 00:00:01,200 --> 00:00:01,520 Todo bien. 2 00:00:01,530 --> 00:00:07,050 Entonces, en los próximos videos vamos a enfocarnos en cada equipo en todos los formularios, de modo que los formularios son la forma 3 00:00:07,590 --> 00:00:14,010 en que recibimos información de un usuario, ya sea para registrarse en una página para comentar una foto y subir una foto para elegir un color 4 00:00:14,010 --> 00:00:14,910 para elegir una cita. 5 00:00:14,940 --> 00:00:19,650 Hay tantas cosas diferentes que hacer con formularios y en realidad es relativamente simple y lo 6 00:00:19,650 --> 00:00:19,840 superaba. 7 00:00:19,840 --> 00:00:23,450 Solo hay dos elementos importantes que vamos a aprender aquí. 8 00:00:24,270 --> 00:00:30,840 vamos a terminar aprendiendo sobre las validaciones de nuestros datos. ¿Cómo nos aseguramos de que alguien complete parte de la reforma? 9 00:00:30,840 --> 00:00:36,600 Así que vamos a centrarnos en la etiqueta del formulario, la etiqueta de entrada, la etiqueta y luego también 10 00:00:36,600 --> 00:00:41,860 Alguien no puede dejar nuestra contraseña en blanco o enviarla en blanco o algo así. 11 00:00:41,910 --> 00:00:46,900 Entonces, para comenzar, hagamos una encuesta rápida de algunos de los formularios que se encuentran en la vida cotidiana. 12 00:00:46,980 --> 00:00:51,330 Así que tengo algunas imágenes aquí de sitios como Twitter Facebook Google. 13 00:00:51,690 --> 00:00:54,280 Echemos un vistazo y rompamos algunos de estos. 14 00:00:54,300 --> 00:00:57,420 Así que aquí está el formulario de inicio de sesión para Facebook. 15 00:00:57,600 --> 00:01:03,530 Tenemos un lugar donde podemos escribir algo de texto en el texto y poner otra entrada donde ingresamos 16 00:01:03,530 --> 00:01:04,050 las contraseñas. 17 00:01:04,140 --> 00:01:07,920 Lo más probable es que cuando ingrese su contraseña esté punteada para que no vea la contraseña. 18 00:01:08,340 --> 00:01:09,990 Y luego una casilla de verificación. 19 00:01:10,260 --> 00:01:14,500 Y cuando hacemos clic en este botón, se envía todo esto. 20 00:01:14,640 --> 00:01:16,160 Entonces agrupa estos juntos. 21 00:01:16,290 --> 00:01:20,370 No tenemos un botón para enviar un correo electrónico con un botón de contraseña con un solo botón para la casilla de verificación. 22 00:01:20,370 --> 00:01:22,110 Todo va a la vez. 23 00:01:22,110 --> 00:01:23,910 Lo mismo aquí cuando nos registramos. 24 00:01:23,910 --> 00:01:29,560 Tenemos más entradas, cinco entradas de texto diferentes, tres menús desplegables diferentes. 25 00:01:29,580 --> 00:01:33,790 Estas se llaman etiquetas de selección y luego dos cosas llamadas botones de radio. 26 00:01:34,050 --> 00:01:39,900 Y finalmente, un botón de registro que va a tomar todo esto y enviarlo a Facebook para 27 00:01:39,900 --> 00:01:40,760 que lo use. 28 00:01:41,100 --> 00:01:48,210 Entonces, lo que vamos a aprender hoy es la etiqueta extranjera y estas formas van a ser un poco tontas. 29 00:01:48,450 --> 00:01:51,730 No van a hacer nada realmente. 30 00:01:51,870 --> 00:01:53,940 Necesitamos tener una configuración de back-end. 31 00:01:53,950 --> 00:01:58,050 Necesitamos una base de datos, necesitamos algo de lógica y un código de back-end para hacer algo con el formulario. 32 00:01:58,050 --> 00:02:02,450 Entonces, por ahora, se verán como si esto fuera capaz de recrear esto. 33 00:02:02,640 --> 00:02:08,340 Pero cuando haces clic en Registrarse o haces clic en Iniciar sesión o buscas en Google nuestros foros realmente van a 34 00:02:08,340 --> 00:02:09,790 hacer algo de esa lógica. 35 00:02:10,110 --> 00:02:13,550 Simplemente van a ser el usuario frontal que enfrenta una parte de las cosas. 36 00:02:13,950 --> 00:02:15,780 Entonces, lo primero es la etiqueta del foro. 37 00:02:16,080 --> 00:02:22,920 Entonces, la etiqueta del foro es básicamente un shell o un contenedor para todos estos tipos diferentes de entradas. 38 00:02:22,920 --> 00:02:26,710 Entonces esta es una etiqueta de foro alrededor de todo esto. 39 00:02:26,910 --> 00:02:30,570 Esta podría ser una etiqueta de formulario alrededor de todos estos y demás. 40 00:02:30,570 --> 00:02:36,030 Aquí hay otra etiqueta de formulario con solo hacer una etiqueta de foro que realmente no ve nada en la página. 41 00:02:36,240 --> 00:02:38,270 Lo veremos en solo un segundo. 42 00:02:38,280 --> 00:02:41,630 Básicamente es solo un contenedor y ponemos todas nuestras diferentes entradas allí. 43 00:02:41,640 --> 00:02:47,540 Por lo tanto, las casillas de verificación y los botones, y los menús y las imágenes en color, todos van dentro de un huevo formado. 44 00:02:48,090 --> 00:02:52,320 Entonces, hay dos atributos importantes que pasarán más tiempo con esto cuando lleguemos al back-end. 45 00:02:52,770 --> 00:02:58,410 Así que trate de no obsesionarse con exactamente cómo funciona esto, pero un formulario va a enviar una solicitud a alguna 46 00:02:58,410 --> 00:03:01,980 parte que envíe datos desde el formulario a un servidor en alguna parte. 47 00:03:02,040 --> 00:03:06,840 Entonces, la primera acción parcial especificará dónde enviar los datos. 48 00:03:07,320 --> 00:03:08,550 ¿Va a Google? 49 00:03:08,580 --> 00:03:13,830 ¿Se va a registrar en la página? Se cerrará. Aprenderemos mucho más sobre cómo lo hacemos 50 00:03:13,830 --> 00:03:16,570 en la sección de fondo de esta clase. 51 00:03:16,800 --> 00:03:21,180 Y luego la segunda parte es qué tipo de solicitud de HSDPA enviar. 52 00:03:21,780 --> 00:03:25,230 Entonces podríamos enviar una solicitud de obtención o podríamos enviar una solicitud postal. 53 00:03:25,800 --> 00:03:28,930 Y de nuevo, esta es otra cosa en la que vamos a pasar mucho más tiempo. 54 00:03:29,130 --> 00:03:35,220 Pero la simple versión generalizada que hacemos una solicitud de obtención cuando estamos haciendo algo como buscar o 55 00:03:35,220 --> 00:03:41,280 recuperar datos, estamos tratando de obtener información y hacemos una solicitud posterior cuando estamos enviando datos que 56 00:03:41,280 --> 00:03:45,770 queremos que se agreguen a una base de datos publicada a un servidor. 57 00:03:45,780 --> 00:03:52,440 Entonces, en estos ejemplos, aquí cuando busca en Google, presiona ingresar o hace clic y busca que va 58 00:03:52,440 --> 00:03:54,070 a hacer una solicitud. 59 00:03:54,180 --> 00:03:56,160 En realidad, no agrega nada a la base de datos. 60 00:03:56,160 --> 00:03:57,770 No está cambiando nada. 61 00:03:57,840 --> 00:04:00,630 Simplemente se trata de recuperar datos. 62 00:04:00,710 --> 00:04:03,070 Obtener datos es una solicitud de obtención. 63 00:04:03,450 --> 00:04:08,420 Estos aquí sin embargo para registrarse en Facebook o registrarse en Twitter. 64 00:04:08,460 --> 00:04:14,040 haces clic en Registrarse, toma tus datos y los agrega a la base de datos de Twitter. 65 00:04:14,340 --> 00:04:17,370 Esas serán solicitudes posteriores cuando ingresaste los datos y cuando 66 00:04:17,370 --> 00:04:21,860 Así que de nuevo vamos a trabajar en eso un poco más adelante en esta clase. 67 00:04:21,990 --> 00:04:26,440 Entonces, por ahora, solo familiarícese con la acción y el método, y con el hecho de que existen. 68 00:04:26,640 --> 00:04:30,480 Entonces, la etiqueta de entrada es lo que realmente entra dentro de nuestras formas. 69 00:04:30,600 --> 00:04:37,020 Es lo que va a crear las diferentes entradas que vemos aquí, una entrada de texto y una contraseña ingresan 70 00:04:37,020 --> 00:04:38,120 un botón de opción. 71 00:04:38,190 --> 00:04:40,020 En realidad, no crea un menú desplegable. 72 00:04:40,020 --> 00:04:45,360 en el ejercicio posterior pero crea todo tipo de entradas diferentes para la entrada del usuario. 73 00:04:45,360 --> 00:04:46,580 Entonces hablaremos de eso 74 00:04:46,620 --> 00:04:48,840 Así que tengo algunos ejemplos aquí. 75 00:04:48,900 --> 00:04:53,130 Todos son exactamente iguales excepto por este tipo de atributo. 76 00:04:53,310 --> 00:04:57,210 Entonces, si type es igual a text obtenemos un tipo de cuadro de texto igual a date. 77 00:04:57,290 --> 00:04:59,970 Obtienes este pequeño tipo de selector de fecha igual a color. 78 00:05:00,270 --> 00:05:04,230 Obtienes un selector de color del archivo de Eiffel obtenemos un selector de archivos, escribe la casilla de verificación de Pickle. 79 00:05:04,260 --> 00:05:05,680 Recibimos una casilla de verificación. 80 00:05:05,850 --> 00:05:11,110 Así que de hecho voy a buscar endian y buscar entrada. 81 00:05:11,110 --> 00:05:18,660 Y a medida que lo haga, verá que a medida que me desplazo hacia los atributos debajo del texto, aparece una lista de 82 00:05:18,660 --> 00:05:20,970 todos los tipos posibles que podemos especificar. 83 00:05:21,550 --> 00:05:23,440 Y hay alrededor de 30 o 40 de ellos aquí. 84 00:05:23,790 --> 00:05:27,800 Y para ser sincero, hay mucho aquí que probablemente nunca necesitarás usar. 85 00:05:28,110 --> 00:05:30,810 Pero hay algunos que usa todo el tiempo. 86 00:05:30,810 --> 00:05:32,660 Y entonces realmente nos enfocaremos en eso. 87 00:05:32,700 --> 00:05:40,410 Esas son cosas como el botón de fecha de la contraseña de correo electrónico de texto y luego algunos de los otros como el color. 88 00:05:41,040 --> 00:05:43,830 No puede usar muy a menudo. 89 00:05:43,830 --> 00:05:46,120 Definitivamente me gustaría tener más oportunidades de hacer fotos en color. 90 00:05:46,130 --> 00:05:50,910 Es mi favorito de las entradas, pero quiero que sepan que hay muchas opciones diferentes aquí. 91 00:05:53,820 --> 00:05:59,060 Entonces, para hacer un formulario simplemente tomamos una etiqueta de formulario y la llenamos con algunas etiquetas de entrada. 92 00:05:59,160 --> 00:06:00,960 Así que aquí hay un ejemplo realmente simple. 93 00:06:00,960 --> 00:06:02,230 Tenemos dos entradas. 94 00:06:02,360 --> 00:06:06,830 Igual que el texto escriba la contraseña de Pickle y nos hace esta buena forma aquí. 95 00:06:07,140 --> 00:06:12,190 Y puede ver que cuando completamos este primer tipo equivale al texto, simplemente se ve como un texto normal. 96 00:06:12,280 --> 00:06:17,550 Y a medida que completamos el tipo equivale a la contraseña, solo se muestran los campos de contraseña oculta.