Guía de HTML, XML, XHTML

Parte Formularios HTML

Ricardo de la Concepción Leal www.infowebsiete.com – www.ferroarte.info rconleau@gmail.com

Los formularios
Según la W3C (World Wide Web Consortium) en la especificación HTML 4.01 recomendada, los formularios de HTML son una sección el cual contienen contenido normal, formato, elementos especiales denominados controles (checkboxes, radio buttons, menus, etc), y etiquetas de esos controles (labels). En el cual los usuarios generalmente rellenan éste modificando estos controles, antes de su envío a un agente para ser procesado (servidor web, servidor de correo, etc.), En resumen se trata de una serie de elementos agrupados que nos permiten interactuar con el usuario. Para comenzar a crearlos tenemos que introducir el elemento <form>. Este debe localizarse en el cuerpo del documento de la página Web. Los Controles deben de estar localizados dentro de la etiqueta de inicio y de fin </form> al igual que los botones de envío y borrado o reseteado de ese formulario. Los formularios no pueden anidarse unos con otros.

Atributos de la etiqueta <form>: Accept-charset: se trata de una lista de codificaciones de caracteres que son aceptados por el servidor que procesará el formulario. Action: indica la dirección a la que será enviada la información recolectada mediante el formulario, una vez que el usuario lo envíe. Enctype: indica el tipo MIME que se empleará para enviar los datos del formulario al servidor. Para enviar la información de los datos sin codificación debe introducirse dentro de este atributo el valor “text/plain”. Method: especifica el método en que se enviará el formulario. Los valores son GET y POST. El valor es el valor por defecto si no se especifica lo contrario. El método GET, envía los datos del formulario a través de la concatenación de los valores a los datos que se hallan especificado en la dirección del atributo action, añadiendo al URI (Universal Resourse Identification) un signo de interrogación como comienzo del envío, agregando el nombre del control separando este nombre por el valor por un signo de igual (=). Si aparece algún dato más este es concatenado con el símbolo amptersand (&). Éstos datos enviados de esta manera se denominan QueryString, y son algo así como se muestran a continuación: http://www.ferroarte.info/index.html?nombre=Cabecero%20Hojas&narticulo=cob215 El método POST, incluye los datos de envío en el cuerpo del mensaje y se envían siguiendo unas reglas de codificación. Name: este atributo asigna el nombre del control de un formulario. Target: especifica el nombre del frame o marco en el que se mostrará la respuesta al envío del formulario.

El formulario tendría el siguiente aspecto con los atributos más básicos para su utilización, como muestra en la siguiente figura.

Los tipos de controles
Existen tres tipo de controles para introducir los datos en los formularios: Controles de texto Controles mediante selección Controles mediante botones Y contamos con las siguientes etiquetas para crear esos controles: <input> <textarea> <select> <button>

Control <input>
La etiqueta <input> resulta ser la más versátil de las etiquetas que agrupan los formularios, ya que con ellas se pueden insertar controles de tipo botón para el envío del formulario, controles para introducir texto, ya sea visible u oculto, etc. Los distintos tipos de datos, se introducen mediante el atributo del elemento, denominado type , y son los que se listan a continuación: <input Type=”text”> <input Type=”password”> Type=”checkbox”> <input Type=”reset”> <input Type=”submit”> Type=”button”> <input Type=”file”> <input Type=”image”> <input <input

Con tan solo el atributo type, puede cambiar la forma del <input> por completo. Text: tipo texto, el control más genérico, utilizado para interactuar con el usuario, también denominado cajas de texto. Cuenta con los siguientes atributos: Name: nombre que se le asigna al control. Value: proporcional el valor que quiere que sea mostrado en una baja de texto. Maxlengh: especifica el máximo número de caracteres introducidos dentro de la caja de texto, es un valor numérico. Size: este atributo especifica el tamaño de la caja de texto para ser mostrado en el formulario. El control vendría a ser algo como lo que se muestra a continuación, con el contenido más básico posible: <input type=”text”>

Otro control pero este utilizando algunos atributos: <input type=”text” name=”nombre” size=”20”> vease que la caja de texto tiene como nombre nombre y el tamaño máximo para visualizar en el formulario es de 20 caracteres. <input type=”text” name=”apellidos” size=”30” maxlenght=”50”> En el caso anterior el control tiene como nombre apellidos, el tamaño máximo para ver por el navegador es de 30 caracteres y se limita a 50 el número de caracteres que el usuario introducirá por el formulario en este campo.

Password: tipo password o clave, se ven una serie de asteriscos o puntos (depende del navegador que se utilice), cuando el usuario introduce un dato. Normalmente se utiliza utilizando como atributo en la etiqueta <form> el atributo POST, ya que si utilizamos el GET, puede verse el contenido a través de la cadena URI, y este campo se utiliza para ocultar el contenido. Abajo tenemos un formulario para envio de un suario y su contraseña para acceder por ejemplo a un sitio Web.

Checkbox: es una caja de verificación o de selección que puede estar activada o desactivada, también pueden agregarse múltiples cajas para seleccionar varios valores a la vez, en el momento del envío el valor por defecto es (on), en caso de estar desactivada no se envía ningún valor, pero este valor puede ser modificado con el atributo value. Los atributos de este tipo de control son los siguientes: Name: nombre con el que se identifica el campo. Value: por defecto el valor que corresponde cuando está activado es On, en contrario no envía valor alguno, aún así una vez activo podemos establecer un valor diferente al On, al igual cuando este control con el valor establecido está desactivado, no envia valor alguno. Volvemos a repetir esto porque generalmente existe confusión a la hora de utilizar este tipo de controles Checked: este atributo activa el control cuando, se encuentra alojado dentro del elemento

Para entender mejor este ejemplo le proponemos que cree una página Web con el nombre de prueba.html, el cual introduzca el código que le presentamos en la figura. En este establecemos varios controles, uno de ellos, el tercero establecimos como valor el número 1, al pulsar el botón se recargará la misma página, y podrá ver en el QueryString, cuales son los valores que viajan, y por supuesto que valores.

Radio: la diferencia de este control con el anterior es que solo podemos seleccionar, se debe de seleccionar un valor de una lista de valores, estableciendo en ellos un mismo nombre, en el momento del envío viajaría únicamente el valor del elemento que hemos seleccionado, en caso contrarío no viaja ningún valor.

También tenemos como atributo en el control el checked que establece la preferencia de un determinado control sobre los demás, en el siguiente ejemplo puede verse el ejemplo anterior, sustituimos los nombres por el de mascota, el valor que viaja corresponderá a lo que establecemos en el atributo value de cada elemento.

Name: nombre con el que se identifica el campo, es importante establecer el nombre en estos elementos, para que exista una relación entre los controles. Value: se establece en caso de que exista una relación entre los elementos. Porque en si el radiobutton no sería nada si no existe más opciones. Checked: este atributo activa el control, cuando se encuentra alojado dentro del elemento. Reset: se utiliza para resetear o restablecer los valores por defecto establecidos en el formulario, los controles que se encuentran dentro de un formulario. Como atributo tenemos el value, que en si establece el valor que se va a mostrar en el navegador del usuario. <input type=”reset” value=”Borrar”> Submit: se utiliza para el envío del formulario a la dirección introducida en el atributo action de la etiqueta <form>, y envia los datos de los controles que se encuentran dentro del formulario. Al igual que el tipo reset, tiene como atributo el value para establecer un el valor mostrado en el navegador. <input type=”submit” value=”Enviar”>

Button: con este valor del atributo se especifica un botón, para poder ser utilizado con un javascript, por ejemplo validar el contenido dentro de una caja de texto, se crea en realidad un botón pulsador, y funcionan igual que el resto de los controles de similares características. Los atributos para este tipo de control son los siguientes: Name: nombre con el identificamos el control, para establecer algún tipo de acción posterior. Value: con este atributo se establece el valor de presentación del control. El valor con el que el usuario podrá ver el control en el navegador.

En el siguiente ejemplo podemos ver como establecemos un control tipo button en el que al hacer click, se muestra en forma de mensaje sobre la cantidad de controles que existen en el formulario con el nombre mascota. Más adelante veremos ejemplos más prácticos sobre la utilización de este tipo de controles.

File: éste atributo nos permite el envío de ficheros adjuntos al envío del formulario. Nos permite la selección de un fichero. Normalmente aparece una caja junto con un botón con la palabra “examinar”, dependiendo del idioma de configuración del sistema operativo. Los atributos para este elemento son los siguientes: Name: nombre con el que se identifica el campo. Enctype: representa el tipo de formato con el que se a subir el fichero, es necesario definirlo y tienen que tener el valor “multipart/form-data”.

Detalle del control tipo file, el aspecto que tiene este control para saber y poder diferenciarlo. Image: nos permite proporcionarle al botón un mejor aspecto visual, ya que permite introducir imágenes, personalizándolo para el envío de la información. Src: el cual le proporciona la imagen para poder visualizarla por le navegador. Alt: que le da un texto alternativo a la imagen en caso de que esta no pueda verse por cualquier circunstancia.

Hidden: es una caja de texto invisible pero que contiene un valor que no es necesario que el usuario que interacciona con el formulario separa sobre su existencia, como puede ser por ejemplo el número de sesión u otros tipos de datos. Name: name el cual le proporciona un nombre al control. Value: el cual le proporciona un valor o contenido.

Control <textarea>
El textarea es un control con forma de caja de texto que está formada por una serie de líneas y columnas en la que se pueden introducir una serie de datos que suelen ser más largo o explicativos que en un tipo de texto normal como puede ser el <input type=”text”>. Este tipo de control tiene también una etiqueta de cierre, y dentro de ella se puede establecer la información que quiera que se vea por el usuario. A continuación se pone una referencia de uso la etiqueta de principio y fin. <textarea> Ejemplo de textarea </textarea> Los atributos de este tipo de control se detallan a continuación: Name: nombre o identificador del control. Cols: número de columnas o anchura con el que se representarán en el control, establecidas en número de caracteres. Rows: número de líneas de texto visibles. Cuando no se establecen un número de líneas o de columnas algunos navegadores establecen por defecto un número determinado, que puede variar.

Este sería el aspecto de un textarea en el navegador

Sign up to vote on this title
UsefulNot useful