Vamos a comenzar a trabajar con la parte del formulario dañada un contacto de todos los campos son obligatorios
y tenemos tres campos así como el botón de Añadir.
Vamos a comenzar abriendo estudio Cott y aquí es donde tengo esta parte de agenda de contactos aquí
voy a crear un nuevo día puedes ver que aparece esta parte que contiene el formulario de color amarillo
está centrado respecto a la página y tienen una pequeña sombra aquí entonces eso serán tres clases diferentes
algo que me gusta mucho de estudio Codes que ha instalado Emet.
Por lo tanto puedes poner así nada más como beige amarillo que sería el background amarillo contenedor
y sombra y eso te va a crear tres clases un dip con tres clases entonces aquí adentro voy a colocar
un form y va a tener un Airy que voy a llamar contacto y la idea es que como vamos a estar inyectando
los registros utilizando Ayax PHP voy a estar haciendo todo por medio de Ayax.
Por lo tanto le doy un Heydi para poder seleccionar este elemento con JavaScript también lo puedes hacer
con clases no hay ningún problema y Auction va a ser signo de gato porque no no va a llevar nuestro
archivo de PHP sino que toda la inyección de los datos todas las inserciones en la base de datos van
a ser por medio de Ayax.
Entonces el Aktion de vivir vacío cerramos y ponemos un form y dentro voy a colocar un Legend con el
cancelarán y vamos a colocar lo que viene siendo esta parte añada un campo y todos los campos son obligatorios
entonces vamos a copiar este texto lo tengo aquí y lo que viene siendo la parte de abajo que está un
poco más pequeña va a estar dentro de una Spahn podríamos colocar también un Jedi ahí o parrafos etcétera
pero una Span también es válido entonces copiamos todos los campos son obligatorios y guardamos cambios
y abrimos el proyecto y de momento llevamos a esta parte.
Vamos a continuar agregando el resto de los campos que requiere el formulario.
De momento voy a colapsar este archivo para que puedas ver mejor en el vídeo se iba a colocar un Dib
que se va a llamar Campos que va a contener cada uno de los campos de nuestro de nuestro pequeño formulario
ya sepan a quién le Abul a ponerle nombre y nombre que es el labore aquí voy a tener que crear un extra
que va a decir campo porque tenemos campos que va a ser como el contenedor estaremos utilizando Flex
box para esa parte entonces la idea siempre es que tengas un contenedor cuando trabajas con facebooks
una ley y después voy a colocar aquí un input que va a ser el tipo de texto el nombre de las personas
colocaron Pleiss Goldar y a decir sin nombre contacto y también una idea porque voy a estar seleccionando
estos valores por JavaScript de esta forma puedo acceder a lo que viene siendo los valores que el usuario
haya colocado ahí si guardamos cambios abrimos nuevamente el proyecto y de momento tenemos nombre con
nombre de contacto como Pleiss fólder y se cree que en lo que viene siendo el Leibowitz se activa lo
que es el limbo porque tenemos este foro eso es lo que hace el foro.
Si tienes una idea que se llame igual al darle click activa también ese campo a crear dos copias más
porque tenemos distintos campos tenemos un nombre tenemos una empresa y tenemos un teléfono que voy
a colocar el siguiente campo va a ser colocar se va a llamar empresa y que va a decir el nombre empresa
y el aire iba a decir nombre en este caso a decir empresa y finalmente tenemos lo que es el teléfono
teléfono podremos utilizar lo que es el teléfono uno de los nuevos campos de HTML HTML5 Estel y esto
va a validar que sean números lo que se inserte aquí que lo que el usuario agregue parezca lo que es
un número.
De todos modos estaremos validando por medio de JavaScript para mostrar una notificación como ésta que
cuando hay añadirse aquí todos los campos son obligatorios flota y luego desaparece pero utilizando
Twitter tendremos la validación de HTML5.
Igual estaremos viendo más detalles un poco más adelante como deshabilitar y habilitar nuestra validación.
Entonces tenemos inputs del Pleiss folder etc. Todo se ve bastante bien.
Aquí va a crear un campo extra ponerlo como campo y lo va a poner como enviar tiene dos clases que iba
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
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
input guardamos cambios y recargamos y tenemos tres campos y el botón de Añadir y con eso se va viendo
bastante bien lo que es la agenda de contactos más o menos lo que tenemos aquí.
Falta agregar un poco de CSS que comenzaremos a hacerlo en el próximo video.