SlideShare a Scribd company logo
1 of 14
Páginas web
Formulario
en
HTML
5
Díaz Jojoa Andrés Felipe
11 computación
Ignacio Realpe
al ejecutarlo nos va dar la opcion de poner nuestro nombre como lo muestra la imagen de abajo
lo guardaremos como HTML 5. Y cada cambio que realicemos en el codigo antes de ejecutarlo lo
guardaremos
Escojeremos el lugar donde lo iremos a guardar y lo guardaremos con el nombre de formulario en
html5
Ahora escribiremos un nuevo codigo para escribir nuestros apellidos
Al ejecutarlo podremos ver el resultado en donde podemos escribir nuestros datos. Miremos la
siguiente imagen
Ahora colocaremos una lista en la que saldra la opcion de que curso esta cursando
Se nos ejecutara de la manera siguiente como lo muestra la imagen
Ahora crearemos un contrasañe para que salga en nuestra ejecucion el de abajo es nuestro codigo
la contraseña nos va dar en puntitos para mayor seguridad
Seguimos con nuestro formulario esta vez vamos hacer dos botones que nos dé un decisión y
selección que digan si o no
Al ejecutarlo nos va dar el siguiente resultado
Ahora aremos una nueva etiqueta para poder colocar un archivo en nuestro formulario para que
nos dé la orden de poner un documento en nuestro formulario
Al ejecutarlo nos aparecerá no se ha seleccionado un archivo pero si tú le das clic en seleccionar
un archivo se irá a tu ordenador a busca tu documento
Seguiremos con nuestro código.
Ahora haremos un botón donde diga enviar. Al ejecutarlo nos dará el siguiente resultado
Ahora lo que crearemos es una advertencia por ejemplo los cuadros que se deben llenar a lo que
el usuario de enviar y uno de ellos no esté llenado que le envié una advertencia
La ejecución aparece en la parte de abajo y así aparecerá nuestro formulario
Ahora crearemos una casilla donde pidan tu correo electrónico así como lo muestra el
código
al ejecutarlo
nos dará la opción de colocar nuestro correo
Ahora a nuestro formulario le pondremos calendario y paleta de colores nuestro código es el
siguiente
Al ejecutarlo podremos ver el resultado. Saldrá la paleta de colores y el calendario
Ahora le pondremos una lista de números para que el usuario pueda escogen y una barra para
controlar color o también calendario
NUESTRO RESULTADO FINAL

More Related Content

What's hot

Mini Agenda Tutorial de programacion
Mini Agenda Tutorial de programacionMini Agenda Tutorial de programacion
Mini Agenda Tutorial de programacionkencymoncada
 
Presentacion word
Presentacion word Presentacion word
Presentacion word kitzia89
 
Tutorial de programacion Para Crear Una Mini Agenda Personal de estudiantes
Tutorial de programacion Para Crear Una Mini Agenda Personal de estudiantesTutorial de programacion Para Crear Una Mini Agenda Personal de estudiantes
Tutorial de programacion Para Crear Una Mini Agenda Personal de estudianteskencymoncada
 
Microsoft office word 2007
Microsoft office word 2007Microsoft office word 2007
Microsoft office word 2007elwycho
 
Técnicas de soporte: Microsoft outlook
Técnicas de soporte: Microsoft outlookTécnicas de soporte: Microsoft outlook
Técnicas de soporte: Microsoft outlookDani Catena Felipe
 
Traspaso correos outlook a gmail
Traspaso correos outlook a gmailTraspaso correos outlook a gmail
Traspaso correos outlook a gmailVenan Llona
 
Blog3nay
Blog3nayBlog3nay
Blog3naynaye02
 
como crear un formulario con una base de datos.
como crear un formulario con una base de datos.como crear un formulario con una base de datos.
como crear un formulario con una base de datos.melyinjohana
 
tarea de ticPresentación1
tarea de ticPresentación1tarea de ticPresentación1
tarea de ticPresentación1leopoldo190
 
Ejercicio 1 margenes y bordes
Ejercicio 1 margenes y bordesEjercicio 1 margenes y bordes
Ejercicio 1 margenes y bordeswistonlopez
 
Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12guest035fce1
 
6 1 insertar_tablas
6 1 insertar_tablas6 1 insertar_tablas
6 1 insertar_tablasZuleika
 
Maquetacion de pagina
Maquetacion de paginaMaquetacion de pagina
Maquetacion de pagina070810pipe
 
