SlideShare una empresa de Scribd logo
1 de 17
Comunicación entre formularios
HTML
y paginas JSP
En esta sección se hará un breve
repaso a los formularios HTML
● Un formulario HTML tiene la forma :
< form action =”destino” method=”metodo”>
elementos de formulario
</form>
● En destino especificaremos la pagina que recibe los datos del
formulario en el atributo method podemos indicar 2 valores
diferentes GET y POST.
GET
● Cuando usamos GET, la información se codifica directamente
en la URL, con la forma:
● http://url?param1=valor1&param2=valor2...&param
N=valorN
● Con GET no podemos manejar grandes cantidades de
información, y existe la desventaja de que el servidor o el
navegador guarden en caché la página llamada.
● Hay que tener en cuenta que los logs del servidor y el
historial del navegador guardarán el acceso incluyendo los
parámetros, lo cual hace desaconsejable GET para el envío de
información privada.
● Por otro lado, al visualizarse en la URL los parámetros,
facilita el desarrollo y depurado de la aplicación web, y en
algunos casos, es imprescindible para realizar estadísticas
basadas en los logs del servidor.
POST
Con POST la información se envía directamente al servidor, no
se codifica en la URL, y además permite el envío de grandes
cantidades de información, como podrían ser archivos.
ELEMENTOS DE
FORMULARIO
● Se indican con las etiquetas HTML:
<input type="tipo" name="nombre" value="valor "/>
<textarea name="nombre"/>Contenido por defecto
</textarea>
<select name="nombre">
<option value="valorOpcion">Texto opcion</option>
[...]
</select>
● Para enviar los datos usamos el tiposubmit.
● <input type="submit"/>
Campos de texto
● Los tipos que se envían como texto simple son text y
password para <input>, y el elemento <textarea>.
● Ejemplo:
<form action="pagina.jsp">
<input type="text" name="parametro1
"value="valor por defecto"/>
<br>
<input type="password" name="clave"/>
<br>
<textarea name="parametro2">Texto por defecto</textarea>
<br>
<input type="submit"/>
</form>
● Y en el archivo pagina.jsp:
● Valor de parametro1: <%=request.getParameter("parametro1") %>
● <br>
● Valor de parametro2: <%= request.getParameter("parametro2")
%>
● <br>
● Valor de parametro ‘clave’:<%= request.getParameter("clave") %>
Selectores ON/OFF . Checkbox
● Se indica con el tipo checkbox.
<input type="checkbox" name="nombreCheckbox "/>
● Si el checkbox está marcado, se envía un parámetro con el
nombre especificado con el valor on.
● Si no está marcado, no se envía el parámetro. Así que podemos
recibirlo en JSP de la siguiente forma:
<%
String checkbox= request.getParameter("nombreCheckbox");
if (checkbox!=null && checkbox.equalsIgnoreCase("on"))
{
%>
Checkbox seleccionado en el formularioorigen.
<%
}
else
{
● %>
● Checkbox NO seleccionado en el formulario origen.
● }
● %>
Parámetros ocultos. Tipo hidden
● Se indican con el tipo hidden, los pares clave valor indicados se
enviaran siempre junto con el resto de información del
formulario. Se reciben en el JSP de la misma forma que los
campos de texto.
Ejemplo:
<form action="pagina.jsp">
<input type="text" name="variable" value="por defecto"/>
<input type="hidden" name="fijo" value="valor fijo"/>
</form>
Botones radio
● Son grupos de valores ON/OFF, sólo puede haber uno
seleccionado dentro del grupo con el mismo nombre en el
atributo name. Sólo se envía un parámetro para el botón
seleccionado, con el valor indicado en la etiqueta value. El
valor se recibe en el JSP de forma similar a los campos de
texto.
● Ejemplo
<form action="pagina.jsp">
Opcion 1 <input type="radio" name="radio“ value="uno"/>
<br>
Opcion 2 <input type="radio" name="radio" value="dos"/>
<br>
<input type="submit"/>
</form>
Selecciones. Etiquetas <select> y
<option>
Se usan para desplegables y listas. Se especifica un
nombre para el parámetro y se envía como valor el
contenido de la etiqueta <option>.Si especificamos el
atributo value en la etiqueta option. Se mostrará en el
desplegable el texto en el cuerpo de la etiqueta, pero se
enviará el valor especificado en el atributo value en
caso de ser la opción seleccionada.
Ejemplo:
<form action="pagina.jsp">
<select name="selectSimple">
<option value="1">Uno</option>
<option>Dos</option>
<option>Tres</option>
<option>Cuatro</option>
</select>
<input type="submit"/>
</form>
Codificación directa en el URL
● En algunos casos resulta útil enviar directamente
información a JSP, codificada en la URL.
● Ejemplo:
<a href="noticias.jsp?param=nacional">Actualidad</a> <br>
<a href="noticias.jsp?param=deportes">Deportes</a> <br>
<a href="noticias.jsp?param=sociedad">Sociedad</a> <br>
Debemos tener cuidado cuando enviemos caracteres especiales, para codifica
cadenas podemos usar la función estática String
java.net.URLEncoder.encode(String s).
● Ejemplo:
<%
String url="armas.jsp?tipo=cañón“;
String urlCodificada=
"armas.jsp?tipo="+java.net.URLEncoder.encode("cañón");%>
Pulse un enlace y compruebe los parámetros en la barra de direcciones.
<br>
<a href="<%=url%>"/>URL sin codificar</a>
<br>
<a href="<%=urlCodificada%>"/>URL codificada</a>
Espero te halla servido , gracias
por tu atención
● Presentado por :
● Paula Daniela
Rodriguez C.

