Formulario PDF

UNIDAD II.
DESARROLLO
DE FRONT END
Formularios
Materia: APLICACIONES WEB
2020
Contenido
INTRODUCCIÓN ....................................................................................................................................... 3
CAMPOS DE TEXTO DE UNA SOLA LÍNEA .............................................................................................. 3
CAMPO DE TEXTO MULTILÍNEA ............................................................................................................ 3
CASILLAS DE VERIFICACIÓN .................................................................................................................. 4
BOTONES DE OPCIÓN........................................................................................................................... 4
LISTAS .................................................................................................................................................. 5
BOTONES DE ENVÍO ............................................................................................................................. 6
BOTONES DE REINICIO ......................................................................................................................... 6
ETIQUETADO DE CONTROLES ............................................................................................................... 7
AGRUPACIÓN DE CONTROLES .............................................................................................................. 7
PRACTICA 1 .............................................................................................................................................. 8
PRÁCTICA 2 .............................................................................................................................................. 9
PRÁCTICA 3 ............................................................................................................................................ 10
PRÁCTICA 4 ............................................................................................................................................ 12
FORMULARIO DE AUTORIA .................................................................................................................... 15
BIBLIOGRAFIA ........................................................................................................................................ 17
INTRODUCCIÓN
Los formularios en HTML sirven al propósito de recolectar información proporcionada por los visitantes
del sitio, la cual es luego enviada nuevamente al servidor. Para su correcto funcionamiento es
importante que el formulario provisto en HTML sea acompañado de un código del lado servidor, al que
denominaremos "agente procesador", que se encargará de recibir y procesar la información como el
autor vea conveniente. Este procesamiento puede consistir en, por ejemplo, el almacenamiento de la
información o su envío mediante correo electrónico.
Un formulario (form) es básicamente un contenedor para controles. Cada control en un formulario está
pensado para recolectar información ingresada por los usuarios, en formas que pueden ir desde líneas
de texto a subida de archvios, pasando por opciones, fechas, contraseñas y mucho más. Una vez que los
usuarios han rellenado el formulario con los datos, pueden enviarlo de regreso al servidor para que el
agente procesador administre la información recolectada.
Los controles de texto proveen los medios necesarios para recolectar información textual, como
nombres, direcciones, frases, mensajes, contraseñas, etc. En las secciones siguientes analizaremos dos
de los controles de texto más básicos y utilizados.
CAMPOS DE TEXTO DE UNA SOLA LÍNEA
Un campo de texto de una sola línea, que permite el ingreso de una única línea de texto,
es uno de los tantos controles que se declaran con el elemento input. En este caso,
el elemento input debe tener el valor "text" en su atributo type.
Cuando la tecla ENTER es presionada en este tipo de campos, los navegadores habitualmente
envían el formulario que los contiene, en lugar de pasar a una nueva línea del control. Esto se
debe a la naturaleza del control que solo acepta una línea de texto.
Con sólo esto, el control ya es visible, pero se necesita de un nombre (en el atributo name) si existe la
intención de recolectar la información ingresada por el usuario en este control. El valor del
atributo name identificará, en el lado servidor, a los datos ingresados por el usuario en el control. El
siguiente ejemplo muestra una implementación básica de un control de texto de una sola línea.
Adicionalmente, estaremos encerrando al control y su etiqueta en un párrafo, ya que puede
considerarse a estos dos como una unidad con un idea que los separa del resto.
<form action="../form-result.php" target="_blank">
<p>
Ingresa tu nombre completo: <input type="text" name="nombrecompleto">
<input type="submit" value="Enviar la información">
</p>
</form>
CAMPO DE TEXTO MULTILÍNEA

Este tipo de control es muy similar al anterior, pero tiene la particularidad de permitir el ingreso de
mútiples líneas de texto. Un campo de texto multilíea es habitualmente representado como una caja, lo
suficientemente alta como para contener más de una línea de texto a la vez. Esta representación,
usualmente provee un mecanismo de desplazamiento para permitir a los usuarios ver todo el texto
ingresado, especialmente cuando es lo suficientemente largo como para exceder los límites de la caja.
Un campo de texto multilínea se inserta con el elemento textarea. Como anteriormente, el

