2.7 Formulario

2.7 Formulario

Formulario

Los formularios se usan en la navegación habitual por páginas web (i.e. Cuando entramos en nuestro correo web, iniciamos sesión en youtube para subir un vídeo, buscamos una página con google, o nos identificamos en facebook para acceder a nuestra red social,... siempre estamos enviando datos mediante los campos de un formulario.
Los formularios de una página web se diseñan como el resto de la página, empleando HTML (Lenguaje de Etiquetas de HiperTexto).
 Elementode un formulario HTML :

Para crear un formulario basta insertar etiquetas de apertura y cierre en tu página WEB. Todos los controles (campos de texto, casillas de verificación, botones de opción o botón de enviar) que añadas entre las etiquetas y

formarán parte del formulario que se envía al servidor WEB. El elemento 

cuenta con muchos atributos pero basta con utilizar 2 de ellos: action y method. Atributo action: indica al servidor a qué página debe desplazarse cuando el usuario pulsa el botón de envío del formulario. Es decir, indica qué página recibirá la información del formulario. Por supuesto, esta página debe existir en el servidor Web. Atributo method: controla la forma en que se envía la información al servidor y existen dos métodos, GET y POST. Con GET se envía la información introducida por el usuario adjuntándola a la URL después del signo “?”. Con POST se envían los valores introducidos en el formulario en el cuerpo de la solicitud HTTP. El código siguiente crea un formulario WEB ... que aún no contiene ningún campo. Cuando añadamos los campos normales en un formulario, el archivo “respuesta1.php“ recibirá mediante el método POST los valores introducidos en el formulario. 

  Los formularios son plantillas que permiten la creación de documentos HTML con peticiones de datos. La principal utilidad de los formularios es la posibilidad de crear cuestionarios, encuestas, páginas de comentarios o cualquier documento en la que se desee una interacción por parte del usuario.
     Se podrán definir distintos tipos de recuadros de dialogo, botones de selección, menús de múltiples opciones, ... Para permitir obtener los datos de una manera más intuitiva.
<FORM> Definición de formularios

...
Elementos que forman el formulario
...
< /FORM>


     Existe una instrucción HTML para la creación de formularios esta es FORM, que tiene la siguiente estructura:
< FORM ACTION="fichero que trata el formulario" METHOD= POST | GET > 

     Dentro de la etiqueta de formulario se definirán los distintos elementos de petición de datos. Estas instrucciones que se explicarán a continuación definirán los tipos de botones, cajas de dialogo y ventanas para la introducción de datos. Y definirán las variables que almacenarán los datos introducidos por el usuario. Estas etiquetas se incluirán entre la de definición del formulario y la etiqueta de final de formulario.
     Los atributos que presenta la etiqueta FORM son los siguientes:
ACTION:
     Indica el programa que se encargará de tratar los datos del formulario. Este programa debe encontrarse en el servidor y estar escrito en algún lenguaje de programación. A este programa se pasará como parámetros los datos introducidos en el formulario y retornará un código HTML que se mostrará tras procesar el formulario. A este tipo de programas se les llama cgi-bin, y se explican en el último apartado de este manual: (CGI-BIN).
METHOD:
     Indica el protocolo usado para el envío de los datos. Con POST envía los datos en la entrada estándar del programa que trata el formulario y con GET los datos se pasan por parámetro, en la línea de comandos, al programa. El usar uno o otro método vendrá determinado por como son tratados los parámetros en el formulario en el (CGI-BIN). El método de uso más normal será POST.
     Una vez definidas las características globales del formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen. Dentro de la instrucción del formulario podrán incluirse cualquier texto o instrucción HTML, siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario. Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas, tablas, etc ...

<INPUT> Entrada básica de datos
     La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos. Por lo general serán entradas de texto corto (a lo sumo una frase) o opciones. El formato básico es el siguiente:
< INPUT TYPE = (NAME = "Variable que toma el valor" VALUE = "Valor de Inicialización" >


     El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está definiendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por defecto.
     A continuación se relatan los distintos tipos de instrucciones de entrada.
<INPUT TYPE=TEXT...> Texto corto
     Se utiliza para la entrada de cadenas de texto corto, como por ejemplo nombre de personas, números, fechas o diversos datos que se puedan expresar en una línea de texto.
     Se mostrará un recuadro que ocupa una línea y la que será posible especificar este texto. El formato de la instrucción es el siguiente:
< INPUT TYPE=TEXT NAME="variable" VALUE="valor inicial" SIZE="tamaño" MAXLENGTH="longitud máxima" >
     El tamaño de la ventana de introducción de texto se fija con el atributo SIZE, que indica el tamaño de la ventana en caracteres. Aquí solo se define la parte visible, pero el usuario podrá introducir más texto si lo desea. Para indicar el máximo número de caracteres que se permiten en la entrada usaremos: MAXLENGTH. El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUEespecifica el valor de inicialización del campo. De todos los atributos solo será obligatorio NAME, siendo el resto opcionales. En la entrada se podrán usar cualquier tipo de caracteres incluso los acentuados, en su formato normal.

<INPUT TYPE=PASSWORD...> Palabras secretas

     Es similar al anterior pero en este caso no se imprimen los caracteres según se van introduciendo, se muestra un asterisco en vez de los caracteres. Solo se puede ver el número de caracteres, pero no valor. Se usa para la introducción de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos. El formato es:
< INPUT TYPE=PASSWORD NAME="variable" VALUE="valor inicial" SIZE="tamaño" MAXLENGTH="li>longitud máxima" >
<INPUT TYPE=CHECKBOX> Botones de selección
     El checkbox es un botón que puede presentar dos estados activado o desactivado. El formato es el siguiente:
< INPUT TYPE=CHECKBOX NAME="variable" CHECKED>
     Se requiere el atributo NAME. Los valores que tomará la variable serán on ó off, dependiendo de su estado. Si el botón estaba activado cuando se envían los datos del formulario se enviaran el nombre de la variable y el valor que indique su estado. Si se incluye el atributo CHECKED el botón se encontrará activado en la inicialización.
Si se indica el atributo VALUE,cuando se envian los datos con el botón activado se mandará la variable con el valor indicado y en caso contrario no se mandará ningún valor.

<INPUT TYPE=RADIO...> Selección entre múltiples opciones
     Se usa cuando la opción puede tomar un valor simple de una serie de alternativas. En este caso se presentan unos valores opcionales de los que solo puede tomar un valor. Para especificar cada uno de estos valores se incluirá una etiqueta RADIO por cada una de las posibles alternativas, su estructura general será:
< INPUT TYPE=RADIO NAME="variable" VALUE="valor 1" CHECKED >
< INPUT TYPE=RADIO NAME="variable" VALUE="valor 2" >
          . . .
< INPUT TYPE=RADIO NAME="variable" VALUE="valor n" > 
Cada una de las etiquetas RADIO tendrá el mismos atributo NAME, y con un distinto atributo VALUE que será el valor que tome si se selecciona esta opción. Para inicializarlo se usa el atributo CHECKEDque se indicará solo en la opción que se quiera especificar por defecto.
<INPUT TYPE=HIDDEN...> Parámetros ocultos
     En este caso no se muestra ningún campo para la entrada de datos al usuario, pero el par variable valor especificado es enviado junto con el formulario. Se suele usar para transmitir información de estado ó control ó para enviar algún tipo de información que no debe ser variada en el formulario, pero sí debe ser enviada junto a este. El formato es:
< INPUT TYPE=HIDDEN NAME="variable" VALUE="valor" >
     Deberá incluir tanto la variable como el valor.
<INPUT TYPE=SUBMIT...> Enviar Datos
     Este botón se usa para enviar los datos del formulario, al pulsar el usuario este botón, se acaba la introducción del formulario y pasa el control al programa indicado en ACTION. En todo formulario debe existir al menos un botón de SUBMIT, si solo incluye un recuadro del tipo TEXT no será necesario incluirlo. El formato es:
< INPUT TYPE=SUBMIT VALUE="mensaje a mostrar" >

     El atributo VALUE especifica una etiqueta no editable que se mostrará en el botón de envío. Lo normal es que este botón no envíe datos, pero si se indica el atributo NAME con un nombre de variable será enviada la variable con el valor de VALUE. Esto puede ser útil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado.

<INPUT TYPE=IMAGE...> Botón de Envío gráfico
     Su funcionalidad es similar al botón de SUBMIT, se usa igualmente para enviar los datos de un formulario, pero en este caso se presenta una imagen como botón. Igualmente al pulsar sobre el botón se enviará el formulario. El formato es el siguiente:
< INPUT TYPE=IMAGE NAME="variable" SRC="URL de la Imagen" >

     El punto de la imagen en el que pulsa el usuario también es pasado al programa interprete del formulario, de forma que la imagen igualmente podría ser un mapa sensible. Se pasarán dos parámetros x e ycon las coordenadas del punto donde pulso, siendo el programa interprete el encargado de determinar la zona donde se pulsó, si se desea.

Ejemplo
Inst. HTML	<INPUT TYPE=IMAGE SRC="boton.gif">
Resul tado
Explica ción	Se muestra la imagen como botón de envío, sustituyendo al botón de SUBMIT.

<INPUT TYPE=RESET...> Borrar los datos
     Este botón se usa para volver a los valores por defecto todos los elementos del formulario, borrando todos los datos introducidos por el usuario. Su formato es el siguiente:
< INPUT TYPE=RESET VALUE="Etiqueta a mostrar" >

     El atributo VALUE especifica la etiqueta que tendrá el botón.
<TEXTAREA> Texto en múltiples líneas
  Permite la introducción de un texto que puede abarcar varias líneas, introduciendo este en forma de párrafo. El formato general será:
<TEXTAREA NAME="variable" ROWS=Filas COLS=Columnas>
        Texto de Inicializaci& oacute;n que puede
         incluir varias l&iacute;neas.
</TEXTAREA> 

     En este caso se presenta una ventana del tamaño especificado con los atributos ROWS, filas, y COLS, columnas. El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto aparecerá inicialmente en la ventana, en este texto se podrán incluir las marcas del lenguaje HTML, pero solo se tendrán en cuenta para incluir acentos y otro tipo de efectos. Los atributos ROWS y COLSdeterminan el tamaño de la ventana visible, el texto se podrá extender más allá de estos limites.
<SELECT> Elección entre múltiples opciones
     Se usa para menús simple o múltiples. Define menús de tipo pop-up (menú de barras) y ofrece una alternativa más compacta al uso de botones RADIO o CHECKBOX. Su formato es el siguiente:
<SELECT NAME="variable">
< OPTION SELECTED VALUE=valor1> Opción Primera
< OPTION VALUE=valor2> Opción Segunda
        . . .
< OPTION VALUE=valorn> Opción Enésima
</SELECT> 

     Si se desea que sea un menú múltiple se deberá incluir el atributo MULTIPLE en la etiqueta de SELECT, en este caso se mostrarán todas las opciones en forma de tabla, en el otro caso se mostrará la opción activa y un botón para poder modificar esta opción. En ambos casos solo podrá seleccionarse una de las opciones. Cuando se envía el resultado del formulario la variables NAME tomará el valor de la opción que este activa.
     La etiqueta OPTION que contenga el atributo SELECTED será considerada la opción por defecto, caso de no especificarse ninguna se considerará la primera de las opciones.

	eccionar una.

!!podemos crear un formulario basta con solo insertar una etiqueta!! *etiqueta <form> de apertura y cierre en tu página WEB. Todos los controles (campos de texto, casillas de verificación, botones de opción o botón de enviar) que añadas entre las etiquetas y

formarán parte del formulario que se envía al servidor WEB. 

El elemento cuenta con muchos atributos pero basta con utilizar 2 de ellos: action y method. Atributo action: indica al servidor a qué página debe desplazarse cuando el usuario pulsa el botón de envío del formulario. Es decir, indica qué página recibirá la información del formulario. Por supuesto, esta página debe existir en el servidor Web. Atributo method: controla la forma en que se envía la información al servidor y existen dos métodos, GET y POST. Con GET se envía la información introducida por el usuario adjuntándola a la URL después del signo “?”. Con POST se envían los valores introducidos en el formulario en el cuerpo de la solicitud HTTP. El código siguiente crea un formulario WEB ... que aún no contiene ningún campo. Cuando añadamos los campos normales en un formulario, el archivo “respuesta1.php“ recibirá mediante el método POST los valores introducidos en el formulario.  

tambien con campos de formularios donde podemos insertar varios datos en ellos como desde un nombre , direccion informacion solicitada en el campo .

*campos de texto:  son llamados cuadro de texto para insertar cualquier tipo de frase larga .

* botones de envio: son botones los cuales genera la accion que solicitas ya sea borrar , aceptar una informacion solicitando algo y otras acciones mas .

* botones de opcion: los cuales hacen la accion para seleccionar una opcion de muchas .

https://tecnoclara.wikispaces.com/file/view/Formulario_Web.pdfhttps://tecnoclara.wikispaces.com/file/view/Formulario_Web.pdf

http://www2.uca.es/serv/sc/manual-html/form.htm

Ejemplo para hacer una pagina web

1 paso: pensar de que queremos que se trate nuestra pagina web o con que fin

saber como sera su diseño.

Diseño de pagina: Ejemplo de una pasteleria

Este codigo es para poner los frameset y incluye hipervinculos para irnos a otras paginas le pusimos el nombre de inicio para guardarlo ,este codigo nos permite hacer frameset ,nosotros lo haremos en 3 partes:

•  En el lado izquierdo mostrara los hipervinculos para dirigirnos a otras paginas 
• En la parte del centro viene una pequeña introduccion sobre lo que venden etc.
• En la parte de arriba tendremos la portada

Este codigo es para ponerle una portada en el frameset  contiene imagenes corredisas  y el diseño de la portada.

Este codigo es para los hipervinculos 

Todos los hipervinculos de las paginas que quieres que muestre apareceran en la parte central de la pagina

Este codigo es la parte de el contendo de los pasteles  mostrando las imagenes que tiene de pasteles

y asi sucesivamente el mismo codigo para la de galletas y quequitos

fuente:

http://html.conclase.net/w3c/html401-es/interact/forms.html

Oscar Vazquez Limon. (20/05/2013). Formulario. 28/05/2014, de 17 Formularios Sitio web: http://html.conclase.net/w3c/html401-es/interact/forms.html

http://librosweb.es/libro/xhtml/capitulo_8.html

mariana cepeda ramirez. (07/08/2014). Formularios. 07/08/2014, de libros web Sitio web: https://librosweb.es/libro/css/capitulo_1/medios_css.html
http://www.virtualnauta.com/html-formularios
Marcos Cardoza Perez. (26/03/2014). Formularios en HTML. 26/04/2014, de Virtualnauta Sitio web: http://www.virtualnauta.com/html-formularios

http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=520:formularios-html-form-label-name-value-id-ejemplos-checkbox-option-button-combobox-cu00720b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192