SlideShare una empresa de Scribd logo
1 de 10
Descargar para leer sin conexión
Etiquetas de FormulariosFacilitador:
Duglas Moreno
Etiquetas de Formularios
HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar
los contenidos de los documentos y páginas web. Sin embargo, HTML también
incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite
crear formularios para que los usuarios interactúen con las aplicaciones web.
Mediante la etiqueta <form> y el <input> podemos empezar a diseñar nuestro
formulario, y crear algo como esto:
Etiquetas de Formularios
La etiqueta <form> nos permites, crear un formulario, en dichas etiquetas existen
atributos como:
1.- method se usa para indicar la forma de enviar los datos, su valores son post y
get, como por ejemplo: <form method='post' >
2.- action indica la URL que se encarga de procesar los datos del formulario, como
por ejemplo: <form action='ejemplo.php'>, donde ejemplo.php es el archivo donde
se enviaran los datos.
3.- enctype tipo de codificación empleada al enviar el formulario al servidor,
mayormente este atributo se usa cuando se adjunta archivos al servidor. Como por
ejemplo: <form enctype='multipart/form-data'>
Estas características, nos permite trabajar con los formulario de una manera eficaz,
como por ejemplo:
Etiquetas de Formularios
Etiquetas de Formularios
La etiqueta <input> nos permites crear las cajas de texto de diferente tipo, en las
cuales su atributo cambia. Como por ejemplo:
1.- text
2.- password
3.- hidden
4.- file
5.- checkbox
6.- radio
7.- submit
8.- reset
9.- image
10.- button
Indica el tipo de control
que se incluye en el formulario
Etiquetas de Formularios
Dentro de la etiqueta <input> tenemos atributos que nos permite configurar ciertas
opciones dentro de nuestras cajas de texto. Como por ejemplo los siguiente
atributos:
1.- name nos permite colocar el nombre de control a las cajas de texto, este
atributos nos permite conectar la caja con un lenguaje de programación.
2.- value este atributo, nos permite colocar una valor por defecto a nuestra cajas de
texto.
3.- maxlength este atributo indica el máximo numero de caracteres de una caja de
texto.
4.- readonly este atributo nos permite colocar las cajas en solo lectura.
5.- disabled con este atributo deshabilitamos las cajas de texto
Etiquetas de Formularios
Nos encontramos con otras etiquetas que nos permite, diseñar diferentes caja de
texto, como por ejemplo una de lista desplegable y de tipo memo, estas etiquetas
son: <select>, <textarea>, dichas etiquetas también usan atributos vistos
anteriormente.
A continuación veremos el uso de las diferentes cajas de texto:
Etiquetas de Formularios
Etiquetas de Formularios
Ejemplos de uso de algunas caja de texto
A trabajar......!

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

HTML Introduction
HTML IntroductionHTML Introduction
HTML Introduction
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Html
HtmlHtml
Html
 
CSS
CSSCSS
CSS
 
05 Introduccion a HTML
05 Introduccion a HTML05 Introduccion a HTML
05 Introduccion a HTML
 
Html Slide Part-1
Html Slide Part-1Html Slide Part-1
Html Slide Part-1
 
Html5 semantics
Html5 semanticsHtml5 semantics
Html5 semantics
 
CSS ppt
CSS pptCSS ppt
CSS ppt
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Web html table tags
Web html  table tagsWeb html  table tags
Web html table tags
 
How to learn HTML in 10 Days
How to learn HTML in 10 DaysHow to learn HTML in 10 Days
How to learn HTML in 10 Days
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
 
Html forms
Html formsHtml forms
Html forms
 
Html basics
Html basicsHtml basics
Html basics
 
Introduction to HTML
Introduction to HTML Introduction to HTML
Introduction to HTML
 
HTML and CSS crash course!
HTML and CSS crash course!HTML and CSS crash course!
HTML and CSS crash course!
 
Basic html tags
Basic html tagsBasic html tags
Basic html tags
 
CSS notes
CSS notesCSS notes
CSS notes
 
CSS
CSSCSS
CSS
 

Destacado

Mensagens eletronicas o que é um email
Mensagens eletronicas   o que é um emailMensagens eletronicas   o que é um email
Mensagens eletronicas o que é um email
Dulcelenacosta
 
Formularios
FormulariosFormularios
Formularios
AAcioli
 

Destacado (20)

Palestra - Formularios eletronicos
Palestra - Formularios eletronicosPalestra - Formularios eletronicos
Palestra - Formularios eletronicos
 
Запоріжжя в розрізі часу
Запоріжжя в розрізі часуЗапоріжжя в розрізі часу
Запоріжжя в розрізі часу
 
Aulas 2 iseg_money lab_2017
Aulas 2 iseg_money lab_2017Aulas 2 iseg_money lab_2017
Aulas 2 iseg_money lab_2017
 
