SlideShare una empresa de Scribd logo
1 de 10
Trabajo de desarrollo
Nombre: Cristhian Arévalo
Curso:3º Informática «C»
¿Qué son formularios web?
O Un formulario web dentro de una página
web permite al usuario introducir datos los
cuales son enviados a un servidor para
ser procesados. Los formularios web se
parecen a los formularios de papel porque
los internautas llenan dichos formularios
usando casillas de selección, botones de
opción, o campos de texto.
O Además de servir como plantillas para nueva
información, los formularios web también pueden ser
usados para consultar y mostrar información
existente en forma similar a los formularios de
combinación de correspondencia, incorporando las
mismas ventajas. La separación entre la estructura y
los datos subyacentes de un mensaje permite a
ambos variar independientemente. El uso de
formularios webs para este propósito evita los
problemas asociados con la creación explícita de
páginas web separadas para cada registro en una
base de datos.
Formularios XHTML/HTML
O Un formulario en XHTML o HTML es la forma más común de usar un
formulario en línea. Utilizando solamente las etiquetas <form> e <input> es
posible diseñar la mayoría de formularios de las aplicaciones web.1​
O Los siguientes elementos pueden formar parte de un formulario del lado del
usuario:
O input2​
O type = (para indicar uno de los tipos de control del formulario)
O text: una caja de texto que permite ingresar una sola línea de texto.
O checkbox: una casilla de selección.
O radio: un botón de opción.
O file: un examinador para subir archivos.
O reset: un botón de reinicio que al activarse le dice al navegador que restaure
los valores del formulario a su estado inicial
O submit: un botón que le dice al navegador que realice la acción del formulario
(referido típicamente a mandarlo al servidor).
O Algunas aplicaciones web utilizan otros elementos de formulario que no se
pueden crear con <input>. Las listas desplegables y las áreas de texto disponen
de sus propias etiquetas (<select> y <textarea> respectivamente):3​
O select: una lista de elementos que el usuario puede seleccionar.
O textarea: muy parecido a la caja de texto pero con la posibilidad de escribir
múltiples líneas.
O La imagen de ejemplo de la derecha muestra todos estos elementos:
O Una caja de texto que permite ingresar un nombre.
O Un par de botones de opción para seleccionar el sexo.
O Una lista de colores de ojos a elegir.
O Un par de casillas de selección que son seleccionadas si se aplican al usuario.
O Un área de texto que describe la habilidad atlética.
O Un botón submit para enviar la información al servidor.
Estos elementos básicos proveen la mayor cantidad posible de elementos de las
interfaces gráficas, pero no todos. Por ejemplo, no hay equivalentes a un
combobox, globos de ayudas, vista de árbol, o vista tabular.
Una vista tabular, sin embargo, puede ser imitada usando una tabla HTML
estándar con elementos input text en cada celda. Una vista de árbol puede ser
imitada por medio de tablas anidadas o bien, semánticamente hablando, con listas
anidadas. Muchos de estos elementos están disponibles por medio de bibliotecas
de JavaScript.
Aplicaciones que permitan
crearlos
1. Google Forms
Google Forms es una de las mejores
herramientas ya que es gratuita y puede
guardar automáticamente los resultados del
formulario en una hoja de cálculo de Google
para que puedas realizar un análisis
avanzado. Además es muy fácil y rápido
editar todos los campos que necesites.
2. Wufoo
O Wufoo tiene los campos que necesitas para crear un
buen formulario con un sistema de arrastrar y soltar,
incluidos los campos de pago que funcionan con una
variedad de servicios y una herramienta de subida de
archivos que permite a los usuarios enviar imágenes y
documentos a través del formulario. También incluye
más de un centenar de plantillas y temas para ayudarte a
empezar rápidamente.
3. JotForm
O Si hay una competición para comprobar qué herramienta
es la más rápida, probablemente ganaría JotForm.
Simplemente ve a jotform.com, haz clic en “Plantillas” y
en “Usar plantilla” y segundos más tarde tendrás un
formulario casi completo. Puedes personalizar los
campos o arrastrar y soltar para añadir alguno nuevo.
Luego solo tienes que hacer clic en Publicar y copiar el
enlace del formulario para utilizarlo.
4. Typeform
O Hay formularios y luego hay Typeforms. Todas las
herramientas mencionadas anteriormente muestran todo
el formulario a la vez y llenan la pantalla con pequeños
cuadros de texto y viñetas. Typeform lo hace diferente y
muestra solamente la pregunta que tienes que responder
en ese momento acompañada de un diseño interactivo.
Tendrás que probar una de sus demos para ver lo
divertido que es hacer los formularios.
5. Zoho Forms
O Lo mejor de todo es que Zoho Forms está construido
para que puedas trabajar en equipo. Incluso se pueden
aprobar las respuestas de los formularios o ver las
estadísticas desde la aplicación móvil de Zoho Forms o
compartir los datos con las otras aplicaciones de Zoho
que tu equipo esté usando.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (17)

