Hacer Formularios

La primera cosa que necesitas hacer cuando insertas una forma en tu página, es hacer un click en el botón “Formularios” bajo la pestaña “Formularios” en la barra de herramientas “Insertar”.
Esto coloca un punto rectángulo rojo en tu página, lo coloca donde estaba tu cursor.
Todos los elementos como los campos de texto, casillas de verificación, botones, etc, que añades a tu forma son colocados en éste rectángulo.

Cuando la forma es seleccionado, encontramos un número de temas en la parte inferior de la ventana de Propiedades, varios de ellos deben ser completados.

La primera caja es el nombre de la forma. Este nombre es solo importante cuando usas scripts del lado del servidor para ésta forma.
Un ejemplo de un Script del Lado del Servidor es el dato enviado al script desde el navegador, el cual es almacenado en la base de datos en el servidor.

La segunda caja es “Acción”. Aquí puedes llenar las direcciones del programa en tu servidor host, el cual procesa la forma. Un ejemplo es: http://www.UwSite.be/cgi-bin.
Porque ésto no es lo mismo para todos, te preguntará mirar a ésta dirección en tu Host.
Si no sabes qué es un Host, es el nombre del servidor donde está subido tu sitio.

Bajo la sección “Acción”, tenemos la caja “Método”.
Las formas pueden ser enviadas por dos métodos, GET y POST.
La ventaja de POST es que envías datos ilimitados.
La ventana de GET, es que la forma de entrada completa puede estar combinada en un URL.
A mi juicio, usa siempre POST.

Después tenemos la caja “Target”. Este es el mismo que hacemos para el vínculo, entonces pienso que está claro.

Y finalmente tenemos la caja “enctype”. Aquí tenemos dos opciones, “Aplicación” y “Multiparte.”
La configuración por defecto es “Aplicación”, la única vez que quieras cambiar a “Multiparte” es cuando tienes la posibilidad de que los visitantes de tu sitio carguen archivos a tu servidor.
Deja éste campo en blanco, por defecto (aplicación) es aplicada.

Continuamos con el formulario.

Para ver el formulario un poco más elegante, añade una tabla para llenar los rectángulos de punto rojo, en donde después colocas varias elementos de formas.

Entonces, colocamos el cursor en el rectángulo rojo y hacemos click en “Tabla” bajo la columna “Común” en la barra de herramientas “Insertar”.

El número de renglones y columnas es totalmente dependientes en lo que quieras colocar en tu forma.

En éste ejemplo, lo hago con dos columnas y varios renglones. Debería de haber más después, no es un problema, podemos adicionar más.

Esto es lo que deberías tener:

Campos de Texto

La primera cosa que voy hacer en éste ejemplo es adicionar un campo de texto.

Primero seleccionamos la celda en tu table donde quieras insertarla.
En éste ejemplo, el primer renglón, segunda columna.

Otra vez, seleccionamos la pestaña “Formularios” en la barra de herramientas “Insertar” y hacemos click en el botón “Campo de Texto”.

Esto abre una ventana diálogo “Introducir Etiqueta Accesibilidad y Atributos”.

En la parte superior del campo, damos un campo de texto un ID. Da un nombre significativo en la caja de “Campo de Texto”. De lo contrario todos esos introducidos serán como campo de texto1, campo de texto2 y así.

En la caja de abajo, le damos al texto una etiqueta.
Esto coloca la etiqueta antes o después del elemento de la forma, dependiendo en donde escogemos “Posición”.

Abajo tenemos la sección “Estilo”. Aquí tenemos tres posibilidades:

1. “Envolver la etiqueta label”
2. “Adjuntar etiqueta label usandola como atributo”
3. “Sin etiqueta label”

Déjame empezar con la 2da opción “Adjuntar etiqueta label usandola como atributo”.
Esto vincula la label al campo de texto y el navegador entiende que es una label conectada a un campo de texto. Esta opción desplegará una etiqueta en tu navegador y cuando hagas click en la etiqueta, colocará tu cursor en el campo de texto correspondiente. O cuando es vinculada a una “Casilla de Verificación”, ésta seleccionará la casilla si la etiqueta fue clickeada.

Sin embargo, si movemos la etiqueta a la primer columna de nuestra tabla, esto desconectará la label y el campo de texto y necesitaremos modificar ésta etiqueta otra vez en el editor de etiquetas para cambiar el nombre.
Para abrir el editor de etiqueta para seleccionar la label, haz click en las teclas “Ctrl + T”.

Si escoges la primer opción “Envolver la etiqueta label”, entonces ésto le dará un nombre a la etiqueta “label”, pero no está vinculada al campo de texto.

Si escoges la tercer opción, no adicionará una caja de texto a tu etiqueta.
Todo esto es informativo y no necesitas crear una forma, pero quiero compartirte algo. Entre más sepas es mejor ¿no?

Luego tenemos la caja “Clave Acceso”.
Esta opción es equivalente a los atajos del teclado (una letra) y la tecla Alt es usada para seleccionar el objeto de la forma en el navegador. Por ejemplo si introduces una C como clave de acceso, los usuarios necesita usar Alt + C en el navegador para seleccionar ese objeto para ser copiado.

Y la caja “Pestaña Index”.
Aquí definimos el orden de las pestañas para varios objetos de forma. Cuando usamos una pestaña para un objeto, debes ajustar el orden de las pestañas para todos los objetos.

Si después deseas cambiar “Características de Accesibilidad”, haz click derecho en el objeto y selecciona “Editar Etiqueta <input>” en el menu desplegable.

Pongo sobre la mesa las opciones que pueden gustarte o no, asi que continuo con las propiedades de el texto en la siguiente lección.

Cursos

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats