SlideShare una empresa de Scribd logo
1 de 14
Formularios
Equipo 4
Ramírez Eduardo.
Sánchez Miguel J.
Tobías Carlos.
Navarro Artemio.
Acerca de…
• El formulario es una interesante
  herramienta de toda pagina web. Permite
  recabar información ordenada de los
  visitantes, y almacenar esa información de
  alguna manera.
• Existen varias maneras de guardar la
  información que se genera al llenar un
  formulario, las cuales, se explican
  brevemente a continuación :

• Los datos se pueden guardar en una
  dirección común de correo electrónico de
  manera no encriptada.
• O de otra manera, mas compleja, se envía
  a un servidor a través de un programa
  determinado que deberá estar instalado
  en el mismo, para almacenar la
  información y procesarla.
• Los formularios están dentro de las
  etiquetas <form> y </form>. Los atributos
  de la etiqueta de apertura del formulario
  indicarán la forma de enviar la
  información, como se presenta a
  continuación.
• action="mailto:direcciondecorreo"
El formulario será enviado a la dirección de
correo que pongamos.
• method="post“
Los datos se enviarán inmediatamente por
correo electrónico.
• enctype="text/plain“
Las respuestas se enviarán sin codificación.
Dentro del formulario (1)
• input type (entrada de tipo) texto.
• name es lo que aparecerá en el mensaje
  de correo delante de lo que introduzca el
  ususario.
• size nos indica el tamaño de la caja de
  texto de una línea. En este caso 10
  caracteres.
• maxlenght indica la cantidad máxima de
  caracteres que puede introducir el usuario.
Dentro del formulario (2)
Para insertar botones al formulario:

• input type submit (enviar).
• value será lo que aparezca escrito en el
  botón.
• input type reset en inglés borrar.
Dentro del formulario (3)
Para insertar varias líneas de texto al
formulario:
• <textarea> se sustituye por <text>, para
  esta etiqueta requiere un cierre
  (</textarea> ).
• cols indica el ancho del cuadro de texto en
  número de caracteres.
• rows indica el número de filas del cuadro
  de texto. Si el ususario quiere escribir más
  de 5 líneas, el formulario se lo permite.
Dentro del formulario (4)
Para insertar un menú para elegir entre
varias opciones:
• Se introduce de forma similar al cuadro de
  texto de una línea <input> pero, ahora
  el type es radio, el name es el nombre que
  le damos a ese grupo de opción,
  el value lo que aparecerá en el mensaje de
  correo delante de la opción elegida. Hay
  que repetir la etiqueta tantas veces como
  opciones haya que elegir.
Dentro del formulario (5)
Para insertar un menú para elegir opciones
múltiples:
• Basado en el código anterior, se cambia el
  atributo radio por checkbox. Los demás
  atributos son similares.
Dentro del formulario (6)
Para insertar un menú desplegable:
• Las opciones de elección se despliegan en
  un menú para que el usuario elija una con
  el atributo <select>, </select> y enlistando
  las opciones en <option value=
  “OPCION”>, </option>
Dentro del formulario (7)
Para insertar un campo de contraseña:
• Empleamos la misma sintaxis que en el
  campo de texto de una línea sustituyendo
  type= “text” por type= “password”.
Fuentes:
• www.roble.pntic.mec.es/
• Manual de HTML. Ángel R. Puente Pérez.
• <HTManuaL> Manual de lenguaje HTML de nivel
  inicial, medio y avanzado. Ángel Ricardo Puentes
  Pérez. 19/12/2008

Más contenido relacionado

La actualidad más candente

Documento html estefania aguirre diossa
Documento html estefania aguirre diossaDocumento html estefania aguirre diossa
Documento html estefania aguirre diossadecimosistemas2016
 
Manual de correro electronico acabado
Manual de correro electronico acabadoManual de correro electronico acabado
Manual de correro electronico acabadobrandon huerta
 
DN_U3_A7_EEHR
DN_U3_A7_EEHRDN_U3_A7_EEHR
DN_U3_A7_EEHReriklalo
 
Diapositivas correo electronico
Diapositivas correo electronicoDiapositivas correo electronico
Diapositivas correo electronicoJohelSoliz
 
Plannacionaldealfabetizaciontecnologicaunidad4
Plannacionaldealfabetizaciontecnologicaunidad4 Plannacionaldealfabetizaciontecnologicaunidad4
Plannacionaldealfabetizaciontecnologicaunidad4 DeiviGarcia1
 
Primeras 3 unidades de aula clic
Primeras 3 unidades de aula clicPrimeras 3 unidades de aula clic
Primeras 3 unidades de aula clicNIkoo Triana
 
10 formulario
10 formulario10 formulario
10 formularioMarianmv
 
Qué es word 2003
Qué es   word   2003Qué es   word   2003
Qué es word 2003figsanlui63
 
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA aitor18ma
 
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA aitor18ma
 
Diseño web
Diseño webDiseño web
Diseño webSoniaPF
 