Formulario En Word
Formulario En WordFormulario En Word
Formulario En Word
 
Ejercicio De Formularios En Word
Ejercicio De Formularios En WordEjercicio De Formularios En Word
Ejercicio De Formularios En Word
 
Access
AccessAccess
Access
 
Nixon quishpe slide
Nixon quishpe slideNixon quishpe slide
Nixon quishpe slide
 
Viñetas
ViñetasViñetas
Viñetas
 
Presentación1video
Presentación1videoPresentación1video
Presentación1video
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Separata ms Word Viñetas
Separata ms Word ViñetasSeparata ms Word Viñetas
Separata ms Word Viñetas
 
Informe ii basededatos
Informe ii basededatosInforme ii basededatos
Informe ii basededatos
 
Tp5
Tp5Tp5
Tp5
 
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
 
Clase Access
Clase AccessClase Access
Clase Access
 
GUIA DE MICROSOFT EXCEL
GUIA DE MICROSOFT EXCELGUIA DE MICROSOFT EXCEL
GUIA DE MICROSOFT EXCEL
 
Guia de microsoft excel.
Guia de microsoft excel.Guia de microsoft excel.
Guia de microsoft excel.
 
Manualdemanejodemicrosoftexcel 121025110734-phpapp02
Manualdemanejodemicrosoftexcel 121025110734-phpapp02Manualdemanejodemicrosoftexcel 121025110734-phpapp02
Manualdemanejodemicrosoftexcel 121025110734-phpapp02
 
Manual de manejo de microsoft excel
Manual de manejo de microsoft excelManual de manejo de microsoft excel
Manual de manejo de microsoft excel
 
Manualdemanejodemicrosoftexcel 121025110734-phpapp02
Manualdemanejodemicrosoftexcel 121025110734-phpapp02Manualdemanejodemicrosoftexcel 121025110734-phpapp02
Manualdemanejodemicrosoftexcel 121025110734-phpapp02
 

Similar a Trabajo de desarrollo

Similar a Trabajo de desarrollo (20)

Que es dreamweaver
Que es dreamweaverQue es dreamweaver
Que es dreamweaver
 
Formulario web
Formulario  webFormulario  web
Formulario web
 
Formulario web2
Formulario  web2Formulario  web2
Formulario web2
 
Paso a paso para crear un formulario en dreamweaver.
Paso a paso para crear un formulario en dreamweaver.Paso a paso para crear un formulario en dreamweaver.
Paso a paso para crear un formulario en dreamweaver.
 
Formulario web movil
Formulario web movilFormulario web movil
Formulario web movil
 
Treabajofinal 140828102436-phpapp02
Treabajofinal 140828102436-phpapp02Treabajofinal 140828102436-phpapp02
Treabajofinal 140828102436-phpapp02
 
Presentación1
Presentación1Presentación1
Presentación1
 
access
accessaccess
access
 
acc
accacc
acc
 
Steven andres ;d
Steven andres ;dSteven andres ;d
Steven andres ;d
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Uso de formularios trabajo
Uso de formularios trabajoUso de formularios trabajo
Uso de formularios trabajo
 
