SlideShare a Scribd company logo
1 of 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.

More Related Content

What's hot (20)

Key and its different types
Key and its different typesKey and its different types
Key and its different types
 
Método de Búsqueda Hash
Método de Búsqueda HashMétodo de Búsqueda Hash
Método de Búsqueda Hash
 
Rdbms (2)
Rdbms (2)Rdbms (2)
Rdbms (2)
 
Xml
XmlXml
Xml
 
Basic Html Notes
Basic Html NotesBasic Html Notes
Basic Html Notes
 
Html forms
Html formsHtml forms
Html forms
 
Content Storage With Apache Jackrabbit
Content Storage With Apache JackrabbitContent Storage With Apache Jackrabbit
Content Storage With Apache Jackrabbit
 
Unit 1: Introduction to DBMS Unit 1 Complete
Unit 1: Introduction to DBMS Unit 1 CompleteUnit 1: Introduction to DBMS Unit 1 Complete
Unit 1: Introduction to DBMS Unit 1 Complete
 
RELATIONSHIP IN DBMS.pptx
RELATIONSHIP IN DBMS.pptxRELATIONSHIP IN DBMS.pptx
RELATIONSHIP IN DBMS.pptx
 
Html forms
Html formsHtml forms
Html forms
 
Html Form Controls
Html Form ControlsHtml Form Controls
Html Form Controls
 
Functional dependancy
Functional dependancyFunctional dependancy
Functional dependancy
 
ER-Model-ER Diagram
ER-Model-ER DiagramER-Model-ER Diagram
ER-Model-ER Diagram
 
Database user’s
Database user’sDatabase user’s
Database user’s
 
Lecture 01 introduction to database
Lecture 01 introduction to databaseLecture 01 introduction to database
Lecture 01 introduction to database
 
Heap sort
Heap sortHeap sort
Heap sort
 
File systems versus a dbms
File systems versus a dbmsFile systems versus a dbms
File systems versus a dbms
 
2. html attributes
2. html attributes2. html attributes
2. html attributes
 
Introdução ao MongoDB em 30 slides
Introdução ao MongoDB em 30 slidesIntrodução ao MongoDB em 30 slides
Introdução ao MongoDB em 30 slides
 
How to Design Indexes, Really
How to Design Indexes, ReallyHow to Design Indexes, Really
How to Design Indexes, Really
 

Viewers also liked

Viewers also liked (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 to Comunicacion entre formularios HTML y paginas JSP

Similar to 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
 

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.