Semana 3-4 Practica 2 Formularios

Practica
Formularios de
Captura de
Informacion
Practica formularios de captura
informacion
La Web 2.0 está completamente enfocada en el usuario. Y cuando el
usuario es el centro de atención, todo está relacionado con interfaces, en
cómo hacerlas más intuitivas, más naturales, más prácticas, y por supuesto
más atractivas.
FORMULARIOS EN Los formularios web son la interface más importante de todas, permiten a
los usuarios insertar datos, tomar decisiones, comunicar información y
HTML cambiar el comportamiento de una aplicación. Durante los últimos años,
códigos personalizados y librerías fueron creados para procesar
formularios en el ordenador del usuario.
HTML5 vuelve a estas funciones estándar agregando nuevos atributos,
elementos y una API completa. Ahora la capacidad de procesamiento de
información insertada en formularios en tiempo real ha sido incorporada
en los navegadores y completamente estandarizada.
FORMULARIOS
 Los formularios web dentro de una página web permiten al

usuario introducir datos los cuales son enviados a un servidor
para ser procesados.
 Los formularios web pueden ser usados para suscripciones,

encuestas, elección de opciones, enviar palabras para los
buscadores y también para consultar o mostrar información.
Etiquetas
 <form> </form> Esta etiqueta encierra al resto de
etiquetas que pueden componer el formulario.
 <input> Es la que permite al usuario meter los datos
a enviar como texto
 <select> </select> Presenta al usuario una lista de
opciones para que escoja una.
 <textarea> </textarea> Un espacio donde el usuario
puede escribir libremente.
 <label> </label> Identifica el tipo de dato que se
espera con un pequeño texto al lado de cada campo.
Atributos
<form xxxx> </form>

method especifica la forma en la que los datos del
formulario son enviados ya sea get o post
action indica el destino de los datos.
enctype se usa para indicar la forma en que viajará la

información que se mande a través del formulario. La más
común es que la información se envía como texto plano
(enctype=”text/plain”)
Atributos
<html>
<head>
<title>mi formulario</title>
</head>
<body>
<form method="post" action="mailto:webmaster@ignside.net"
enctype="text/plain">
</form>
</body>
</html>
Atributos
 <input xxxx />
type
"text" permitimos la entrada de texto por el usuario.
"password" el texto introducido no se visualiza en la pantalla.
"submit" no genera un campo de entrada, sino un botón, y
es el que, al pulsarlo, ordena el envió de la información a su destino.
"reset" presenta un botón que, al ser pulsado, borra todos
los campos del formulario.
name identificativo.
value presentar al usuario un valor por defecto.
size longitud del campo de introducción de datos.
maxlength número máximo de caracteres que puede teclear el usuario.
Atributos
 <input xxxx />
 type=“hidden"se trata de un campo oculto, y como tal, no
sirve para que el usuario remita información.
 type=“image"se pulsa sobre una imagen. Requiere el
atributo src=""
 type="file" permite subir archivos al servidor de la página
Web.
 type="radio" el usuario puede seleccionar una de varias
opciones disponibles
 type="checkbox" el usuario puede escoger más de una de
las opciones presentadas.
Ejemplos
<form>
<input type="text" name="remitente" value="" size="35"
maxlength="10">
<input type="password" name="contraseña" size="35"
maxlength="10">
<input type="submit" value="Enviar consulta">
</form>
Ejemplos
<form>
<input type="text" name="remitente" value="escribe
algo aquí" /><input type="reset“/>
</form>
<form>
<input type="file" name="cualquierarchivo">
</form>
Ejemplos
<form>
<h3>selecciona tu editor favorito:</h3>
<input type="radio" name="editorfavorito" value="html-kit"/>
html-kit <br />
<input type="radio" name="editorfavorito" value="front-
page"/>
front-page <br/>
</form>
Ejemplos
<form>
<b>selecciona tu editor favorito:</b><br />
<input type="radio" name="editorfavorito2"
value="html-kit" checked /> html-kit <br />
<input type="radio" name="editorfavorito2"
value="front-page"/>
front-page <br/>
</form>
Ejemplos
<form>
<b>selecciona tu helado favorito:</b><br />
<input type="checkbox" name="chocolate"
value="yes" checked /> chocolate <br />
<input type="checkbox" name="limon"
value="yes"/> lemon <br/>
</form>
Atributos
 <select xxxx> </select>
name="helados" Le da un nombre al menú.
size="6" Ajusta la ventana del menú al tamaño deseado.
múltiple Seleccionar varios ítems de la lista de abajo
pulsando ctrl o shift
 <option xxxxx></option>
name="helados" Le da nombre articulo del menú.
selected La opción que aparece seleccionada por defecto
es la primera de la lista
Ejemplos
<form>
<select name="helados">
<option value="chocolate">chocolate</option>
<option value="limon">limón</option>
<option value="fresa">fresa</option>
<option value="nata">nata</option>
<option value="pistacho">pistacho</option>
<option value="turron">turrón</option>
</select>
</form>
Atributos
<textarea xxxx> </textarea>

name Agrega un nombre a el recuadro.
cols Define un numero de col,umnas.
rows Define un numero de filas.
readonly impide que el contenido escrito en el área de texto
pueda ser editado por quienes vean la página
disabled desactiva el elemento no puede ser editado por el
usuario, tampoco será enviado con el formulario ni puede
tener el foco del navegador.
Ejemplos
<textarea name="comentarios" rows="5" cols="45">

</textarea>
Como se establecio anteriormente la comunicación entre
el cliente y el servidor se lleva a cabo mediante el
protocolo de comunicación HTTP el cual consta de
peticiones (request) y respuestas (response).
La petición de una Entre los tipos de peticiones HTTP más conocidas están:
pagina con el
• GET y POST, las cuales sirven para pasar información
(parámetros) del cliente al servidor.
método GET • La petición GET se utiliza para solicitar datos que están
en el servidor, por ejemplo, para solicitar una página.
• Las peticiones GET se pueden guardar en el historial de

navegación, se pueden indexar en los buscadores, o
agregar a enlaces favoritos. La información que se
envía en el GET normalmente es una liga. Get contiene
mucho menos información que POST.
La petición POST sirve para enviar
información al servidor para que ésta sea
La petición de una procesada. Una vez que se procesa, se
envía en la respuesta al navegador alguna
pagina con el página con información. En una petición
POST puede viajar mucho más
método POST información. El valor de los parámetros
que proporcionó el usuario en una
petición POST, se encuentran dentro de
un objeto llamado request.
Method get
• Designado para obtener
información (un documento, un
gráfico o el resultado de la
consulta a una BD)
• Usado al escribir una URL en el
navegador
• Usado cuando se clica en un
hiperlink
Method Post
Designado para enviar información (un nº
de tarjeta de crédito, nuevos datos o
información para guardar en una BD)
Ejercicios
Confeccionar un formulario que contenga un
cuadro de texto donde el visitante debe ingresar
su nombre y un botón de tipo submit para el envío
de los datos ingresados al servidor (tener en
cuenta que la página que procesa los datos del
formulario en el servidor se encuentra en el sitio y
se llama: registrardatos.php)
Ejercicio propuesto: Confeccionar un formulario que solicite el ingreso del nombre de una persona y su edad. Luego
llamar a la página "registrardatos.php" para que imprima en pantalla los valores ingresados. Disponer un botón de tipo
submit para el envío de los datos.
Confeccionar un formulario que solicite el
ingreso del nombre de un usuario y su
clave. Mostrar asteriscos donde se ingresa
la clave. Disponer dos botones, uno para
el envío de datos al servidor y otro para
borrar el contenido de todos los controles
(editores de texto) que contiene el
formulario.
Ejercicio propuesto: Confeccionar un formulario que solicite el ingreso de mail de una persona y luego pida el
ingreso de su clave dos veces (recordar inicializar la propiedad name del elemento input con distintos
nombres para cada control)
Confeccionar un formulario para que un visitante
pueda ingresar su nombre, su mail y un
comentario del sitio, empleando para este último
dato a ingresar un elemento de tipo textarea.
Ejercicio propuesto: Confeccionar un formulario que