The dev ops code has no servers
The dev ops code has no serversThe dev ops code has no servers
The dev ops code has no servers
 
Mind the Gap: Crossing the DevOps Chasm
Mind the Gap: Crossing the DevOps ChasmMind the Gap: Crossing the DevOps Chasm
Mind the Gap: Crossing the DevOps Chasm
 
Festival de citas en un libro de Imágenes
Festival de citas en un libro de Imágenes Festival de citas en un libro de Imágenes
Festival de citas en un libro de Imágenes
 
Como crear un videojuego SEBASTIAN HORMIGA 11 A
Como crear un videojuego SEBASTIAN HORMIGA 11 AComo crear un videojuego SEBASTIAN HORMIGA 11 A
Como crear un videojuego SEBASTIAN HORMIGA 11 A
 
Пам’ятники – символічне обличчя Запоріжжя, втілення соціальної пам’яті
Пам’ятники – символічне обличчя Запоріжжя, втілення соціальної пам’ятіПам’ятники – символічне обличчя Запоріжжя, втілення соціальної пам’яті
Пам’ятники – символічне обличчя Запоріжжя, втілення соціальної пам’яті
 
GLI Company Profile
GLI Company ProfileGLI Company Profile
GLI Company Profile
 
Mensagens eletronicas o que é um email
Mensagens eletronicas   o que é um emailMensagens eletronicas   o que é um email
Mensagens eletronicas o que é um email
 
2017上半年社企流iLab申請教戰手冊
2017上半年社企流iLab申請教戰手冊2017上半年社企流iLab申請教戰手冊
2017上半年社企流iLab申請教戰手冊
 
Atendimento Telefónico
Atendimento TelefónicoAtendimento Telefónico
Atendimento Telefónico
 
Histeria 1 (madame bovary)
Histeria 1 (madame bovary)Histeria 1 (madame bovary)
Histeria 1 (madame bovary)
 
OSM : Formulários
OSM : FormuláriosOSM : Formulários
OSM : Formulários
 
Formularios
FormulariosFormularios
Formularios
 
Formulário - Organização, Sistemas e Métodos
Formulário - Organização, Sistemas e MétodosFormulário - Organização, Sistemas e Métodos
Formulário - Organização, Sistemas e Métodos
 
ORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSM
ORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSMORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSM
ORGANIZAÇÃO, SISTEMAS E MÉTODOS – OSM
 
thinking keys الموهوبين الأسبوع 5
 thinking keys الموهوبين الأسبوع 5  thinking keys الموهوبين الأسبوع 5
thinking keys الموهوبين الأسبوع 5
 
Guia3 blackboard
Guia3 blackboardGuia3 blackboard
Guia3 blackboard
 
Modelos de documentos
Modelos de documentosModelos de documentos
Modelos de documentos
 

Similar a Formularios (20)

Formularios 1
Formularios 1Formularios 1
Formularios 1
 
Formularios 1
Formularios 1      Formularios 1
Formularios 1
 
5 formularios - javascript
5   formularios - javascript5   formularios - javascript
5 formularios - javascript
 
Formularios
FormulariosFormularios
Formularios
 
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
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Tema2(1)
Tema2(1)Tema2(1)
Tema2(1)
 
Html y xml
Html y xmlHtml y xml
Html y xml
 
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
 
Karina
KarinaKarina
Karina
 
Formularios
FormulariosFormularios
Formularios
 
Steven Toala 2c3
Steven Toala 2c3Steven Toala 2c3
Steven Toala 2c3
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
U3_Aplicaciones Web.pdf
U3_Aplicaciones Web.pdfU3_Aplicaciones Web.pdf
U3_Aplicaciones Web.pdf
 
Intro html
Intro htmlIntro html
Intro html
 
Papa
PapaPapa
Papa
 
Archivo xml
Archivo xmlArchivo xml
Archivo xml
 
Manual html
Manual htmlManual html
Manual html
 
Primera Clase de xhtml
Primera Clase de xhtmlPrimera Clase de xhtml
Primera Clase de xhtml
 
Archivo xml
Archivo xmlArchivo xml
Archivo xml
 

Más de Duglas Oswaldo Moreno Mendoza

Más de Duglas Oswaldo Moreno Mendoza (20)

Fases dek Diseño Instruccional
Fases dek Diseño InstruccionalFases dek Diseño Instruccional
Fases dek Diseño Instruccional
 
Diseño Instruccional
Diseño InstruccionalDiseño Instruccional
Diseño Instruccional
 
Ponencia Seguridad de Datos
Ponencia Seguridad de DatosPonencia Seguridad de Datos
Ponencia Seguridad de Datos
 
Sematicas cabecera
Sematicas cabeceraSematicas cabecera
Sematicas cabecera
 
Elementos de audio
Elementos de audioElementos de audio
Elementos de audio
 
Introducción al HTML
Introducción al HTML Introducción al HTML
Introducción al HTML
 