Más contenido relacionado

La actualidad más candente

Redundancia de datos
Redundancia de datosRedundancia de datos
Redundancia de datos
diegorap
 
Busqueda Binaria
Busqueda BinariaBusqueda Binaria
Busqueda Binaria
ITCV
 
Practica utilizacion de beans en jsp
Practica  utilizacion de beans en jspPractica  utilizacion de beans en jsp
Practica utilizacion de beans en jsp
Boris Salleg
 
caracteristicas de una base de datos
caracteristicas de una base de datoscaracteristicas de una base de datos
caracteristicas de una base de datos
brayanalejandro0125
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
Doncho Minkov
 
PERSISTENCIA BASADA EN ARCHIVOS
PERSISTENCIA BASADA EN ARCHIVOSPERSISTENCIA BASADA EN ARCHIVOS
PERSISTENCIA BASADA EN ARCHIVOS
Darwin Durand
 
Lenguajes de bases de datos
Lenguajes de bases de datosLenguajes de bases de datos
Lenguajes de bases de datos
ralbarracin
 
5. arboles binarios
5. arboles binarios5. arboles binarios
5. arboles binarios
elcapo2008
 

La actualidad más candente (20)

CSS Layouting #5 : Position
CSS Layouting #5 : PositionCSS Layouting #5 : Position
CSS Layouting #5 : Position
 
CSS Dasar #9 : Inheritance
CSS Dasar #9 : InheritanceCSS Dasar #9 : Inheritance
CSS Dasar #9 : Inheritance
 
Basic perl programming
Basic perl programmingBasic perl programming
Basic perl programming
 
Introduction to xml
Introduction to xmlIntroduction to xml
Introduction to xml
 
Jmenubar
JmenubarJmenubar
Jmenubar
 
Redundancia de datos
Redundancia de datosRedundancia de datos
Redundancia de datos
 
Busqueda Binaria
Busqueda BinariaBusqueda Binaria
Busqueda Binaria
 
Practica utilizacion de beans en jsp
Practica  utilizacion de beans en jspPractica  utilizacion de beans en jsp
Practica utilizacion de beans en jsp
 
caracteristicas de una base de datos
caracteristicas de una base de datoscaracteristicas de una base de datos
caracteristicas de una base de datos
 
HTML Dasar : #9 Tabel
HTML Dasar : #9 TabelHTML Dasar : #9 Tabel
HTML Dasar : #9 Tabel
 
Get & post
Get & postGet & post
Get & post
 
HTML 5 Tables and Forms
HTML 5 Tables and FormsHTML 5 Tables and Forms
HTML 5 Tables and Forms
 
Conclusiones sobre bases de datos
Conclusiones sobre bases de datosConclusiones sobre bases de datos
Conclusiones sobre bases de datos
 
PERSISTENCIA BASADA EN ARCHIVOS
PERSISTENCIA BASADA EN ARCHIVOSPERSISTENCIA BASADA EN ARCHIVOS
PERSISTENCIA BASADA EN ARCHIVOS
 
