SlideShare una empresa de Scribd logo
1 de 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
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

Más contenido relacionado

La actualidad más candente

Manual de un párrafo en word
Manual de un párrafo en  wordManual de un párrafo en  word
Manual de un párrafo en wordZulma Beatriz
 
Trabajo final investigacion y lo que nos gusto
Trabajo final investigacion y lo que nos gustoTrabajo final investigacion y lo que nos gusto
Trabajo final investigacion y lo que nos gustoMaria Rene Vargas Merida
 
Practicas de informática aplicada a la educación
Practicas de informática aplicada a la educaciónPracticas de informática aplicada a la educación
Practicas de informática aplicada a la educación983299098
 
Manuales excel 1.3
Manuales excel 1.3Manuales excel 1.3
Manuales excel 1.3lariossequen
 
Cómo realizar viñetas en word
Cómo realizar viñetas en  wordCómo realizar viñetas en  word
Cómo realizar viñetas en wordZulma Beatriz
 
Práctica 1 open office
Práctica 1 open officePráctica 1 open office
Práctica 1 open officefernandito220
 
manual de procesador de textos
manual de procesador de textosmanual de procesador de textos
manual de procesador de textosfrancisgabo
 
Numerar Paginas Utilizando Secciones Word 2007
Numerar Paginas Utilizando Secciones Word 2007Numerar Paginas Utilizando Secciones Word 2007
Numerar Paginas Utilizando Secciones Word 2007cosmotheoro
 
Principales botones de la barra de herramienta
Principales botones de la barra de herramientaPrincipales botones de la barra de herramienta
Principales botones de la barra de herramientanuryanis pertuz
 
Abrir excel, agregar bordes
Abrir excel, agregar bordesAbrir excel, agregar bordes
Abrir excel, agregar bordesrochofo
 
Abrir el programa de word
Abrir el programa de wordAbrir el programa de word
Abrir el programa de wordItzel Guadalupe
 
Mis momentos
Mis momentosMis momentos
Mis momentosLaCasy
 

La actualidad más candente (16)

Manual de un párrafo en word
Manual de un párrafo en  wordManual de un párrafo en  word
Manual de un párrafo en word
 
Trabajo final investigacion y lo que nos gusto
Trabajo final investigacion y lo que nos gustoTrabajo final investigacion y lo que nos gusto
Trabajo final investigacion y lo que nos gusto
 
Practicas de informática aplicada a la educación
Practicas de informática aplicada a la educaciónPracticas de informática aplicada a la educación
Practicas de informática aplicada a la educación
 
Manuales excel 1.3
Manuales excel 1.3Manuales excel 1.3
Manuales excel 1.3
 
Excel
ExcelExcel
Excel
 
taller de word 30
taller de word 30 taller de word 30
taller de word 30
 
Cómo realizar viñetas en word
Cómo realizar viñetas en  wordCómo realizar viñetas en  word
Cómo realizar viñetas en word
 
Formulario en excel
Formulario en excelFormulario en excel
Formulario en excel
 
Práctica 1 open office
Práctica 1 open officePráctica 1 open office
Práctica 1 open office
 
1
11
1
 
manual de procesador de textos
manual de procesador de textosmanual de procesador de textos
manual de procesador de textos
 
Numerar Paginas Utilizando Secciones Word 2007
Numerar Paginas Utilizando Secciones Word 2007Numerar Paginas Utilizando Secciones Word 2007
Numerar Paginas Utilizando Secciones Word 2007
 
Principales botones de la barra de herramienta
Principales botones de la barra de herramientaPrincipales botones de la barra de herramienta
Principales botones de la barra de herramienta
 
Abrir excel, agregar bordes
Abrir excel, agregar bordesAbrir excel, agregar bordes
Abrir excel, agregar bordes
 
Abrir el programa de word
Abrir el programa de wordAbrir el programa de word
Abrir el programa de word
 
Mis momentos
Mis momentosMis momentos
Mis momentos
 

Destacado

Destacado (10)

Que es multimedia
Que es multimediaQue es multimedia
Que es multimedia
 