Ambiente de trabajo de Microsoft Word
Ambiente de trabajo de Microsoft WordAmbiente de trabajo de Microsoft Word
Ambiente de trabajo de Microsoft WordAdrian Zabala
 

La actualidad más candente (19)

Trabajo de desarrollo
Trabajo de desarrolloTrabajo de desarrollo
Trabajo de desarrollo
 
Documento html estefania aguirre diossa
Documento html estefania aguirre diossaDocumento html estefania aguirre diossa
Documento html estefania aguirre diossa
 
Html
Html Html
Html
 
Manual de correro electronico acabado
Manual de correro electronico acabadoManual de correro electronico acabado
Manual de correro electronico acabado
 
Introduccion word
Introduccion wordIntroduccion word
Introduccion word
 
DN_U3_A7_EEHR
DN_U3_A7_EEHRDN_U3_A7_EEHR
DN_U3_A7_EEHR
 
Diapositivas correo electronico
Diapositivas correo electronicoDiapositivas correo electronico
Diapositivas correo electronico
 
Calculadora en Visual Basic 2010
Calculadora en Visual Basic 2010Calculadora en Visual Basic 2010
Calculadora en Visual Basic 2010
 
Plannacionaldealfabetizaciontecnologicaunidad4
Plannacionaldealfabetizaciontecnologicaunidad4 Plannacionaldealfabetizaciontecnologicaunidad4
Plannacionaldealfabetizaciontecnologicaunidad4
 
Word 2013
Word 2013Word 2013
Word 2013
 
Primeras 3 unidades de aula clic
Primeras 3 unidades de aula clicPrimeras 3 unidades de aula clic
Primeras 3 unidades de aula clic
 
Jhfjhgdfgd
JhfjhgdfgdJhfjhgdfgd
Jhfjhgdfgd
 
10 formulario
10 formulario10 formulario
10 formulario
 
Qué es word 2003
Qué es   word   2003Qué es   word   2003
Qué es word 2003
 
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
 
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
PLAN NACIONAL DE ALFABETIZACION TECNOLOGICA
 
Diseño web
Diseño webDiseño web
Diseño web
 
Ambiente de trabajo de Microsoft Word
Ambiente de trabajo de Microsoft WordAmbiente de trabajo de Microsoft Word
Ambiente de trabajo de Microsoft Word
 
TODO SOBRE E-MAIL
TODO SOBRE E-MAILTODO SOBRE E-MAIL
TODO SOBRE E-MAIL
 

Destacado

U4 control-logico-y-controladores-logicos-programables
U4 control-logico-y-controladores-logicos-programablesU4 control-logico-y-controladores-logicos-programables
U4 control-logico-y-controladores-logicos-programableskarincoarite1234
 
PLC (Controladores logicos programables)
PLC (Controladores logicos programables)PLC (Controladores logicos programables)
PLC (Controladores logicos programables)Siul_G
 
1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)larasaregune
 
2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)larasaregune
 
1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)larasaregune
 
Buenas Prácticas de CSS
Buenas Prácticas de CSSBuenas Prácticas de CSS
Buenas Prácticas de CSSJavier España
 
3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)larasaregune
 
3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)larasaregune
 
4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)larasaregune
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosYadith Gomez Nolasco
 
0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)larasaregune
 
0.Indice de Contenidos
0.Indice de Contenidos0.Indice de Contenidos
0.Indice de Contenidoslarasaregune
 
0.Indice De Contenidos
0.Indice De Contenidos0.Indice De Contenidos
0.Indice De Contenidoslarasaregune
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modularrodboc
 
Web Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaWeb Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaJesus Pernas Alonso
 
Las buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones SymfonyLas buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones Symfonysymfony_bcn
 
Haml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosHaml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosDAVID GRILLI
 
Manual de mantenimiento de reductores
Manual de mantenimiento de reductoresManual de mantenimiento de reductores
Manual de mantenimiento de reductoresivan jamenez ruiz
 

Destacado (20)

Pares craneales
Pares cranealesPares craneales
Pares craneales
 
U4 control-logico-y-controladores-logicos-programables
U4 control-logico-y-controladores-logicos-programablesU4 control-logico-y-controladores-logicos-programables
U4 control-logico-y-controladores-logicos-programables
 
PLC (Controladores logicos programables)
PLC (Controladores logicos programables)PLC (Controladores logicos programables)
PLC (Controladores logicos programables)
 
1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)
 
2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)
 
1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)1.Introduccion (diseño con CSS)
1.Introduccion (diseño con CSS)
 
Paso apaso de html
Paso apaso de htmlPaso apaso de html
Paso apaso de html
 
Buenas Prácticas de CSS
Buenas Prácticas de CSSBuenas Prácticas de CSS
Buenas Prácticas de CSS
 
3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)
 
3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)
 
4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
 
0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)
 
0.Indice de Contenidos
0.Indice de Contenidos0.Indice de Contenidos
0.Indice de Contenidos
 
0.Indice De Contenidos
0.Indice De Contenidos0.Indice De Contenidos
0.Indice De Contenidos
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
 
Web Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaWeb Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de carga
 