permita ingresar el nombre de una persona, su mail, su dni
(documento nacional de identidad) y finalmente su
curriculum (este último dato hacerlo utilizando un textarea)
Implementar un formulario que solicite el ingreso del
nombre de una persona y 4 elementos de tipo
checkbox para que seleccione los lenguajes de
programación que conoce.
Ejercicio propuesto: Confeccione un formulario que solicite

el ingreso de un mail, una clave y luego muestre una serie
de títulos de películas con su respectivo checkbox.
Disponer también del botón de tipo submit para el envío
de datos al servidor.
Solicitar el ingreso del nombre de una persona y
el máximo nivel en estudios alcanzado (sin
estudios, estudios primarios, estudios
secundarios o estudios universitarios)
Ulitilzar controles de tipo radio para la selección
de estudios realizados.

solicite cual sistema operativo utiliza más (linux ,window,
Mac, Solaris).
Confeccionar un formulario que solicite cargar el nombre de
una persona y el pais donde vive, este último elemento
mediante un control de tipo select permitir seleccionar el
pais. (Agregue la propiedad size al elemento select con el
valor 5)

solicite el ingreso del nombre de una persona y permita
votar el sitio. Mediante un cuadro de selección el visitante
puede elegir entre las siguientes opciones: Excelente, Muy
Bueno, Bueno, Regular y Malo.
Confeccionar un cuadro de selección múltiple para
elegir colores de una lista. Permitir la selección de
varios colores.

muestre en un control select un serie de mail. Luego
permitir que el visitante seleccione uno o varios mail del
cuadro de selección.
Confeccionar un formulario que solicite el ingreso del
nombre, mail y comentarios de un visitante al sitio.
Asociar cada control con un elemento label.
Ejercicio propuesto: Confeccionar una página que permita

calificar un sitio. Se debe ingresar el nombre y mediante un
control de tipo select elegir un valor entre 1 y 10. Asociar
elementos de tipo label a cada control.
Crea una página web que contenga un
formulario con los siguientes campos de
información:
1. El nombre, con un control de tipo texto.
2. Los apellidos, con un control de tipo texto.
3. El sexo, con dos opciones excluyentes
hombre o mujer.
4. El correo electrónico, con un control de tipo
texto.
5. Una casilla de verificación con el texto
"Deseo recibir información sobre novedades y
ofertas".
6. Una casilla de verificación con el texto
"Declaro haber leido y aceptar las condiciones
generales del programa y la normativa sobre
protección de datos".
7. Un botón de envío.
Crea una página web que contenga un formulario con los
siguientes campos de
información:
1. El nombre, con un control de tipo texto.
2. Los apellidos, con un control de tipo texto.
3. El sexo, con dos opciones excluyentes hombre o mujer.
4. El correo electrónico, con un control de tipo texto.
5. Una casilla de verificación con el texto "Deseo recibir
información sobre
novedades y ofertas".
6. Una casilla de verificación con el texto "Declaro haber
leido y aceptar las
condiciones generales del programa y la normativa sobre
protección de
datos".
7. Un botón de envío.
Al formulario anterior le tienes que añadir los siguientes
campos de información:
•Población, una lista desplegable con las opciones Alicante,
Madrid, Sevilla y Valencia.
•Descripción, un área de texto multilínea

Semana 3-4 Practica 2 Formularios

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Semana 3-4 Practica 2 Formularios

Cargado por

Copyright:

Formatos disponibles

Practica

 Los formularios web dentro de una página web permiten al

 Los formularios web pueden ser usados para suscripciones,

<form xxxx> </form>

action indica el destino de los datos.

enctype se usa para indicar la forma en que viajará la

<textarea xxxx> </textarea>

<textarea name="comentarios" rows="5" cols="45">

• Las peticiones GET se pueden guardar en el historial de

Ejercicio propuesto: Confeccionar un formulario que

Ejercicio propuesto: Confeccione un formulario que solicite

Ejercicio propuesto: Confeccionar un formulario que

Ejercicio propuesto: Confeccionar un formulario que

Ejercicio propuesto: Confeccionar un formulario que

Ejercicio propuesto: Confeccionar una página que permita

También podría gustarte