PLANEACION SEGUNDO PERIODO ASINATURA: TECNOLOGIA Y INFORMATICA
EVALUACION DE ACTIVIDADES
PRIMER TALLER BLOG - BLOGGER
PERIODO II
¿Qué es un formulario html y para qué sirve?
Form es una etiqueta de HTML que representa un formulario. En este formulario se agregan los diferentes campos de entrada de datos o de confirmación, así como los botones, que como mínimo ha de haber uno, el de envío. También pueden agregarse más botones como el de Restablecer que pone el formulario en blanco.
Los formularios en su envío mediante el atributo action envían los datos del formulario a una secuencia de comandos CGI, PHP, o bien ISAPI.
Los datos se envían de diferentes maneras ,pero existen dos maneras de envío bien diferenciadas: el POST y el GET. Cabe destacar que también puede ser enviado por JavaScript, lo que ofrece mayor flexibilidad sobre el paso de datos sobre el lado del cliente, que puedes ver en algunas páginas por ejemplo la de gMail en la página de registro se ve el uso de JavaScript+AJAX que no hace falta cargar otra página confirmando/validando los datos.
Los datos personales como el DNI, etc., han de ser cifrados para que no sean observados por personas ajenas, y se suele usar cifrado o la capa de seguridad SSL.
Definir:
Controles de texto
Agregar un control de cuadro de texto a un formulario o informe. El cuadro de texto es el control estándar de Access que se usa para ver y editar datos en formularios e informes. Se pueden mostrar varios tipos diferentes de datos en los cuadros de texto y también se pueden usar para realizar cálculos.
Campo de texto a una sola línea
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.
Campo de texto multilínea
En este caso en lugar de usar <input..... usarmos la palabra mágica <textarea... que significa area de texto. Las características que le podemos indicar a un area de texto son, el nombre del objeto con name; la anchura del area donde el usuario puede escribir,con cols; la altura de ese area con rows y la palabra mágica wrap que veremos más adelante.
Un ejemplo de area de texto de varias líneas sería este código Html:
La palabra mágica wrap puede tomar solo tres valores de los que has de elegir uno. Presta atención porque quizá sea un poco complicado de entender (y de explicar... je je je) Los valores que les puedes dar son:
- off: El texto escrito por el usuario lo recibes tal cuál lo ha escrito, con los saltos de línea (lo que ocurre cuando presiona Intro o Enter) tal cuál él los dió. Si tu area de texto es más estrecha que su frase, la frase continúa sin pasar a verse en la línea de abajo. Lo pillas? Sigue leyendo las otras opciones y lo verás más claro.
- soft: En este caso si la frase que escribe el colega visitante es más larga que el ancho de tu area de texto, la frase continua en la línea de debajo, aunque tú recibirás el texto tal cuál el visitante pretendía escribirla, solamente con los saltos de línea que él pulsó, no con los saltos que aparentemente le marca el area de texto para que todas las frases se vean dentro de la ventana.
- hard: Y como última opción, tenemos "hard". Si escoges esta opción, el visitante se pondrá a escribir frases más largas que el ancho del textarea y estas frases se dividirán conforme se alcance la anchura de la ventana, pero tú recibirás el texto con los saltos de línea justo en esos margenes, aunque el visitante no haya pulsado el Intro o Enter en su teclado para indicar una nueva línea.
Controles de Opción
El Panel de Control es una parte de la interfaz gráfica del sistema operativo Microsoft Windows, la cual permite a los usuarios ver y manipular ajustes y controles básicos del sistema, tales como agregar nuevo hardware, desinstalar programas instalados, gestionar las cuentas de usuario de Windows, tener acceso a opciones de accesibilidad, entre otras opciones de sonido y pantalla. Otras Aplicaciones adicionales pueden ser proporcionados por software de terceros.
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).<form action="../../form-result.php" target="_blank">
<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>
<p><input type="submit" value="Enviar información"></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.
form action="../../form-result.php" target="_blank"> <p> Género: <select name="genero"> <option>Masculino</option> <option>Femenino</option> </select> </p> <p><input type="submit" value="Enviar información"></p> </form>
Botones
Un botón es un tipo especial de control que ha sido diseñado para interactuar con el usuario de una manera singular: una acción es ejecutada cada vez que el usuario lo presiona. Existe una amplia gama de botones, cada uno con sus peculiaridades en relación a sus capacidades y su conducta, pero aquí sólo analizaremos los dos más ampliamente utilizados en formularios básicos.
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.<form action="../../form-result.php" target="_blank">
<p>
Edita tu descripción:
<input type="text" name="desc">
<input type="submit" value="Guardar cambios">
</p>
</form>
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.<form action="../../form-result.php" target="_blank">
<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.<form action="../../form-result.php" target="_blank">
<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.<form action="../../form-result.php" target="_blank">
<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>