HTML Dasar : #6 List
HTML Dasar : #6 ListHTML Dasar : #6 List
HTML Dasar : #6 List
 
Formularze progstrintzao
Formularze progstrintzaoFormularze progstrintzao
Formularze progstrintzao
 
Lenguajes de bases de datos
Lenguajes de bases de datosLenguajes de bases de datos
Lenguajes de bases de datos
 
Metodología Elicitacion de Requisitos
Metodología Elicitacion de RequisitosMetodología Elicitacion de Requisitos
Metodología Elicitacion de Requisitos
 
CSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSSCSS Dasar #2 : Anatomy CSS
CSS Dasar #2 : Anatomy CSS
 
5. arboles binarios
5. arboles binarios5. arboles binarios
5. arboles binarios
 

Destacado

Servlets y jsp
Servlets y jspServlets y jsp
Servlets y jsp
dtbadboy0
 
Manual programacion - java - jsp & xml
Manual   programacion - java - jsp & xmlManual   programacion - java - jsp & xml
Manual programacion - java - jsp & xml
gilhorak
 
Java Script BáSico Ajax
Java Script BáSico AjaxJava Script BáSico Ajax
Java Script BáSico Ajax
Arnulfo Gomez
 
Curso de-jsp-avanzado by-priale
Curso de-jsp-avanzado by-prialeCurso de-jsp-avanzado by-priale
Curso de-jsp-avanzado by-priale
SttOrm sindef
 
Programacion web java
Programacion web javaProgramacion web java
Programacion web java
César Ocampo
 

Destacado (20)

Servlets y jsp
Servlets y jspServlets y jsp
Servlets y jsp
 
JSP
JSPJSP
JSP
 
Manual programacion - java - jsp & xml
Manual   programacion - java - jsp & xmlManual   programacion - java - jsp & xml
Manual programacion - java - jsp & xml
 
Curso Jsp
Curso JspCurso Jsp
Curso Jsp
 
Java Script BáSico Ajax
Java Script BáSico AjaxJava Script BáSico Ajax
Java Script BáSico Ajax
 
Apache Tomcat 8: integración con Apache Server (con mod_jk)
Apache Tomcat 8: integración con Apache Server (con mod_jk)Apache Tomcat 8: integración con Apache Server (con mod_jk)
Apache Tomcat 8: integración con Apache Server (con mod_jk)
 
05 Creando Clases
05   Creando Clases05   Creando Clases
05 Creando Clases
 
Curso de-jsp-avanzado by-priale
Curso de-jsp-avanzado by-prialeCurso de-jsp-avanzado by-priale
Curso de-jsp-avanzado by-priale
 
Curso Jsp Mas
Curso Jsp MasCurso Jsp Mas
Curso Jsp Mas
 
Tema4 apartado4.2
Tema4 apartado4.2Tema4 apartado4.2
Tema4 apartado4.2
 
Tutorial jsp
Tutorial jspTutorial jsp
Tutorial jsp
 
JSP
JSP JSP
JSP
 
Curso Java Avanzado 3 Js Ps
Curso Java Avanzado   3 Js PsCurso Java Avanzado   3 Js Ps
Curso Java Avanzado 3 Js Ps
 
Programacion web java
Programacion web javaProgramacion web java
Programacion web java
 
Jsp servlet- Tutorial BD Conexión
Jsp servlet- Tutorial BD ConexiónJsp servlet- Tutorial BD Conexión
Jsp servlet- Tutorial BD Conexión
 
03 Oop
03   Oop03   Oop
03 Oop
 
Herramientas web 3.0
Herramientas web 3.0Herramientas web 3.0
Herramientas web 3.0
 
Diseño de páginas Web con HTML
Diseño de páginas Web con HTMLDiseño de páginas Web con HTML
Diseño de páginas Web con HTML
 
Jsp
JspJsp
Jsp
 
Curso: Programación Web con Tecnología Java
Curso:  	Programación Web con Tecnología JavaCurso:  	Programación Web con Tecnología Java
Curso: Programación Web con Tecnología Java
 

Similar a Comunicacion entre formularios HTML y paginas JSP

Formularios html
Formularios htmlFormularios html
Formularios html
BB
 
Presentacion De Formularios 1
Presentacion De Formularios 1Presentacion De Formularios 1
Presentacion De Formularios 1
Sonia Navarro
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
Erick Trejo
 