Infografia de PHP
Infografia de PHPInfografia de PHP
Infografia de PHP
 
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación VirtualMoodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
Moodle como una herramienta de Enseñanza y Aprendizaje en la Educación Virtual
 
Una biografía que es como un cuento
Una biografía que es como un cuentoUna biografía que es como un cuento
Una biografía que es como un cuento
 
INFOGRAFIA DE PHP
INFOGRAFIA DE PHPINFOGRAFIA DE PHP
INFOGRAFIA DE PHP
 
Observador del conocimmiento n°1 vol 2
Observador del conocimmiento n°1 vol 2Observador del conocimmiento n°1 vol 2
Observador del conocimmiento n°1 vol 2
 
Observador del conocimmiento n°1 vol 1
Observador del conocimmiento n°1 vol 1Observador del conocimmiento n°1 vol 1
Observador del conocimmiento n°1 vol 1
 
Manual programacion Android
Manual programacion AndroidManual programacion Android
Manual programacion Android
 
Variables y Bucles
Variables y BuclesVariables y Bucles
Variables y Bucles
 
Historia de PHP
Historia de PHPHistoria de PHP
Historia de PHP
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Clase tres de xhtml
Clase tres de xhtmlClase tres de xhtml
Clase tres de xhtml
 
Segunda Clase de xhtml
Segunda Clase de xhtmlSegunda Clase de xhtml
Segunda Clase de xhtml
 
Satelite Miranda
Satelite MirandaSatelite Miranda
Satelite Miranda
 
Introducción a Phyton
Introducción a PhytonIntroducción a Phyton
Introducción a Phyton
 

Último

Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Fernando Solis
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
EliaHernndez7
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
EduardoJosVargasCama1
 

Último (20)

Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por Valores
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
prostitución en España: una mirada integral!
prostitución en España: una mirada integral!prostitución en España: una mirada integral!
prostitución en España: una mirada integral!
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docx
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIASISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
SISTEMA RESPIRATORIO PARA NIÑOS PRIMARIA
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
 
Los dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la VerdadLos dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la Verdad
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
La Evaluacion Formativa SM6 Ccesa007.pdf
La Evaluacion Formativa SM6  Ccesa007.pdfLa Evaluacion Formativa SM6  Ccesa007.pdf
La Evaluacion Formativa SM6 Ccesa007.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
 
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPCTRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
TRABAJO FINAL TOPOGRAFÍA COMPLETO DE LA UPC
 

Formularios

  • 2. Etiquetas de Formularios HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para que los usuarios interactúen con las aplicaciones web. Mediante la etiqueta <form> y el <input> podemos empezar a diseñar nuestro formulario, y crear algo como esto:
  • 3. Etiquetas de Formularios La etiqueta <form> nos permites, crear un formulario, en dichas etiquetas existen atributos como: 1.- method se usa para indicar la forma de enviar los datos, su valores son post y get, como por ejemplo: <form method='post' > 2.- action indica la URL que se encarga de procesar los datos del formulario, como por ejemplo: <form action='ejemplo.php'>, donde ejemplo.php es el archivo donde se enviaran los datos. 3.- enctype tipo de codificación empleada al enviar el formulario al servidor, mayormente este atributo se usa cuando se adjunta archivos al servidor. Como por ejemplo: <form enctype='multipart/form-data'> Estas características, nos permite trabajar con los formulario de una manera eficaz, como por ejemplo:
  • 5. Etiquetas de Formularios La etiqueta <input> nos permites crear las cajas de texto de diferente tipo, en las cuales su atributo cambia. Como por ejemplo: 1.- text 2.- password 3.- hidden 4.- file 5.- checkbox 6.- radio 7.- submit 8.- reset 9.- image 10.- button Indica el tipo de control que se incluye en el formulario
  • 6. Etiquetas de Formularios Dentro de la etiqueta <input> tenemos atributos que nos permite configurar ciertas opciones dentro de nuestras cajas de texto. Como por ejemplo los siguiente atributos: 1.- name nos permite colocar el nombre de control a las cajas de texto, este atributos nos permite conectar la caja con un lenguaje de programación. 2.- value este atributo, nos permite colocar una valor por defecto a nuestra cajas de texto. 3.- maxlength este atributo indica el máximo numero de caracteres de una caja de texto. 4.- readonly este atributo nos permite colocar las cajas en solo lectura. 5.- disabled con este atributo deshabilitamos las cajas de texto
  • 7. Etiquetas de Formularios Nos encontramos con otras etiquetas que nos permite, diseñar diferentes caja de texto, como por ejemplo una de lista desplegable y de tipo memo, estas etiquetas son: <select>, <textarea>, dichas etiquetas también usan atributos vistos anteriormente. A continuación veremos el uso de las diferentes cajas de texto:
  • 9. Etiquetas de Formularios Ejemplos de uso de algunas caja de texto