Las buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones SymfonyLas buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones Symfony
 
Haml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosHaml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticos
 
Manual de mantenimiento de reductores
Manual de mantenimiento de reductoresManual de mantenimiento de reductores
Manual de mantenimiento de reductores
 

Similar a Formularios html (20)

Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Guía Formulario
Guía FormularioGuía Formulario
Guía Formulario
 
Formulario
FormularioFormulario
Formulario
 
Semana 2 Etiquetas semánticas y HTML 5
Semana 2   Etiquetas semánticas y HTML 5Semana 2   Etiquetas semánticas y HTML 5
Semana 2 Etiquetas semánticas y HTML 5
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Taller de programación web sesion 7,8,9,10 & 11
Taller de programación web   sesion 7,8,9,10 & 11Taller de programación web   sesion 7,8,9,10 & 11
Taller de programación web sesion 7,8,9,10 & 11
 
Formularios
FormulariosFormularios
Formularios
 
Formularios
FormulariosFormularios
Formularios
 
Formulario de contacto
Formulario de contactoFormulario de contacto
Formulario de contacto
 
CORREO ELECTRONICO
CORREO ELECTRONICOCORREO ELECTRONICO
CORREO ELECTRONICO
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Formularios 1
Formularios 1Formularios 1
Formularios 1
 
Formularios 1
Formularios 1      Formularios 1
Formularios 1
 
Trabajo de desarrollo
Trabajo de desarrolloTrabajo de desarrollo
Trabajo de desarrollo
 
Manual de cgimail
Manual de cgimailManual de cgimail
Manual de cgimail
 
Formularios (Photoshop)
Formularios (Photoshop)Formularios (Photoshop)
Formularios (Photoshop)
 

Formularios html

  • 1. Formularios Equipo 4 Ramírez Eduardo. Sánchez Miguel J. Tobías Carlos. Navarro Artemio.
  • 2. Acerca de… • El formulario es una interesante herramienta de toda pagina web. Permite recabar información ordenada de los visitantes, y almacenar esa información de alguna manera.
  • 3. • Existen varias maneras de guardar la información que se genera al llenar un formulario, las cuales, se explican brevemente a continuación : • Los datos se pueden guardar en una dirección común de correo electrónico de manera no encriptada.
  • 4. • O de otra manera, mas compleja, se envía a un servidor a través de un programa determinado que deberá estar instalado en el mismo, para almacenar la información y procesarla.
  • 5. • Los formularios están dentro de las etiquetas <form> y </form>. Los atributos de la etiqueta de apertura del formulario indicarán la forma de enviar la información, como se presenta a continuación.
  • 6. • action="mailto:direcciondecorreo" El formulario será enviado a la dirección de correo que pongamos. • method="post“ Los datos se enviarán inmediatamente por correo electrónico. • enctype="text/plain“ Las respuestas se enviarán sin codificación.
  • 7. Dentro del formulario (1) • input type (entrada de tipo) texto. • name es lo que aparecerá en el mensaje de correo delante de lo que introduzca el ususario. • size nos indica el tamaño de la caja de texto de una línea. En este caso 10 caracteres. • maxlenght indica la cantidad máxima de caracteres que puede introducir el usuario.
  • 8. Dentro del formulario (2) Para insertar botones al formulario: • input type submit (enviar). • value será lo que aparezca escrito en el botón. • input type reset en inglés borrar.
  • 9. Dentro del formulario (3) Para insertar varias líneas de texto al formulario: • <textarea> se sustituye por <text>, para esta etiqueta requiere un cierre (</textarea> ). • cols indica el ancho del cuadro de texto en número de caracteres. • rows indica el número de filas del cuadro de texto. Si el ususario quiere escribir más de 5 líneas, el formulario se lo permite.
  • 10. Dentro del formulario (4) Para insertar un menú para elegir entre varias opciones: • Se introduce de forma similar al cuadro de texto de una línea <input> pero, ahora el type es radio, el name es el nombre que le damos a ese grupo de opción, el value lo que aparecerá en el mensaje de correo delante de la opción elegida. Hay que repetir la etiqueta tantas veces como opciones haya que elegir.
  • 11. Dentro del formulario (5) Para insertar un menú para elegir opciones múltiples: • Basado en el código anterior, se cambia el atributo radio por checkbox. Los demás atributos son similares.
  • 12. Dentro del formulario (6) Para insertar un menú desplegable: • Las opciones de elección se despliegan en un menú para que el usuario elija una con el atributo <select>, </select> y enlistando las opciones en <option value= “OPCION”>, </option>
  • 13. Dentro del formulario (7) Para insertar un campo de contraseña: • Empleamos la misma sintaxis que en el campo de texto de una línea sustituyendo type= “text” por type= “password”.
  • 14. Fuentes: • www.roble.pntic.mec.es/ • Manual de HTML. Ángel R. Puente Pérez. • <HTManuaL> Manual de lenguaje HTML de nivel inicial, medio y avanzado. Ángel Ricardo Puentes Pérez. 19/12/2008