5 formularios - javascript
5   formularios - javascript5   formularios - javascript
5 formularios - javascript
carlos_hueyta
 

Similar a Comunicacion entre formularios HTML y paginas JSP (20)

formularioshtml.pdf
formularioshtml.pdfformularioshtml.pdf
formularioshtml.pdf
 
Formularios web
Formularios webFormularios web
Formularios web
 
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
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
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
 
Presentacion De Formularios 1
Presentacion De Formularios 1Presentacion De Formularios 1
Presentacion De Formularios 1
 
Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - Formularios
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Introducción a Javascript: Formularios
Introducción a Javascript: FormulariosIntroducción a Javascript: Formularios
Introducción a Javascript: Formularios
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
Papa
PapaPapa
Papa
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
5 formularios - javascript
5   formularios - javascript5   formularios - javascript
5 formularios - javascript
 
1
11
1
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Perez y sus cartas
Perez y sus cartasPerez y sus cartas
Perez y sus cartas
 
Clase 11 formularios
Clase 11 formulariosClase 11 formularios
Clase 11 formularios
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTML
 

Último

Evaluación del riesgo tecnologías informáticas.pdf
Evaluación del riesgo tecnologías informáticas.pdfEvaluación del riesgo tecnologías informáticas.pdf
Evaluación del riesgo tecnologías informáticas.pdf
GuillermoBarquero7
 
2da. Clase Mecanografía e introducción a Excel (2).pptx
2da. Clase Mecanografía e introducción a Excel (2).pptx2da. Clase Mecanografía e introducción a Excel (2).pptx
2da. Clase Mecanografía e introducción a Excel (2).pptx
EncomiendasElSherpa
 

Último (6)

Evaluación del riesgo tecnologías informáticas.pdf
Evaluación del riesgo tecnologías informáticas.pdfEvaluación del riesgo tecnologías informáticas.pdf
Evaluación del riesgo tecnologías informáticas.pdf
 
Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200Caso de éxito de Hervian con el ERP Sage 200
Caso de éxito de Hervian con el ERP Sage 200
 
Caso de Exito LPL Projects Logistics Spain y Business Central
Caso de Exito LPL Projects Logistics Spain y Business CentralCaso de Exito LPL Projects Logistics Spain y Business Central
Caso de Exito LPL Projects Logistics Spain y Business Central
 
ESCRITORIO DE WINDOWS 11 Y SUS ELEMENTOS
ESCRITORIO DE WINDOWS 11 Y SUS ELEMENTOSESCRITORIO DE WINDOWS 11 Y SUS ELEMENTOS
ESCRITORIO DE WINDOWS 11 Y SUS ELEMENTOS
 
2da. Clase Mecanografía e introducción a Excel (2).pptx
2da. Clase Mecanografía e introducción a Excel (2).pptx2da. Clase Mecanografía e introducción a Excel (2).pptx
2da. Clase Mecanografía e introducción a Excel (2).pptx
 
Trabajo de Powerpoint - Unsaac - Ofimática
Trabajo de Powerpoint - Unsaac - OfimáticaTrabajo de Powerpoint - Unsaac - Ofimática
Trabajo de Powerpoint - Unsaac - Ofimática
 

