formularios en html555

21
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

Upload: ktziitha-lendaa

Post on 04-Jul-2015

170 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Formularios en html555

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

Page 2: Formularios en html555

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)

Page 3: Formularios en html555

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

Page 4: Formularios en html555

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

Page 5: Formularios en html555

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í

Page 6: Formularios en html555

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

Page 7: Formularios en html555

Y al guardar y ejecutarlo saldrá así

Page 8: Formularios en html555

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í

Page 9: Formularios en html555

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

escoger un sí o un no

Y al guardar y ejecutarlo saldrá así

Page 10: Formularios en html555

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í

Page 11: Formularios en html555

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)

Page 12: Formularios en html555

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

Page 13: Formularios en html555

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

Page 14: Formularios en html555

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

Page 15: Formularios en html555

Y al guardar y ejecutar saldrá así

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

Page 16: Formularios en html555

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

barrita

Y al guardar y ejecutar saldrá así

Page 17: Formularios en html555

Y al presionarla la barrita me saldrá así

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

seleccionar números

Page 18: Formularios en html555

Y al guardar y ejecutar saldrá así

Y ya por ultimo nuestra página queda así

Page 19: Formularios en html555

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

quieras en body

Page 20: Formularios en html555

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

Page 21: Formularios en html555

Gracias