Guia#4 formularios
Guia#4 formulariosGuia#4 formularios
Guia#4 formularios
 
Práctica n 6
Práctica n 6Práctica n 6
Práctica n 6
 
INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03
 
Resultado de aprendizaje 2.2.2
Resultado de aprendizaje 2.2.2Resultado de aprendizaje 2.2.2
Resultado de aprendizaje 2.2.2
 
ndfjkvhnildf
ndfjkvhnildfndfjkvhnildf
ndfjkvhnildf
 
Formularios en access 2010
Formularios en access 2010Formularios en access 2010
Formularios en access 2010
 
Manual de access_2000-2
Manual de access_2000-2Manual de access_2000-2
Manual de access_2000-2
 
Manual de access_2000-2
Manual de access_2000-2Manual de access_2000-2
Manual de access_2000-2
 

Último

Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenadanielaerazok
 
actividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsx
actividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsxactividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsx
actividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsx241532171
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfOscarBlas6
 
libro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdflibro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdfFAUSTODANILOCRUZCAST
 
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptxrodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptxssuser61dda7
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenajuniorcuellargomez
 
MODELO CARACTERIZACION DE PROCESOS SENA.
MODELO CARACTERIZACION DE PROCESOS SENA.MODELO CARACTERIZACION DE PROCESOS SENA.
MODELO CARACTERIZACION DE PROCESOS SENA.imejia2411
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webDecaunlz
 
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfisrael garcia
 
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAdanielaerazok
 
Historia de la Medicina y bases para desarrollo de ella
Historia de la Medicina y bases para desarrollo de ellaHistoria de la Medicina y bases para desarrollo de ella
Historia de la Medicina y bases para desarrollo de ellajuancamilo3111391
 
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdfFernandaHernandez312615
 
PRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptx
PRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptxPRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptx
PRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptxRodriguezLucero
 

Último (13)

Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalena
 
actividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsx
actividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsxactividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsx
actividad.06_crea_un_recurso_multimedia_M01_S03_M01.ppsx
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdf
 
libro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdflibro de Ciencias Sociales_6to grado.pdf
libro de Ciencias Sociales_6to grado.pdf
 
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptxrodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
rodriguez_DelAngel_MariaGPE_M1S3AL6.pptx
 
institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
 
MODELO CARACTERIZACION DE PROCESOS SENA.
MODELO CARACTERIZACION DE PROCESOS SENA.MODELO CARACTERIZACION DE PROCESOS SENA.
MODELO CARACTERIZACION DE PROCESOS SENA.
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la web
 
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
 
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
 
Historia de la Medicina y bases para desarrollo de ella
Historia de la Medicina y bases para desarrollo de ellaHistoria de la Medicina y bases para desarrollo de ella
Historia de la Medicina y bases para desarrollo de ella
 
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf2º SOY LECTOR PART 2- MD  EDUCATIVO (6).pdf
2º SOY LECTOR PART 2- MD EDUCATIVO (6).pdf
 
PRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptx
PRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptxPRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptx
PRIMARIA 1. RESUELVE PROBLEMAS DE FORMA MOVIMIENTO Y LOCALIZACIÓN 2 (2).pptx
 