Manual de herramientas aprendidas en word. excel, p. point, project, y visio
Manual de herramientas aprendidas en word. excel, p. point, project, y  visioManual de herramientas aprendidas en word. excel, p. point, project, y  visio
Manual de herramientas aprendidas en word. excel, p. point, project, y visioGalo Tang
 
Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010
Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010
Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010Funcionarios Eficientes
 
Centro de bachillerato tecnológico industrial y de servicios
Centro de bachillerato tecnológico industrial y de serviciosCentro de bachillerato tecnológico industrial y de servicios
Centro de bachillerato tecnológico industrial y de serviciosAlvaro Reyes
 
Como combinar correspondencia en word 2010
Como combinar correspondencia en word 2010Como combinar correspondencia en word 2010
Como combinar correspondencia en word 2010Tatiana Camacho Delgado
 

What's hot (20)

Mini Agenda Tutorial de programacion
Mini Agenda Tutorial de programacionMini Agenda Tutorial de programacion
Mini Agenda Tutorial de programacion
 
Excel
ExcelExcel
Excel
 
Presentacion word
Presentacion word Presentacion word
Presentacion word
 
Tutorial de programacion Para Crear Una Mini Agenda Personal de estudiantes
Tutorial de programacion Para Crear Una Mini Agenda Personal de estudiantesTutorial de programacion Para Crear Una Mini Agenda Personal de estudiantes
Tutorial de programacion Para Crear Una Mini Agenda Personal de estudiantes
 
Microsoft office word 2007
Microsoft office word 2007Microsoft office word 2007
Microsoft office word 2007
 
Técnicas de soporte: Microsoft outlook
Técnicas de soporte: Microsoft outlookTécnicas de soporte: Microsoft outlook
Técnicas de soporte: Microsoft outlook
 
Traspaso correos outlook a gmail
Traspaso correos outlook a gmailTraspaso correos outlook a gmail
Traspaso correos outlook a gmail
 
Blog3nay
Blog3nayBlog3nay
Blog3nay
 
Blog3
Blog3Blog3
Blog3
 
como crear un formulario con una base de datos.
como crear un formulario con una base de datos.como crear un formulario con una base de datos.
como crear un formulario con una base de datos.
 
tarea de ticPresentación1
tarea de ticPresentación1tarea de ticPresentación1
tarea de ticPresentación1
 
Ejercicio 1 margenes y bordes
Ejercicio 1 margenes y bordesEjercicio 1 margenes y bordes
Ejercicio 1 margenes y bordes
 
Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12Pasos Para La Conecxion De Visual Con Access Importante 12
Pasos Para La Conecxion De Visual Con Access Importante 12
 
6 1 insertar_tablas
6 1 insertar_tablas6 1 insertar_tablas
6 1 insertar_tablas
 
Maquetacion de pagina
Maquetacion de paginaMaquetacion de pagina
Maquetacion de pagina
 
Manual de herramientas aprendidas en word. excel, p. point, project, y visio
Manual de herramientas aprendidas en word. excel, p. point, project, y  visioManual de herramientas aprendidas en word. excel, p. point, project, y  visio
Manual de herramientas aprendidas en word. excel, p. point, project, y visio
 
Creacion de mi 1º documento
Creacion de mi 1º documentoCreacion de mi 1º documento
Creacion de mi 1º documento
 
Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010
Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010
Cómo numerar las páginas pares e impares de forma diferente en word 2007 y 2010
 
Centro de bachillerato tecnológico industrial y de servicios
Centro de bachillerato tecnológico industrial y de serviciosCentro de bachillerato tecnológico industrial y de servicios
Centro de bachillerato tecnológico industrial y de servicios
 
Como combinar correspondencia en word 2010
Como combinar correspondencia en word 2010Como combinar correspondencia en word 2010
Como combinar correspondencia en word 2010
 

Viewers also liked

Presentación fundación telefónica coolhunting - 13 de julio 2010 - m anuel s...
Presentación fundación telefónica  coolhunting - 13 de julio 2010 - m anuel s...Presentación fundación telefónica  coolhunting - 13 de julio 2010 - m anuel s...
Presentación fundación telefónica coolhunting - 13 de julio 2010 - m anuel s...Asociación Española de Coolhunting
 
Community manager tu proyecto
Community manager tu proyectoCommunity manager tu proyecto
Community manager tu proyectoSUPLANETA
 
