Formularios en html555

Preview:

Citation preview

Formularios en html5 Primero que todo abrimos el programa Notepad++

Y empezamos escribiendo nuestras primeras etiquetas, las cuales son las

más importantes para crear una página web

Posteriormente insertamos la etiqueta que esta de color rojo en nuestra

imagen la cual nos ira sirviendo para crear nuestro formulario

Ahora para colocaremos el titulo o el nombre del usuario que utilizara este

formulario, para esto colocamos la etiqueta que está en la siguiente img de

color rojo (aquel input será tu nombre)

Posteriormente vamos a guardar y guardar como

Y colocamos nuestra carpeta en donde tú quieras

Una vez guardado, vamos a Run y Launch in chrome

Y al ejecutarlo aparecerá así.

Y si quieres escribes tu nombre, como lo miras en el ejemplo

Ahora crearemos la casilla para el apellido, para ello aumentamos el

siguiente código que aparece en color rojo

Nuevamente volvemos a guardar y al ejecutarlo de la misma manera que el

anterior, saldrá lo siguiente

Ahora para hacer las casillas separadas únicamente aumentamos el (br)

como observamos en la imagen

Y al guardar y ejecutar sale así

Posteriormente seguimos aumentando el código que esta seleccionado en

rojo en la siguiente imagen

Y al guardar y ejecutarlo saldrá así, nos aparece el nombre Curso y una

flecha en donde se desplegaran mas opciones

Ahora aumentamos la etiqueta anterior varias veces como miramos a

continuación

Y al guardar y ejecutarlo saldrá así

Ahora aumentaremos una casilla para la contraseña, para lo cual

aumentamos el código que esta seleccionado en la siguiente imagen

Y al guardar y ejecutar saldrá así

Posteriormente seguimos aumentando el código, con una opción para

escoger un sí o un no

Y al guardar y ejecutarlo saldrá así

Seguimos aumentando el código que esta seleccionado en rojo, que servirá

para seleccionar un archivo y enviar

Y al guardar y ejecutar saldrá así

Posteriormente en la parte de arriba escribimos la palabra Required

Y al guardarlo y ejecutarlo saldrá lo siguiente, al no escribir nada en la

casilla de nombre saldrá una pequeña advertencia que dirá (completa este

campo)

Y si seguimos aumentando el Required a la casilla de nombre, apellidos y

contraseña, saldrá la advertencia para todas, en caso que no se escriba

Posteriormente para crear la casilla del correo escribimos el código que

esta seleccionado con color rojo en la siguiente imagen

Y al guardar y ejecutar saldrá lo siguiente

Ahora para crear la casilla de la fecha escribimos el código que esta

seleccionado con color rojo en la siguiente imagen

Guardamos y al ejecutarlo nos saldrá así

Ahora para crear la casilla del color escribimos el código que esta

seleccionado con color rojo siguiente imagen

Y al guardar y ejecutar saldrá así

Y al presionar encima del color saldrá la paleta de colores

Ahora aumentamos este código seleccionado, para que aparezca una

barrita

Y al guardar y ejecutar saldrá así

Y al presionarla la barrita me saldrá así

Finalizando escribiremos el código que esta seleccionado, que será para

seleccionar números

Y al guardar y ejecutar saldrá así

Y ya por ultimo nuestra página queda así

Y si quieres darle color a tu página aumenta el código del color que tú

quieras en body

Y al guardar el resultado final de nuestra página será este

Gracias