Trabajo de desarrollo

  • 1. Trabajo de desarrollo Nombre: Cristhian Arévalo Curso:3º Informática «C»
  • 2. ¿Qué son formularios web? O Un formulario web dentro de una página web permite al usuario introducir datos los cuales son enviados a un servidor para ser procesados. Los formularios web se parecen a los formularios de papel porque los internautas llenan dichos formularios usando casillas de selección, botones de opción, o campos de texto.
  • 3. O Además de servir como plantillas para nueva información, los formularios web también pueden ser usados para consultar y mostrar información existente en forma similar a los formularios de combinación de correspondencia, incorporando las mismas ventajas. La separación entre la estructura y los datos subyacentes de un mensaje permite a ambos variar independientemente. El uso de formularios webs para este propósito evita los problemas asociados con la creación explícita de páginas web separadas para cada registro en una base de datos.
  • 4. Formularios XHTML/HTML O Un formulario en XHTML o HTML es la forma más común de usar un formulario en línea. Utilizando solamente las etiquetas <form> e <input> es posible diseñar la mayoría de formularios de las aplicaciones web.1​ O Los siguientes elementos pueden formar parte de un formulario del lado del usuario: O input2​ O type = (para indicar uno de los tipos de control del formulario) O text: una caja de texto que permite ingresar una sola línea de texto. O checkbox: una casilla de selección. O radio: un botón de opción. O file: un examinador para subir archivos. O reset: un botón de reinicio que al activarse le dice al navegador que restaure los valores del formulario a su estado inicial O submit: un botón que le dice al navegador que realice la acción del formulario (referido típicamente a mandarlo al servidor).
  • 5. O Algunas aplicaciones web utilizan otros elementos de formulario que no se pueden crear con <input>. Las listas desplegables y las áreas de texto disponen de sus propias etiquetas (<select> y <textarea> respectivamente):3​ O select: una lista de elementos que el usuario puede seleccionar. O textarea: muy parecido a la caja de texto pero con la posibilidad de escribir múltiples líneas. O La imagen de ejemplo de la derecha muestra todos estos elementos: O Una caja de texto que permite ingresar un nombre. O Un par de botones de opción para seleccionar el sexo. O Una lista de colores de ojos a elegir. O Un par de casillas de selección que son seleccionadas si se aplican al usuario. O Un área de texto que describe la habilidad atlética. O Un botón submit para enviar la información al servidor. Estos elementos básicos proveen la mayor cantidad posible de elementos de las interfaces gráficas, pero no todos. Por ejemplo, no hay equivalentes a un combobox, globos de ayudas, vista de árbol, o vista tabular. Una vista tabular, sin embargo, puede ser imitada usando una tabla HTML estándar con elementos input text en cada celda. Una vista de árbol puede ser imitada por medio de tablas anidadas o bien, semánticamente hablando, con listas anidadas. Muchos de estos elementos están disponibles por medio de bibliotecas de JavaScript.
  • 6. Aplicaciones que permitan crearlos 1. Google Forms Google Forms es una de las mejores herramientas ya que es gratuita y puede guardar automáticamente los resultados del formulario en una hoja de cálculo de Google para que puedas realizar un análisis avanzado. Además es muy fácil y rápido editar todos los campos que necesites.
  • 7. 2. Wufoo O Wufoo tiene los campos que necesitas para crear un buen formulario con un sistema de arrastrar y soltar, incluidos los campos de pago que funcionan con una variedad de servicios y una herramienta de subida de archivos que permite a los usuarios enviar imágenes y documentos a través del formulario. También incluye más de un centenar de plantillas y temas para ayudarte a empezar rápidamente.
  • 8. 3. JotForm O Si hay una competición para comprobar qué herramienta es la más rápida, probablemente ganaría JotForm. Simplemente ve a jotform.com, haz clic en “Plantillas” y en “Usar plantilla” y segundos más tarde tendrás un formulario casi completo. Puedes personalizar los campos o arrastrar y soltar para añadir alguno nuevo. Luego solo tienes que hacer clic en Publicar y copiar el enlace del formulario para utilizarlo.
  • 9. 4. Typeform O Hay formularios y luego hay Typeforms. Todas las herramientas mencionadas anteriormente muestran todo el formulario a la vez y llenan la pantalla con pequeños cuadros de texto y viñetas. Typeform lo hace diferente y muestra solamente la pregunta que tienes que responder en ese momento acompañada de un diseño interactivo. Tendrás que probar una de sus demos para ver lo divertido que es hacer los formularios.
  • 10. 5. Zoho Forms O Lo mejor de todo es que Zoho Forms está construido para que puedas trabajar en equipo. Incluso se pueden aprobar las respuestas de los formularios o ver las estadísticas desde la aplicación móvil de Zoho Forms o compartir los datos con las otras aplicaciones de Zoho que tu equipo esté usando.