Comunicacion entre formularios HTML y paginas JSP

  • 2. En esta sección se hará un breve repaso a los formularios HTML ● Un formulario HTML tiene la forma : < form action =”destino” method=”metodo”> elementos de formulario </form> ● En destino especificaremos la pagina que recibe los datos del formulario en el atributo method podemos indicar 2 valores diferentes GET y POST.
  • 3. GET ● Cuando usamos GET, la información se codifica directamente en la URL, con la forma: ● http://url?param1=valor1&param2=valor2...&param N=valorN ● Con GET no podemos manejar grandes cantidades de información, y existe la desventaja de que el servidor o el navegador guarden en caché la página llamada.
  • 4. ● Hay que tener en cuenta que los logs del servidor y el historial del navegador guardarán el acceso incluyendo los parámetros, lo cual hace desaconsejable GET para el envío de información privada. ● Por otro lado, al visualizarse en la URL los parámetros, facilita el desarrollo y depurado de la aplicación web, y en algunos casos, es imprescindible para realizar estadísticas basadas en los logs del servidor.
  • 5. POST Con POST la información se envía directamente al servidor, no se codifica en la URL, y además permite el envío de grandes cantidades de información, como podrían ser archivos.
  • 6. ELEMENTOS DE FORMULARIO ● Se indican con las etiquetas HTML: <input type="tipo" name="nombre" value="valor "/> <textarea name="nombre"/>Contenido por defecto </textarea> <select name="nombre"> <option value="valorOpcion">Texto opcion</option> [...] </select> ● Para enviar los datos usamos el tiposubmit. ● <input type="submit"/>
  • 7. Campos de texto ● Los tipos que se envían como texto simple son text y password para <input>, y el elemento <textarea>. ● Ejemplo: <form action="pagina.jsp"> <input type="text" name="parametro1 "value="valor por defecto"/> <br> <input type="password" name="clave"/> <br>
  • 8. <textarea name="parametro2">Texto por defecto</textarea> <br> <input type="submit"/> </form> ● Y en el archivo pagina.jsp: ● Valor de parametro1: <%=request.getParameter("parametro1") %> ● <br> ● Valor de parametro2: <%= request.getParameter("parametro2") %> ● <br> ● Valor de parametro ‘clave’:<%= request.getParameter("clave") %>
  • 9. Selectores ON/OFF . Checkbox ● Se indica con el tipo checkbox. <input type="checkbox" name="nombreCheckbox "/> ● Si el checkbox está marcado, se envía un parámetro con el nombre especificado con el valor on. ● Si no está marcado, no se envía el parámetro. Así que podemos recibirlo en JSP de la siguiente forma:
  • 10. <% String checkbox= request.getParameter("nombreCheckbox"); if (checkbox!=null && checkbox.equalsIgnoreCase("on")) { %> Checkbox seleccionado en el formularioorigen. <% } else { ● %> ● Checkbox NO seleccionado en el formulario origen. ● } ● %>
  • 11. Parámetros ocultos. Tipo hidden ● Se indican con el tipo hidden, los pares clave valor indicados se enviaran siempre junto con el resto de información del formulario. Se reciben en el JSP de la misma forma que los campos de texto. Ejemplo: <form action="pagina.jsp"> <input type="text" name="variable" value="por defecto"/> <input type="hidden" name="fijo" value="valor fijo"/> </form>
  • 12. Botones radio ● Son grupos de valores ON/OFF, sólo puede haber uno seleccionado dentro del grupo con el mismo nombre en el atributo name. Sólo se envía un parámetro para el botón seleccionado, con el valor indicado en la etiqueta value. El valor se recibe en el JSP de forma similar a los campos de texto. ● Ejemplo <form action="pagina.jsp"> Opcion 1 <input type="radio" name="radio“ value="uno"/> <br> Opcion 2 <input type="radio" name="radio" value="dos"/> <br> <input type="submit"/> </form>
  • 13. Selecciones. Etiquetas <select> y <option> Se usan para desplegables y listas. Se especifica un nombre para el parámetro y se envía como valor el contenido de la etiqueta <option>.Si especificamos el atributo value en la etiqueta option. Se mostrará en el desplegable el texto en el cuerpo de la etiqueta, pero se enviará el valor especificado en el atributo value en caso de ser la opción seleccionada.
  • 14. Ejemplo: <form action="pagina.jsp"> <select name="selectSimple"> <option value="1">Uno</option> <option>Dos</option> <option>Tres</option> <option>Cuatro</option> </select> <input type="submit"/> </form>
  • 15. Codificación directa en el URL ● En algunos casos resulta útil enviar directamente información a JSP, codificada en la URL. ● Ejemplo: <a href="noticias.jsp?param=nacional">Actualidad</a> <br> <a href="noticias.jsp?param=deportes">Deportes</a> <br> <a href="noticias.jsp?param=sociedad">Sociedad</a> <br>
  • 16. Debemos tener cuidado cuando enviemos caracteres especiales, para codifica cadenas podemos usar la función estática String java.net.URLEncoder.encode(String s). ● Ejemplo: <% String url="armas.jsp?tipo=cañón“; String urlCodificada= "armas.jsp?tipo="+java.net.URLEncoder.encode("cañón");%> Pulse un enlace y compruebe los parámetros en la barra de direcciones. <br> <a href="<%=url%>"/>URL sin codificar</a> <br> <a href="<%=urlCodificada%>"/>URL codificada</a>
  • 17. Espero te halla servido , gracias por tu atención ● Presentado por : ● Paula Daniela Rodriguez C.