Electricidad1 duque uchima_180604
Electricidad1 duque uchima_180604Electricidad1 duque uchima_180604
Electricidad1 duque uchima_180604nidiau
 
Paisaje nocturno
Paisaje nocturnoPaisaje nocturno
Paisaje nocturno070810pipe
 
Java client socket-20070327
Java client socket-20070327Java client socket-20070327
Java client socket-20070327Tsu-Fen Han
 
O RELEVO
O RELEVOO RELEVO
O RELEVOANDREA
 

Viewers also liked (8)

Presentación fundación telefónica coolhunting - 13 de julio 2010 - m anuel s...
Presentación fundación telefónica  coolhunting - 13 de julio 2010 - m anuel s...Presentación fundación telefónica  coolhunting - 13 de julio 2010 - m anuel s...
Presentación fundación telefónica coolhunting - 13 de julio 2010 - m anuel s...
 
Funciones
FuncionesFunciones
Funciones
 
Community manager tu proyecto
Community manager tu proyectoCommunity manager tu proyecto
Community manager tu proyecto
 
Informática proyecto final-blog
Informática proyecto final-blogInformática proyecto final-blog
Informática proyecto final-blog
 
Electricidad1 duque uchima_180604
Electricidad1 duque uchima_180604Electricidad1 duque uchima_180604
Electricidad1 duque uchima_180604
 
Paisaje nocturno
Paisaje nocturnoPaisaje nocturno
Paisaje nocturno
 
Java client socket-20070327
Java client socket-20070327Java client socket-20070327
Java client socket-20070327
 
O RELEVO
O RELEVOO RELEVO
O RELEVO
 

Similar to Formulario en HTML5: crea un formulario completo con validaciones, calendario y más

Similar to Formulario en HTML5: crea un formulario completo con validaciones, calendario y más (20)

Formulario en html 5
Formulario en html 5Formulario en html 5
Formulario en html 5
 
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
 
Pajunas de html5
Pajunas de html5Pajunas de html5
Pajunas de html5
 
Formularios en html555
Formularios en html555Formularios en html555
Formularios en html555
 
X nuevo trabajo de word
X nuevo trabajo de wordX nuevo trabajo de word
X nuevo trabajo de word
 
Base de datos access michael tutorial completo
Base de datos access michael tutorial completoBase de datos access michael tutorial completo
Base de datos access michael tutorial completo
 
Utmo programacion
Utmo programacionUtmo programacion
Utmo programacion
 
Intro Power Builder - JUGM 2010
Intro Power Builder - JUGM 2010Intro Power Builder - JUGM 2010
Intro Power Builder - JUGM 2010
 
Crear blogs
Crear blogsCrear blogs
Crear blogs
 
Action script
Action scriptAction script
Action script
 
Formularios html5
Formularios html5Formularios html5
Formularios html5
 
Informe u4 tema3.1.1
Informe u4 tema3.1.1Informe u4 tema3.1.1
Informe u4 tema3.1.1
 
Universidad politécnica salesiana
Universidad politécnica salesianaUniversidad politécnica salesiana
Universidad politécnica salesiana
 
Action scrip pipe
Action scrip pipeAction scrip pipe
Action scrip pipe
 
Unidad 4 tema 4
Unidad 4 tema 4Unidad 4 tema 4
Unidad 4 tema 4
 
Unidad 4 tema 4
Unidad 4 tema 4Unidad 4 tema 4
Unidad 4 tema 4
 
Menu de programas
Menu de programasMenu de programas
Menu de programas
 
Unidad4tema4 210404040205
Unidad4tema4 210404040205Unidad4tema4 210404040205
Unidad4tema4 210404040205
 
Unidad4tema4 210404040205
Unidad4tema4 210404040205Unidad4tema4 210404040205
Unidad4tema4 210404040205
 
Sintesis de la funcion
Sintesis de la funcionSintesis de la funcion
Sintesis de la funcion
 

More from 070810pipe

Paisaje nocturno
Paisaje nocturnoPaisaje nocturno
Paisaje nocturno070810pipe
 
Pagina audio y video
Pagina audio y videoPagina audio y video
Pagina audio y video070810pipe
 
Variables php pipe
Variables php pipeVariables php pipe
Variables php pipe070810pipe
 