2 creación de figuras utilizando código
2 creación de figuras utilizando código2 creación de figuras utilizando código
2 creación de figuras utilizando código
 
Multimedia sistemas de información
Multimedia sistemas de información Multimedia sistemas de información
Multimedia sistemas de información
 
1 sintesis de la funcion
1 sintesis de la funcion1 sintesis de la funcion
1 sintesis de la funcion
 
Presentación2
Presentación2Presentación2
Presentación2
 
Degradados
DegradadosDegradados
Degradados
 
Pagina para subir
Pagina para subirPagina para subir
Pagina para subir
 
Presentación2
Presentación2Presentación2
Presentación2
 
Presentación2
Presentación2Presentación2
Presentación2
 
3 sprite
3 sprite 3 sprite
3 sprite
 

Similar a Formularios en html555

El primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosEl primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosKmilitha Estrada
 
Correspondencias en word
Correspondencias en wordCorrespondencias en word
Correspondencias en wordZulma Beatriz
 
Action scrip pipe
Action scrip pipeAction scrip pipe
Action scrip pipe070810pipe
 
Objetos geometrico en flash
Objetos geometrico en flashObjetos geometrico en flash
Objetos geometrico en flashDanita Viteri
 
TRABAJO INFORMATICO
TRABAJO INFORMATICOTRABAJO INFORMATICO
TRABAJO INFORMATICOmireya1998
 
Trabajo de Informatica.
Trabajo de Informatica.Trabajo de Informatica.
Trabajo de Informatica.Yariely Nicole
 
Trabajo de Infomatica.
Trabajo de Infomatica.Trabajo de Infomatica.
Trabajo de Infomatica.Yariely Nicole
 
Primeros ejercicios en action script
Primeros ejercicios en action scriptPrimeros ejercicios en action script
Primeros ejercicios en action scripthjxbfajds
 
Tutorial slidehare subir ppt al blogs1
Tutorial slidehare subir ppt al blogs1Tutorial slidehare subir ppt al blogs1
Tutorial slidehare subir ppt al blogs1GUSTAVO
 
Tutorial slidehare subir_ppt_al_blogsnuevo
Tutorial slidehare subir_ppt_al_blogsnuevoTutorial slidehare subir_ppt_al_blogsnuevo
Tutorial slidehare subir_ppt_al_blogsnuevobrigeth
 
Primeros ejercicios en action script
Primeros ejercicios en action scriptPrimeros ejercicios en action script
Primeros ejercicios en action scripttaniamabel
 

Similar a Formularios en html555 (20)

Formulario html 5
Formulario html 5Formulario html 5
Formulario html 5
 
Action script
Action scriptAction script
Action script
 
Formularios html5
Formularios html5Formularios html5
Formularios html5
 
Pajunas de html5
Pajunas de html5Pajunas de html5
Pajunas de html5
 
El primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidosEl primer código que vamos a utilizar es el del nombre y el de los apellidos
El primer código que vamos a utilizar es el del nombre y el de los apellidos
 
Correspondencias en word
Correspondencias en wordCorrespondencias en word
Correspondencias en word
 
Action scrip pipe
Action scrip pipeAction scrip pipe
Action scrip pipe
 
Objetos geometrico en flash
Objetos geometrico en flashObjetos geometrico en flash
Objetos geometrico en flash
 
4 tipos en clase
4 tipos en clase4 tipos en clase
4 tipos en clase
 
TRABAJO INFORMATICO
TRABAJO INFORMATICOTRABAJO INFORMATICO
TRABAJO INFORMATICO
 
Desarrollo 8
Desarrollo 8Desarrollo 8
Desarrollo 8
 
Trabajo de Word.
Trabajo de Word.Trabajo de Word.
Trabajo de Word.
 
Trabajo de Informatica.
Trabajo de Informatica.Trabajo de Informatica.
Trabajo de Informatica.
 
Trabajo de Infomatica.
Trabajo de Infomatica.Trabajo de Infomatica.
Trabajo de Infomatica.
 
Utmo programacion
Utmo programacionUtmo programacion
Utmo programacion
 
