1
00:00:00,480 --> 00:00:06,810
Vamos a comenzar a trabajar con la parte del formulario dañada un contacto de todos los campos son obligatorios

2
00:00:07,570 --> 00:00:10,770
y tenemos tres campos así como el botón de Añadir.

3
00:00:10,820 --> 00:00:15,790
Vamos a comenzar abriendo estudio Cott y aquí es donde tengo esta parte de agenda de contactos aquí

4
00:00:15,810 --> 00:00:21,150
voy a crear un nuevo día puedes ver que aparece esta parte que contiene el formulario de color amarillo

5
00:00:21,690 --> 00:00:30,000
está centrado respecto a la página y tienen una pequeña sombra aquí entonces eso serán tres clases diferentes

6
00:00:31,020 --> 00:00:34,080
algo que me gusta mucho de estudio Codes que ha instalado Emet.

7
00:00:34,080 --> 00:00:40,140
Por lo tanto puedes poner así nada más como beige amarillo que sería el background amarillo contenedor

8
00:00:40,710 --> 00:00:47,240
y sombra y eso te va a crear tres clases un dip con tres clases entonces aquí adentro voy a colocar

9
00:00:47,240 --> 00:00:54,170
un form y va a tener un Airy que voy a llamar contacto y la idea es que como vamos a estar inyectando

10
00:00:54,470 --> 00:01:00,110
los registros utilizando Ayax PHP voy a estar haciendo todo por medio de Ayax.

11
00:01:00,110 --> 00:01:05,360
Por lo tanto le doy un Heydi para poder seleccionar este elemento con JavaScript también lo puedes hacer

12
00:01:05,360 --> 00:01:13,650
con clases no hay ningún problema y Auction va a ser signo de gato porque no no va a llevar nuestro

13
00:01:13,650 --> 00:01:19,200
archivo de PHP sino que toda la inyección de los datos todas las inserciones en la base de datos van

14
00:01:19,200 --> 00:01:21,530
a ser por medio de Ayax.

15
00:01:21,630 --> 00:01:29,530
Entonces el Aktion de vivir vacío cerramos y ponemos un form y dentro voy a colocar un Legend con el

16
00:01:29,620 --> 00:01:38,510
cancelarán y vamos a colocar lo que viene siendo esta parte añada un campo y todos los campos son obligatorios

17
00:01:38,900 --> 00:01:44,120
entonces vamos a copiar este texto lo tengo aquí y lo que viene siendo la parte de abajo que está un

18
00:01:44,120 --> 00:01:51,380
poco más pequeña va a estar dentro de una Spahn podríamos colocar también un Jedi ahí o parrafos etcétera

19
00:01:51,440 --> 00:01:58,250
pero una Span también es válido entonces copiamos todos los campos son obligatorios y guardamos cambios

20
00:01:58,280 --> 00:02:00,920
y abrimos el proyecto y de momento llevamos a esta parte.

21
00:02:00,950 --> 00:02:06,140
Vamos a continuar agregando el resto de los campos que requiere el formulario.

22
00:02:06,170 --> 00:02:11,610
De momento voy a colapsar este archivo para que puedas ver mejor en el vídeo se iba a colocar un Dib

23
00:02:11,640 --> 00:02:17,490
que se va a llamar Campos que va a contener cada uno de los campos de nuestro de nuestro pequeño formulario

24
00:02:18,150 --> 00:02:28,060
ya sepan a quién le Abul a ponerle nombre y nombre que es el labore aquí voy a tener que crear un extra

25
00:02:28,060 --> 00:02:33,820
que va a decir campo porque tenemos campos que va a ser como el contenedor estaremos utilizando Flex

26
00:02:33,820 --> 00:02:40,270
box para esa parte entonces la idea siempre es que tengas un contenedor cuando trabajas con facebooks

27
00:02:41,270 --> 00:02:47,760
una ley y después voy a colocar aquí un input que va a ser el tipo de texto el nombre de las personas

28
00:02:48,870 --> 00:02:56,270
colocaron Pleiss Goldar y a decir sin nombre contacto y también una idea porque voy a estar seleccionando

29
00:02:56,270 --> 00:03:02,210
estos valores por JavaScript de esta forma puedo acceder a lo que viene siendo los valores que el usuario

30
00:03:02,210 --> 00:03:08,360
haya colocado ahí si guardamos cambios abrimos nuevamente el proyecto y de momento tenemos nombre con

31
00:03:08,360 --> 00:03:15,350
nombre de contacto como Pleiss fólder y se cree que en lo que viene siendo el Leibowitz se activa lo

32
00:03:15,350 --> 00:03:18,920
que es el limbo porque tenemos este foro eso es lo que hace el foro.

33
00:03:19,010 --> 00:03:25,930
Si tienes una idea que se llame igual al darle click activa también ese campo a crear dos copias más

34
00:03:25,960 --> 00:03:33,340
porque tenemos distintos campos tenemos un nombre tenemos una empresa y tenemos un teléfono que voy

35
00:03:33,340 --> 00:03:43,870
a colocar el siguiente campo va a ser colocar se va a llamar empresa y que va a decir el nombre empresa

36
00:03:47,100 --> 00:03:58,380
y el aire iba a decir nombre en este caso a decir empresa y finalmente tenemos lo que es el teléfono

37
00:03:59,890 --> 00:04:06,970
teléfono podremos utilizar lo que es el teléfono uno de los nuevos campos de HTML HTML5 Estel y esto

38
00:04:06,970 --> 00:04:12,750
va a validar que sean números lo que se inserte aquí que lo que el usuario agregue parezca lo que es

39
00:04:12,760 --> 00:04:13,660
un número.

40
00:04:13,660 --> 00:04:18,970
De todos modos estaremos validando por medio de JavaScript para mostrar una notificación como ésta que

41
00:04:19,050 --> 00:04:24,760
cuando hay añadirse aquí todos los campos son obligatorios flota y luego desaparece pero utilizando

42
00:04:24,760 --> 00:04:28,060
Twitter tendremos la validación de HTML5.

43
00:04:28,300 --> 00:04:34,900
Igual estaremos viendo más detalles un poco más adelante como deshabilitar y habilitar nuestra validación.

44
00:04:34,900 --> 00:04:39,360
Entonces tenemos inputs del Pleiss folder etc. Todo se ve bastante bien.

45
00:04:39,370 --> 00:04:45,550
Aquí va a crear un campo extra ponerlo como campo y lo va a poner como enviar tiene dos clases que iba

46
00:04:45,550 --> 00:04:55,120
a colocar un input que va a ser de tipo submit y va a tener el valio que va a decir qué voy a ver nada

47
00:04:55,120 --> 00:05:03,150
más como se llama Añadir es añadir podríamos utilizar un botón Submit también pero me gusta más utilizar

48
00:05:03,150 --> 00:05:12,390
input guardamos cambios y recargamos y tenemos tres campos y el botón de Añadir y con eso se va viendo

49
00:05:12,390 --> 00:05:16,200
bastante bien lo que es la agenda de contactos más o menos lo que tenemos aquí.

50
00:05:16,200 --> 00:05:20,010
Falta agregar un poco de CSS que comenzaremos a hacerlo en el próximo video.