Estructura de un objeto pipe
Estructura de un objeto pipeEstructura de un objeto pipe
Estructura de un objeto pipe070810pipe
 
Pipe programcion 1
Pipe programcion 1Pipe programcion 1
Pipe programcion 1070810pipe
 
Presentacion flash
Presentacion flashPresentacion flash
Presentacion flash070810pipe
 
Microprocesadores ya
Microprocesadores yaMicroprocesadores ya
Microprocesadores ya070810pipe
 
Microprocesadores ya
Microprocesadores yaMicroprocesadores ya
Microprocesadores ya070810pipe
 

More from 070810pipe (17)

Degradados
DegradadosDegradados
Degradados
 
Paisaje nocturno
Paisaje nocturnoPaisaje nocturno
Paisaje nocturno
 
Puertos
PuertosPuertos
Puertos
 
Pagina audio y video
Pagina audio y videoPagina audio y video
Pagina audio y video
 
Paginas web 2
Paginas web 2Paginas web 2
Paginas web 2
 
Pagina web 1
Pagina web 1Pagina web 1
Pagina web 1
 
Bolas
BolasBolas
Bolas
 
Action scip
Action scipAction scip
Action scip
 
Algoritmos 1
Algoritmos 1Algoritmos 1
Algoritmos 1
 
11111
1111111111
11111
 
Variables php pipe
Variables php pipeVariables php pipe
Variables php pipe
 
Estructura de un objeto pipe
Estructura de un objeto pipeEstructura de un objeto pipe
Estructura de un objeto pipe
 
Pipe programcion 1
Pipe programcion 1Pipe programcion 1
Pipe programcion 1
 
Memoria ram
Memoria ramMemoria ram
Memoria ram
 
Presentacion flash
Presentacion flashPresentacion flash
Presentacion flash
 
Microprocesadores ya
Microprocesadores yaMicroprocesadores ya
Microprocesadores ya
 
Microprocesadores ya
Microprocesadores yaMicroprocesadores ya
Microprocesadores ya
 

Formulario en HTML5: crea un formulario completo con validaciones, calendario y más

  • 3. Díaz Jojoa Andrés Felipe 11 computación Ignacio Realpe
  • 4. al ejecutarlo nos va dar la opcion de poner nuestro nombre como lo muestra la imagen de abajo lo guardaremos como HTML 5. Y cada cambio que realicemos en el codigo antes de ejecutarlo lo guardaremos Escojeremos el lugar donde lo iremos a guardar y lo guardaremos con el nombre de formulario en html5
  • 5. Ahora escribiremos un nuevo codigo para escribir nuestros apellidos Al ejecutarlo podremos ver el resultado en donde podemos escribir nuestros datos. Miremos la siguiente imagen Ahora colocaremos una lista en la que saldra la opcion de que curso esta cursando
  • 6. Se nos ejecutara de la manera siguiente como lo muestra la imagen Ahora crearemos un contrasañe para que salga en nuestra ejecucion el de abajo es nuestro codigo la contraseña nos va dar en puntitos para mayor seguridad
  • 7. Seguimos con nuestro formulario esta vez vamos hacer dos botones que nos dé un decisión y selección que digan si o no Al ejecutarlo nos va dar el siguiente resultado
  • 8. Ahora aremos una nueva etiqueta para poder colocar un archivo en nuestro formulario para que nos dé la orden de poner un documento en nuestro formulario Al ejecutarlo nos aparecerá no se ha seleccionado un archivo pero si tú le das clic en seleccionar un archivo se irá a tu ordenador a busca tu documento
  • 9. Seguiremos con nuestro código. Ahora haremos un botón donde diga enviar. Al ejecutarlo nos dará el siguiente resultado Ahora lo que crearemos es una advertencia por ejemplo los cuadros que se deben llenar a lo que el usuario de enviar y uno de ellos no esté llenado que le envié una advertencia
  • 10. La ejecución aparece en la parte de abajo y así aparecerá nuestro formulario
  • 11. Ahora crearemos una casilla donde pidan tu correo electrónico así como lo muestra el código al ejecutarlo
  • 12. nos dará la opción de colocar nuestro correo Ahora a nuestro formulario le pondremos calendario y paleta de colores nuestro código es el siguiente
  • 13. Al ejecutarlo podremos ver el resultado. Saldrá la paleta de colores y el calendario Ahora le pondremos una lista de números para que el usuario pueda escogen y una barra para controlar color o también calendario