Primeros ejercicios en action script
Primeros ejercicios en action scriptPrimeros ejercicios en action script
Primeros ejercicios en action script
 
Manual De Flash
Manual De FlashManual De Flash
Manual De Flash
 
Tutorial slidehare subir ppt al blogs1
Tutorial slidehare subir ppt al blogs1Tutorial slidehare subir ppt al blogs1
Tutorial slidehare subir ppt al blogs1
 
Tutorial slidehare subir_ppt_al_blogsnuevo
Tutorial slidehare subir_ppt_al_blogsnuevoTutorial slidehare subir_ppt_al_blogsnuevo
Tutorial slidehare subir_ppt_al_blogsnuevo
 
Primeros ejercicios en action script
Primeros ejercicios en action scriptPrimeros ejercicios en action script
Primeros ejercicios en action script
 

Más de Ktziitha Lendaa

Más de Ktziitha Lendaa (20)

3kt continuacion de la 2forma de clic d epelicula
3kt continuacion de la 2forma de clic d epelicula3kt continuacion de la 2forma de clic d epelicula
3kt continuacion de la 2forma de clic d epelicula
 
2 kt clips de película
2 kt clips de película2 kt clips de película
2 kt clips de película
 
1 kt fundamentales de as
1 kt fundamentales de as1 kt fundamentales de as
1 kt fundamentales de as
 
Condicionales
CondicionalesCondicionales
Condicionales
 
Kt condicionales en php
Kt condicionales en phpKt condicionales en php
Kt condicionales en php
 
Puertos pc
Puertos pcPuertos pc
Puertos pc
 
Segunda parte
Segunda parteSegunda parte
Segunda parte
 
Para hacer actionscrip
Para hacer actionscrip Para hacer actionscrip
Para hacer actionscrip
 
Paisaje de flash
Paisaje de flashPaisaje de flash
Paisaje de flash
 
2da pagina web con html5 y doctype
2da pagina web con html5 y doctype2da pagina web con html5 y doctype
2da pagina web con html5 y doctype
 
Html 5 y css
Html 5 y cssHtml 5 y css
Html 5 y css
 
Objetos agrupados y no agrupados
Objetos agrupados y no agrupadosObjetos agrupados y no agrupados
Objetos agrupados y no agrupados
 
Programación
ProgramaciónProgramación
Programación
 
Programación
ProgramaciónProgramación
Programación
 
Programación
ProgramaciónProgramación
Programación
 
Programación
ProgramaciónProgramación
Programación
 
Para el blog oritika
Para el blog oritikaPara el blog oritika
Para el blog oritika
 
Algoritmos para subir al blog kt
Algoritmos para subir al blog ktAlgoritmos para subir al blog kt
Algoritmos para subir al blog kt
 
Conexiones internas de una computadora conosco mi computador
Conexiones internas de una computadora conosco mi computadorConexiones internas de una computadora conosco mi computador
Conexiones internas de una computadora conosco mi computador
 
Resolucion digital multimedia
Resolucion digital multimediaResolucion digital multimedia
Resolucion digital multimedia
 

Formularios en html555

  • 1. 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
  • 2. 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)
  • 3. 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
  • 4. 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
  • 5. 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í
  • 6. 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
  • 7. Y al guardar y ejecutarlo saldrá así
  • 8. 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í
  • 9. Posteriormente seguimos aumentando el código, con una opción para escoger un sí o un no Y al guardar y ejecutarlo saldrá así
  • 10. 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í
  • 11. 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)
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. Y al guardar y ejecutar saldrá así Y al presionar encima del color saldrá la paleta de colores
  • 16. Ahora aumentamos este código seleccionado, para que aparezca una barrita Y al guardar y ejecutar saldrá así
  • 17. Y al presionarla la barrita me saldrá así Finalizando escribiremos el código que esta seleccionado, que será para seleccionar números
  • 18. Y al guardar y ejecutar saldrá así Y ya por ultimo nuestra página queda así
  • 19. Y si quieres darle color a tu página aumenta el código del color que tú quieras en body
  • 20. Y al guardar el resultado final de nuestra página será este