atributo name provee un nombre para el control que ayudará al agente procesador a identificar la
información enviada por el usuario.
En el siguiente ejemplo mejoraremos el formulario anterior para permitir al usuario ingresar ambos tipos
de cadenas de texto (de una sola línea y multilínea). En el ejemplo propuesto, cada control se adapta
mejor al tipo de información que debe recolectar.
<form action="../form-result.php" target="_blank">
<p>Ingresa tu nombre completo: <input type="text" name="nombrecompleto"></p>
<p>
Deja un mensaje:<br>
<textarea name="mensaje"></textarea>
</p>
<input type="submit" value="Enviar la información">
</form>
CASILLAS DE VERIFICACIÓN
Una casilla de verificación es un tipo particular de opción que puede ser seleccionada o deseleccionada
mediante la interacción del usuario. Esto permite a los autores recolectar información como
preferencias, aceptación de términos y condiciones, categorías, o cualquier otra cosa que pueda ser
respondida mediante "sí" y "no". Una cosa que este control tiene de particular es que, aún cuando
puede ser declarado como parte de un grupo temático, cada casilla es independiente de todas las demás
en el formulario.
Las casillas de verificación son representadas por el elemento input, cuando tiene el valor "checkbox" en
el atributo type. Aquí el valor del atributo name también juega un rol, identificando a la opción del lado
servidor. En el siguiente ejemplo, unas cuantas casillas de verificación han sido declaradas como parte de
un grupo temático de opciones. Recuerda que esta agrupación está hecha únicamente por temática y
posición; la selección de las casillas continúa siendo independiente.
<form action="../../form-result.php" target="_blank">
<p>
Selecciona tus intereses:<br>
<input type="checkbox" name="peliculas"> Películas<br>
<input type="checkbox" name="deportes"> Deportes<br>
<input type="checkbox" name="videojuegos"> Videojuegos
</p>
<p><input type="submit" value="Enviar información"></p>
</form>
BOTONES DE OPCIÓN
Mientras que las casillas de verificación son independientes y pueden ser declaradas por sí mismas, los
botones de opción necesitan ser agrupados a fin de tener sentido. Los grupos de botones de opción
tienen una particularidad que juega un rol importante en su conducta: sólo una opción puede ser
seleccionada por vez en todo el grupo. Esto significa, entre otras cosas, que cuando seleccionas una
opción, la opción que estaba anteriormente seleccionada se deselecciona.
Un botón de opción también se declara con el elemento input, pero con el valor "radio" en su
atributo type. Aquí las cosas se vuelven un poco diferentes a como eran con las casillas de verificación,
debido a que el valor del atributo name necesita ser compartido por todas las opciones en un mismo
grupo. En otras palabras, este es el mecanismo que se requiere utilizar para crear un grupo de botones
de opción.
Pero entonces, ¿dónde está el valor que le dice al agente procesador qué opción ha sido seleccionada?
La respuesta a esta pregunta está en el atributo value. Ya que el propósito de este atributo es identificar
a las opciones de un grupo, su valor debe ser diferente para cada opción.
En el siguiente ejemplo un grupo de botones de opción ha sido declarado para conformar un grupo
donde sólo una opción puede ser elegida, algo que tiene mucho sentido en este contexto. Para este
propósito, todos los botones comparten el mismo nombre (name) y tienen, cada uno, un valor diferente
(value).
<p>
Ingresos:<br>
<input type="radio" name="ingresos" value="menosde1000"> Menos de than
$1,000.00<br>
<input type="radio" name="ingresos" value="de1000a5000"> De $1,000.00 a
$5,000.00<br>
<input type="radio" name="ingresos" value="masde5000"> Más de $5,000.00
</p>
</form>
LISTAS
Una lista de opciones es un control que puede asemejarse, en cuanto a su mecánica, a cada uno de los
controles analizados previamente, dependiendo de la presencia del atributo booleano multiple. Este
atributo cambia radicalmente la conducta de una lista, haciendo posible la selección de una sola opción a
la vez o de muchas.
La estructura de una lista está compuesta, principalmente, por dos elementos: select, que actúa como
contenedor para las opciones; y option, que representa una de las muchas opciones que el control
puede presentar.
Cuando el atributo multiple se encuentra ausente, un control de lista se comporta como un grupo de
botones de opción, donde sólo una opción puede ser seleccionada por vez. El próximo ejemplo refleja
esta conducta, lo que encaja perfectamente con el propósito del campo.
Si el atributo size tiene un valor de "1" y el atributo multiple se encuentra ausente,

los navegadores habitualmente muestran a este control como una lista desplegable.
En cualquier otro caso, el control toma la forma de una caja desplazable.

<p>
Género:
<select name="genero">
<option>Masculino</option>
<option>Femenino</option>
</select>
</p>
</form>
BOTONES DE ENVÍO
Un botón de envío tiene la acción predefinida de enviar el formulario al que pertenece cuando es
activado. A menos que otro mecanismo de envío sea provisto, la presencia de este botón es necesaria si
existe la intención de permitir a los usuarios enviar el formulario. Ya hemos visto este control en los
ejemplos anteriores, así que su conducta nos debería resultar natural.
Los botones de envío son insertados con el elemento input, teniendo el valor "submit" en su
atributo type. El atributo value es importante en este control, ya que su valor es mostrado a modo de
etiqueta dentro del botón. El siguiente ejemplo muestra un formulario con un control de texto y un
botón de envío.
<p>
Edita tu descripción:
<input type="text" name="desc">
<input type="submit" value="Guardar cambios">
</p>
</form>
BOTONES DE REINICIO
Como los botones de envío, los de reinicio también tienen una acción predefinida. Pero en este caso, la
acción predefinida consiste en el reinicio de la información de los campos del formulario a sus valores
iniciales. En otras palabras, el estado de los campos en un formulario que ha sido reiniciado es el mismo
que tenía cuando la página ha sido cargada. Esta acción elimina todos los cambios que haya realizado el
usuario a los valores de los controles.
Sería bueno notar aquí que todos los controles pueden tener un valor predefinido, esto es, un valor que
está presente en el formulario cuando la página es cargada. La forma que los autores tienen para
especificar este valor inicial depende del control. Para saber cómo especificar un valor por defecto en un
tipo particular de control, revisa la referencia para ese control en esta lista.
En el siguiente ejemplo podrás probar la funcionalidad del botón de reinicio. Este formulario ha sido
declarado con un campo de texto de una sola línea, un par de botones de opción y una casilla de
verificación. Todos estos controles tienen un valor por defecto especificado con los
atributos value y checked, dependiendo del caso.
<p>Enviar mensaje: <input type="text" name="mensaje" value="Estoy
listo!"></p>
<p>
<input type="radio" name="cuando" value="hoy" checked> Hoy<br>
<input type="radio" name="cuando" value="manana"> Mañana
</p>
<p><input type="checkbox" name="copia" checked> Enviarme una copia</p>
<p>
<input type="reset" value="Reiniciar el formulario">
<input type="submit" value="Enviar mensaje">
</p>
</form>
ETIQUETADO DE CONTROLES
Casi cualquier control en un formulario puede ser etiquetado. El etiquetado de controles en una
operación provechosa que mejora la accesibilidad en muchos frentes. Esta asociación entre un trozo de
texto y un control resolverá el problema señalado en ejemplos anteriores de este tutorial,
particularmente con botones de opción y casillas de verificación.
Una etiqueta puede asignarse con el elemento label. El más fácil de los dos métodos que existen para
asignar una etiqueta a un control, consiste en declarar a ambos, el texto y el control, como contenido
del elemento label. El siguiente ejemplo tiene un par de controles asociados a etiquetas mediante este
método. Allí puedes ver cómo un control recive el enfoque cuando su etiqueta es activada.
<p><label>Nombre: <input type="text" name="nombre"></label></p>
<p>
Género:
<label><input type="radio" name="genero" value="masculino">
Masculino</label>
<label><input type="radio" name="genero" value="femenino">
Femenino</label>
</p>
<p><label><input type="checkbox" name="novedades"> Me gustaría recibir
novedades</label></p>
<p><input type="submit" value="Enviar datos"></p>
</form>
AGRUPACIÓN DE CONTROLES
A veces, cuando un formulario es grande, la segmenctación podría jugar un rol en el mejoramiento de la
organización y la facilidad de uso. Este es el motivo por el que HTML provee el elemento fieldset, el cual
actúa como un contenedor de controles. Con este elemento, los autores pueden hacer divisiones al
formulario y organizar los controles temáticamente.
Un grupo fieldset puede además tener un título para identificar la composición o el propósito del
conjunto de controles que contiene. Este título puede ser provisto por el elemento legend, el cual debe
ser declarado como primer hijo del grupo (fieldset). El siguiente ejemplo muestra un formulario pequeño
dividido en dos grupos temáticos.
<fieldset>
<legend>Información personal</legend>
<p><label>Nombre: <input type="text" name="nombre"></label></p>
<p><label>Dirección: <input type="text" name="direccion"></label></p>
</fieldset>
<fieldset>
<legend>Preferencias</legend>
<p>
<label><input type="checkbox" name="arte"> Arte</label><br>
<label><input type="checkbox" name="television"> Televisión</label><br>
<label><input type="checkbox" name="videojuegos">
Videojuegos</label><br>
<label><input type="checkbox" name="deportes"> Deportes</label><br>
</p>
</fieldset>
<input type="submit" value="Enviar">
</form>
PRACTICA 1
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="uft-8">
<meta name="formulario" content="práctica 1">
<meta name="formulario" content="formulario">
<title>Práctica 1</title>
<link rel="Práctica" href="formulario1.html">
</head>
<body>
<center>
<header>
<h1>PRÁCTICA 1</h1>
</header>
<nav>
</nav>
<section>
<article>
<header>
<hgroup>
</hgroup>
</header>
</center>
<form target="_blank">
<h1>Un formulario</h1>
<p>Rellene por favor el siguiente formulario con atencion y s
in dejarse ningun dato</p>
<p>Nombre: <input type="text" name="nombrecompleto"> Contras
ena: <input type="nvarchar" name="Contrasena"></p>
<p>
Estado civil:</br>
<input type="checkbox" name="soltero"> Soltero
<input type="checkbox" name="casado"> Casado
<input type="checkbox" name="separado"> Separado
<input type="checkbox" name="viudo"> Viudo
</p>
<p>
Numero de hijos:<br>
<input type="radio" name="hijos" value="0"> Ninguno
<input type="radio" name="hijos" value="1"> Uno
<input type="radio" name="hijos" value="2"> Dos
<input type="radio" name="hijos" value="+2"> Mas de 2
</p>
<input type="reset" value="Borrar formulario">
<input type="submit" value="Enviar contenido del formulario
">
<input type="button" value="Boton sin funcion">
</form>
PRÁCTICA 2
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<center>
<header>
</header>
<nav>
</nav>
<section>
<article>
<header>
<hgroup>
</hgroup>
</header>
</center><br/>
<h1>Rellena tu CV</h1><br/>
<p>Nombre: </p>
<p><input type="text" id="nombre" name="nombres"></p>
<p>Apellidos:</p>
<p><input type="text" size="50" id="apellidos" name="apel
lidos"></p>
<p>Contrasena</p>
<p><input type="password" id="contrasena" name="Contrasen
a"></p>
<p>DNI</p>
<p><input type="text" size="10" name="DNI"></p>
<p>
Sexo<br>
<p>Hombre <input type="radio" id="Hombre" name="radio"></
p>
<p>Mujer <input type="radio" id="Mujer" name="radio"></p>
</p>
<p>Incluir mi foto <input type="file" id="Elegir" name="file"
> </p>
<p><input type="checkbox" name="suscribirse" checked> Suscrib
irme al boletin de novedades</p>
<input type="submit" value="Guardar cambios">
<input type="reset" value="Borrar los datos introducidos">
</form>
PRÁCTICA 3
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<center>
<header>
</header>
<nav>
</nav>
<section>
<article>
<header>
<hgroup>
</hgroup>
</header>
</center><br/>
<h1>Informacion sobre el producto</h1><br/>
<fieldset>
<legend>Datos basicos</legend>
<p><label>Nombre </p>
<p><input type="text" size="45" name="nombre"></label
></p>
<p>
Descripcion<br>
<textarea name="mensaje" cols="45" rows="5"></tex
tarea>
</p>
<p>Foto <input type="file" id="Elegir" name="file"> <
/p>
<p><input type="checkbox" name="contador" checked> An
adir contador de visitas</p>
</fieldset>
<fieldset>
<legend>Datos economicos</legend>
<p><label>Precio <input type="text" size="5" name="prec
io"></label> € &nbsp &nbsp &nbsp <label>Impuestos <select name="Impuestos">
<option>4 %</option>
</select> </label></p>
<p>Promocion<br></p>
<p><input type="radio" id="ninguno" name="Ninguno" va
lue="0" /> Ninguno</p>
<input type="radio" id="transporte" name="Transporte"
value="1" /> Transporte gratuito</p>
<input type="radio" id="descuento" name="descuento" v
alue="2" /> Descuento 5%</p>
</fieldset>
</form>
PRÁCTICA 4
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML-Formularios</title>
</head>
<body>
<h1>ENCUESTA CAMPUS VIRTUAL</h1><br/>
<table border="0" align="left" width="90%"bgcolor="FFFFFF">
<caption></caption>
<tbody>
<tr>
<th align="left">
<p><label>NOMBRE: </p></th>
<th align="left">
<p><input type="text" size="45" name="nombre"></label></p
>
</th>
</tr>
<tr>
<th align="left"><p><label>DEPARTAMENTO: </p></th>
<th align="left"><select name="Departamento">
<option>Agricultura y Alimentacion</option>
<option>Contaduria Publica</option>
<option>Administracion de Empresas</option>
<option>Mecatronica</option>
<option>Ingenieria Industrial</option>
</th>
</tr>
<tr>
<th align="left"><p><label>EDIFICIO: </p></th>
<th align="left"><select name="edificio">
<option>Edificio Vives</option>
<option>Edificio Alas</option>
<option>Edificio Lucha</option>
<option>Edificio Vocacion</option>
<option>Edificio Universo</option>
</select> </label></p></th>
</tr>
<tr>
<th align="left"><p><label>E-MAIL: </p></th>
<th align="left"><p><input type="text" size="45" name="e-
mail"></label></p></th>
</tr>
<tr>
<th align="left"><p><label>TELEFONO: </p>
<th align="left"><p><input type="text" size="30" name="telefono">
</label></p></th>
</th>
</tr>
<tr>
<th align="left"><p><label>¿Utiliza habitualmente el campus virtu
al? </p></th>
<th align="left"><p><input type="radio" id="si" name="Si" val
ue="0" /> Si
<input type="radio" id="no" name="No" value="1" /> No</p>
</th>
</tr>
<tr>
<th align="left"><p><label>¿Estaria interesado/a en recibir forma
cion personalizada sobre las posibilidades de esta herramienta informatica?</p></
th>
<th align="left"><p><input type="radio" id="siinteresado" name="s
iinteresado" value="0" /> Si
<input type="radio" id="nointeresado" name="nointeresado" val
ue="1" /> No</p></th>
</tr>
</form>
<table border="0" align="left" width="50%"bgcolor="FFFFFF">
<caption align="left"><h2> CALENDARIO APROXIMADO DE FORMACION
</h2></caption>
<tr>
<th align="left"><p>TURNO PREFERENTE:</p></th>
<th align="left">
<p>
Manana <input type="checkbox" name="Manana">
Tarde <input type="checkbox" name="tarde">
</p></th>
</tr>
<tr>
<th align="left"><p><label>MES PREFERENTE:</p></th>
<th align="left">
<p>
<select name="mes">
<option>Enero</option>
<option>Febrero</option>
<option>Marzo</option>
<option>Abril</option>
<option>Mayo</option>
<option>Junio</option>
<option>Julio</option>
<option>Agosto</option>
<option>Septiembre</option>
<option>Octubre</option>
<option>Noviembre</option>
<option>Diciembre</option>
</select> </label>
</p></th>
</tr>
<tr>
<th align="left"><p><label>HORARIO PREFERENTE:</p></th>
<th align="left">
<p>
<select name="horario">
<option>7:00</option>
</select> </label>
</p></th>
</tr>
<tr>
<th align="left"><p>COMENTARIOS:</p></th>
<th align="left">
<p>
<textarea name="comentarios" cols="45" rows="5"></tex
tarea>
</p>
</th>
</tr>
</table></form>
</body>
</html>
FORMULARIO DE AUTORIA
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML-Formularios</title>
</head>
<body>
<h1>Inscripción al Congreso de Medicina Torreon</h1><br/>
<h2>Inscripción al Congreso para Medicos Especialistas</h2>
<form action="" method="get">
<p>
<label for="nombree">Nombre: </label>
<input type="text" name="nombree" id="nombree">
<br/> <br/>
<label for="apellidoe">Apellido: </label>
<input type="text" name="apellidoe" id="apellidoe">
<br/> <br/>
<label for="especialidade">Especialidad: </label>
<input type="text" name="especialidade" id="especialidade">
<br/> <br/>
<label for="obtencione">Año obtencion especialidad: </label>
<input type="number" name="obtencione" id="obtencione">
<br/> <br/>
<p>Foto <input type="file" id="Elegir" name="file"> </p>
<input type="reset">
</p>
</form>
<br/><br/>
<h2>Inscripción al Congreso para Medicos Generalistas</h2>
<form action="" method="get">
<p>
<label for="nombreg">Nombre: </label>
<input type="text" name="nombreg" id="nombreg">
<br/> <br/>
<label for="apellidog">Apellido: </label>
<input type="text" name="apellidog" id="apellidog">
<br/> <br/>
<label for="centrog">Centro médico donde ejerce: </label>
<p><input type="radio" id="ninguno" name="Ninguno" va
lue="0" /> Ninguno</p>
<input type="radio" id="Particular" name="Particular"
value="1" /> Particular</p>
<input type="radio" id="Publico" name="Publico" value
="2" /> Publico</p>
<br/>
<p><label for="titulog">Año obtencion del título: </label>
<select name="Año">
<option>1950-1960</option>
<option>1991-actualidad</option>
</select> </label></p>
<p><input type="checkbox" name="contador" checked> Estare todo el
Congreso </p><br/>
<input type="reset">
</p>
</form>
</body>
</html>
BIBLIOGRAFIA
 https://www.w3schools.com/html/html_forms.asp
 http://www.manualweb.net/html/estructura-envio-formularios-html/
 https://www.mclibre.org/consultar/htmlcss/html/html-formularios.html
 http://html.conclase.net/w3c/html401-es/interact/forms.html

Formulario PDF

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

Formulario PDF

Cargado por

Copyright:

Formatos disponibles

UNIDAD II.

CAMPOS DE TEXTO DE UNA SOLA LÍNEA

CAMPO DE TEXTO MULTILÍNEA

Un campo de texto multilínea se inserta con el elemento textarea. Como anteriormente, el

Si el atributo size tiene un valor de "1" y el atributo multiple se encuentra ausente,

<form action="../../form-result.php" target="_blank">

También podría gustarte