You are on page 1of 112

MBC - Forms

2010 Juan Menndez Crespo

MBC - Forms
Generador de formularios para pginas web
por Juan Menndez Crespo

MBC-Forms es uno de los mdulos de integracin del


sistema de creacin y gestin de pginas web CMS - MBC.
El concepto ha sido desarrollado bajo ASP y MDB (Access),
aprovechando las posibilidades que lenguajes como CSS,
AJAX, XML y Javascript ofrecen al desarrollo de pginas
Web 2.0

MBC - Forms
2010 Juan Menndez Crespo
All rights reserved. No parts of this work may be reproduced in any form or by any means - graphic, electronic, or
mechanical, including photocopying, recording, taping, or information storage and retrieval systems - without the
written permission of the publisher.
Products that are referred to in this document may be either trademarks and/or registered trademarks of the
respective owners. The publisher and the author make no claim to these trademarks.
While every precaution has been taken in the preparation of this document, the publisher and the author assume no
responsibility for errors or omissions, or for damages resulting from the use of information contained in this
document or from the use of programs and source code that may accompany it. In no event shall the publisher and
the author be liable for any loss of profit or any other commercial damage caused or alleged to have been caused
directly or indirectly by this document.
Printed: enero 2010 in Oviedo

Publisher
MASTERCAFE SL
Managing Editor
Juan Menndez Crespo
Technical Editors
Enrique Menndez Crespo
Iryna Uk hanova
Cover Designer
Iryna Uk hanova
Team Coordinator
Mastercafe SL
Production
Juan Menndez Crespo

Special thanks to:


Toda la gente que ha contribuido con este desarrollo y
documentacin, en especial a los clientes que a lo largo de 2008
hicieron de beta-tester.

MBC - Forms

Tabla de Contenidos
Foreword

Part I Introduccin

1 FAQ

................................................................................................................................... 9

2 Links...................................................................................................................................
recomendados
11
3 Historia
...................................................................................................................................
de las versiones y revisiones
11
4 Mejoras
...................................................................................................................................
y log de evolucin
11
5 MBC-Forms
...................................................................................................................................
frente a sus competidores
12
6 Bug's...................................................................................................................................
detectados y correcciones
13

Part II Como usarlo

16

Part III Diagrama general

19

Part IV Mantenimiento

21

Part V Mantenimiento de tablas

24

1 Mtodos
................................................................................................................................... 24
2 Campos
................................................................................................................................... 24
3 Tipo Campos
................................................................................................................................... 25

Part VI Configuracin general

28

Part VII Definicin de formulario

32

1 Idioma
...................................................................................................................................
en formulario
36
2 Columnas
...................................................................................................................................
del formulario
37
3 Separador
...................................................................................................................................
de campos
38
4 Question
...................................................................................................................................
& Answer (Q-A)
39
5 Ejemplo
...................................................................................................................................
de Formulario
39
Form ularios incluidos
..........................................................................................................................................................
de ejem plo
41

Part VIII Definicin de campos

43

1 Idioma
...................................................................................................................................
en campos
48
2 Acciones
...................................................................................................................................
en campos
49
3 Campos
...................................................................................................................................
encadenados
49
4 Definicin
...................................................................................................................................
de valores
50
Idiom as en valores
.......................................................................................................................................................... 51

5 Ejemplos
...................................................................................................................................
de campos
51
Cam po oculto.......................................................................................................................................................... 52
Cam pos bloqueados
.......................................................................................................................................................... 52
2010 Juan Menndez Crespo

Contenidos

Cam po de texto
.......................................................................................................................................................... 52
Ayuda en rtulo
..........................................................................................................................................................
de cam po
53
Cam po de texto
..........................................................................................................................................................
enriquecido
54
Cam po de fecha
.......................................................................................................................................................... 55
Cam po de CheckBox
..........................................................................................................................................................
o verificacin
55
Cam po de Radio
..........................................................................................................................................................
o seleccin
56
Cam po de Mltiple
..........................................................................................................................................................
Radio-seleccin
57
Cam po desplegable
..........................................................................................................................................................
(SELECT)
58
Cam po desplegable
..........................................................................................................................................................
con OptGroup
59
Cam po de archivo
.......................................................................................................................................................... 60
Cam po de agrupam
..........................................................................................................................................................
iento FieldSet
61
Ayuda con JavaScript
..........................................................................................................................................................
en celda de rtulo
61
Personalizar el
..........................................................................................................................................................
rtulo
61
Personalizar el
..........................................................................................................................................................
cam po
62
Cam po CAPTCHA
..........................................................................................................................................................
(verificacin hum ana)
62
Verificacin hum
..........................................................................................................................................................
ana
63
Doble cam po de
..........................................................................................................................................................
verificacin de dato
63
Cam po de im agen
.......................................................................................................................................................... 64
Cam po con im..........................................................................................................................................................
agen sim ple
64
Cam po utilizando
..........................................................................................................................................................
form ato de presentacin
64
Botones
.......................................................................................................................................................... 65
Cam po con operaciones
.......................................................................................................................................................... 65
Cam biar el color
..........................................................................................................................................................
del cam po al foco
65
Cam pos encadenados
.......................................................................................................................................................... 66

Part IX CSS en MBC-Forms

68

1 Ejemplos
...................................................................................................................................
de CSS para personalizacin
69

Part X Eventos de un formulario

72

Part XI Javascript en MBC-Forms

74

Part XII Ajax en MBC-Forms

81

1 Validar
...................................................................................................................................
complejidad de un password
81
2 Verificar
...................................................................................................................................
existencia de un usuario
81

Part XIII Integracin con MBC-SQL

83

1 Recomendaciones
...................................................................................................................................
de integracin
83

Part XIV Datos para desarrolladores

85

Part XV Utiles

87

1 Calendario
................................................................................................................................... 87
2 Filtro ...................................................................................................................................
XSS
87
3 RTE Editor
...................................................................................................................................
texto
88
Insertar Im genes
.......................................................................................................................................................... 90
Insertar Links.......................................................................................................................................................... 93
Link de ancla
......................................................................................................................................................... 97
Link de email
......................................................................................................................................................... 98
2010 Juan Menndez Crespo

MBC - Forms
Insertar Tabla.......................................................................................................................................................... 98
Celdas
......................................................................................................................................................... 99
Filas y Columnas
......................................................................................................................................................... 99
Navegar por ..........................................................................................................................................................
el servidor
100
Insertar Flash
.......................................................................................................................................................... 100

Part XVI Usando forms.asp externamente

105

Part XVII Formularios ejemplo

107

Index

108

2010 Juan Menndez Crespo

Foreword

Pagina intencionalmente en vacio

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

Introduccin

Introduccin
Bienvenidos a MBC-Forms la herramienta de creacin de formularios en internet basado en ASP/
JavaScript con datos MDB (Microsoft Access).
MBC-Forms permite la creacin de cualquier tipo de formulario para incrustar en su pgina web, su
sistema de generacin de cdigo hace que la herramienta sea realmente fcil de utilizar para los
usuarios que no disponen de conocimientos de cdigo ASP/HTML/Javascript.
Se han incorporado funciones de Editor Dinmico (DHMTL) FCKEditor y el asistente de fechas
Calendar-Jvs, ambas herramientas son de terceras partes y debe referirse a sus correspondientes
pginas web para recopilar informacin adicional a la que se documenta en este manual.
Notas tcnicas del m anual:
Versin MBC-Forms 1.3.0911
Versin Web
SQL
Revisin
0911.1.3
Utl. Actual.
14/01/2010
Autor
Juan Menndez Crespo
Diseo grfico
Iryna Ukhanova
Copyright
Mastercafe SL - Oviedo'2010
Correcciones
Enrique Menndez Crespo
Descargas para uso Off-Line de docum entacin
Versin HLP
Pulse aqu
Versin CHM
Pulse aqu
Versin PDF
Pulse aqu
Versin EXE (e-Book) Pulse aqu

1.1

FAQ
Que es MBC?
MBC es un acrnimo de Model of Boxes and Containers o Modelo de Cajas y Contenedores.
Que es CMS?
CMS es el acrnimo de Content Management System o Sistema de Gestin de Contenidos
Porque el nombre MBC Forms?
Dado que la herramienta es solo utilizable desde MBC SQL como un mdulo ms de inclusin su
denominacin pasaba por incluir el trmino MBC
Que puede incorporarse a MBC Forms?
Cualquier tipo de campo de texto, texto Dinmico, campos de verificacin, campos de opcin,
desplegables, etc.. y todo ello permitiendo acciones en cada uno de los campos, verificacin de
contenidos, llamadas Ajax a otros programas para recuperar datos, etc...
Herramientas de terceras partes
MBC utiliza algunas herramientas de terceras partes como son: FCKEditor para facilitar la manipulacin
de contenidos y la adaptacin a la norma UTF8 de aquellos caracteres especiales que se deseen

2010 Juan Menndez Crespo

10

MBC - Forms

cargar; CAPTCHA para asegurar la gestin de seguridad y habilitar un mtodo que impida el acceso por
fuerza bruta a los datos, AdobeSpry para la gestin del men principal de mantenimiento, ShadowBox
como plugin extra para facilitar la gestin de medios adicionales en la web y la creacin de galerias con
un aspecto web 2.0, LightBox para la gestin de imgenes con aspecto web 2.0, YUI (Yahoo) en el
bloque de mantenimiento para ganar en versatilidad de gestin de contenidos.
Parametrizacin de la aplicacin
La utilidad se suministra con los formularios ms habitualmente utilizados y remitiendo sus datos por
correo electrnico a la direccin que se configure en cada uno de ellos.
Tecnologas y lenguajes que se usan
Bsicamente MBC3c utiliza ASP, Javascript y CSS. No obstante se han habilitado espacios donde el
usuario podr agregar mdulos y bloques nuevos que pueden cambiar la actual estructura o bien
implementar nuevas funcionalidades. El sistema est preparado para admitir librerias de Prototype,
JQuery, Dojo, YUI, etc... hasta ahora no se han detectado problemas de compatibilidad con alguna de
ellas.
Compatibilidad con navegadores
Se han realizado pruebas en los siguientes exploradores: Internet Explorer 6.xx, 7.xx y 8.beta,
Netscape Navigator 9, Opera 9.xx, FireFox 3.xx, Safari, K-Meleon, Flock, Maxthon, Google Chrome
(beta). Actualmente est asegurada la compatibilidad con todos ellos y que el aspecto sea siempre el
mismo. Solo se ve afectada la web cuando el cliente establece reglas propias de navegacin como
cambios de tipografa, colores, etc.. estableciendo su propia CSS de navegacin. Tenga en cuenta que
determinados campos y etiquetas como LABEL, BUTTON no estn disponibles en exploradores como
IE6, as como ciertas caractersticas de las CSS que son interpretadas de forma diferente entre Internet
Explorer, FireFox, Opera y Google Chrome/Safari.
Cuanto cuesta MBC-Forms
MBC-Forms es una herramienta que se integra solo en las pginas web alojadas en el servidor de
ISPActivo. Su coste es gratuito y solo debe abonar 5 euros/mensuales en concepto de actualizacin y
soporte. Su instalacin y configuracin se realiza desde el propio servidor, ofreciendo al cliente la
mxima facilidad posible en el uso e integracin con su pgina web.
Que incorpora MBC-Forms
Segn va evolucionando y se van realizando formularios de prueba, estos se entregan directamente
como ejemplos de plantilla para los clientes siendo 100% operativos para integrar en sus
correspondientes pginas web.
Tengo problemas en la generacin de un formulario da muchos errores
El generador ha querido ser lo ms abierto y flexible posible, dejando al usuario poder mezclar eventos,
propiedades, etc... a su criterio por todo el formulario. Eso implica que existan muchas posibilidades de
generar errores (especialmente en Javascript) en la creacin del formulario. Si no ve documentado algn
campo o evento que precisa en su formulario le rogamos lo solicite para anexarlo a la documentacin
actual. El objetivo de este manual es ofrecer todas las opciones y ejemplos posibles para facilitar la
tarea de construccin de un formulario.

2010 Juan Menndez Crespo

Introduccin

1.2

11

Links recomendados
Actualmente no hay una web disponible que permita ver en funcionamiento los ejemplos, a lo largo de
2009 estar disponible en www.mastercafe.com

1.3

Historia de las versiones y revisiones


MBC naci con la primera versin en Octubre'2008.
Rc1 - 12/2008 Versin inicial Release Candidate
Rc2 - 01/2009 Versin depurada lista para implementar
1.0 - 02/2009 Oficialmente est publicada la primera versin de MBC Forms
1.1 - 04/2009 Mejoras en los deplegables y mantenimiento general
1.2 - 07/2009 Novedades en los parmetros de uso e implementacin
1.3 - 11/2009 Nuevos bloques de configuracin, mejoradas las funciones de integracin con otras
aplicaciones. Nueva versin de mantenimiento
1.4 - 12/2009 Nuevos campos para integrar HTML del usuario sobre los campos y el formulario, atributos
de campo del usuario y otras mejoras

1.4

Mejoras y log de evolucin


Mejoras de la versin Beta 1.0rc1
- Encadenar campos para crear bloques en la misma linea (Ejemplo cuenta de banco xxxx-xxxx-xxxxxxxxxxxx)
- Incorporada funcin de encriptado/desencriptado RC4
- Inclusin de campos de control de aspecto de la tabla que configura el campo
- Inclusin en campos la posibilidad de encriptar el contenido del mismo
- Mantenimiento a travs de ShadowBox con mtodos DEBUG como en MBC-SQL/3c
- Validar valores contra contenido infeccioso por XSS
Fecha 1/1/2009
- Versin 1.0rc1
- Nuevo campo en la definicin de Campos para establecer el literal de error (resuelve necesidades para
campos encadenados)
- Nueva variable para permitir configurar el aspecto del area DIV del Ajax de cada campo (AjaxPos)
Fecha 15/1/2009
- Campos CAPTCHA
- Encriptacin de datos para texto de menos de 250 caracteres con la norma RC4
- ID para mejorar la manipulacin del DOM en las celdas, columnas y tablas, desde otros elementos del
formulario
Fecha 1/6/2009
- Asignacin de respuestas o valoraciones con literales a las posibles respuestas de cuestionarios por
Radio o Checkbox
- Integrar varios campos/botones en la misma fila
- Integracin de avisos con SHBOX y/o AJAX en los campos
- Mantenimiento con ms ayudas en la generacin de cdigo y valores en campos
- Validacin de campos por tipos (email, nmero, texto, etc..) integrado en verificacin de campos
Fecha 1/9/2009
- Integracin de herramientas de jQuery, as como plugins para la manipulacin y gestin de campos,

2010 Juan Menndez Crespo

12

MBC - Forms

tooltips, fieldformat, etc..


Fecha 1/12/2009
- Corregidos algunos bug menores en la gestin de imgenes
- Agregada aplicacin que abra directamente un formulario para usar en Javascript como elemento
emergente o iframe
Fecha 1/1/2010
- Nuevo panel de control y mantenimiento con ms ayuda y campos reordenados
- Nueva programacin del mantenimiento basado en clases para mejorar el funcionamiento, se
incorporan tooltips
- Se incorpora valor de nmero de registros contenidos en cada subtabla para facilitar la visin de cada
formulario
Mejoras previstas en futuras versiones
- Inclusin librerias Javascript para crear Sliders, TreeViews y otros nuevos elementos dinmicos para
campos
- Campos desplegables del mantenimiento en tablas mantenibles por el usuario
- Creacin de archivos XML para integracin con otras aplicaciones web
Si desea alguna mejora que no ha encontrado en la lista remita un correo a info@mastercafe.com con
su solicitud lo ms detallada posible.

1.5

MBC-Forms frente a sus competidores


Hemos querido extraer lo mejor de cada una de las aplicaciones a comparar y crear una lista de
aquellas funcionalidades que estimamos recomendables y/o necesarias en cualquier generador de
formularios.
Caractersticas disponibles
Caracterstica no disponible
Caracterstica parcialm ente

CARACTERSTICAS

MBC- PFor Caspi Encuest


Forms
m
o
a Fcil

Descarga e instalacin en equipo necesaria


Licencia de uso gratuita
Insertable en pgina web del cliente
Cdigo fuente modificable por cliente (HTML)
Cdigo Javascript modificable por cliente
Compatibilidad con navegadores (IE, Opera, FireFox, Safari, Flock,
etc...)
Generador de formularios independientes
Encadenar formularios
Almacenar datos en base de datos del formulario
Envo de datos por correo
Almacenar datos en base de datos del cliente
Estadsticas de uso
Configuracin de formulario por Clases (CSS)
2010 Juan Menndez Crespo

Introduccin

CARACTERSTICAS

13

MBC- PFor Caspi Encuest


Forms
m
o
a Fcil

Configuracin de formulario por Estilos (Style)


Tecla de acceso rpido en campos/formulario
Ordenar los campos
Rtulos de campos configurables por idiomas
Area de rtulos configurable en aspecto
Area de rtulos configurable por Clases (CSS)
Area de rtulos configurables por Estilos (Style)
Campos configurables por tipo
Campos configurables en aspecto por Clases (CSS)
Campos configurables en aspecto por Estilos (Style)
Area de campo configurable por Clases (CSS)
Area de campo configurable por Estilos (Style)
Ajax por campo
Acciones por campo
Encadenar campos en lnea
Encriptar datos
Uso de varios idiomas simultneamente
Ayuda en lnea por campo
Link de acceso a ayuda externa del campo
Validacin del formulario incluida
Botones automticos de Envo / Borrar
Botones automticos de Siguiente / Anterior
Filtro de texto para cdigo maligno en campos de texto XSS
Campos obligatorios configurables
Validacin de contenido de campos e-mail
Asistente de calendario en campos fecha
Campos de texto enriquecido con editor RTE
Generador de encuestas
Interface de configuracin grfica

1.6

Bug's detectados y correcciones


08/01/2009 Corregido problema con los valores por defecto en los campos input/texto
09/01/2009 Corregido controles de autobotones (Siguiente/Anterior) segn contenido poda perder la
navegacin
09/10/2009 Corregido campos encadenados que perdan en valor en navegacin
09/10/2009 Corregido campos Radio con mltiples valores internos que perdan el valor en navegacin
09/10/2009 Corregido campos Select Option/OptGroup (ComboBox o desplegables) que perdan el valor
en navegacin
11/10/2009 Corregido no permite dar un target distinto para los formularios embebidos
15/12/2009 Corregido campos Input/Image no utiliza correctamente src en lugar de Value
05/01/2010 Corregido problema de idioma en valores de campos desplegables (Select / Option)
Configurar anchos de las columnas de valores

2010 Juan Menndez Crespo

14

MBC - Forms

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

II

16

MBC - Forms

Como usarlo
MBC-Forms est creado como un Procedimiento y funciones en un mismo archivo ASP.
Realice un INCLUDE del mdulo ASP de MBC-Forms y desde su pgina haga una llamada al
procedimiento bdForms (parametros, estilorotulo, estilopie,ancho,estilo)
Si se realiza desde el propio MBC-SQL simplemente seleccione el patrn de mdulo BDForms e inserte
los datos necesarios en los campos de personalizacin.
Parmetros disponibles:
PARMETRO

VALORES

DESCRIPCIN

idform

Nmero

Asigna el nmero del formulario que se desea visualizar

pag

Nmero

Asigna el nmero de pginas correlativas que sern mostradas

tblborder

Nmero

Asigna el tamao del borde del formulario en pixel

tblspacing

Nmero

Asigna el espacio entre celdas

tblpadding

Nmero

Asigna el espacio interior de las celdas

usestyle

1/0

Asigna el uso o no de estilos propios en el mdulo

bdidx

Nmero

Indice principal de bsqueda para los datos vinculados al formulario, es


imprescindible este dato para poder realizar actualizaciones sobre los
datos del cliente en las fichas originales
Puede ser remitido tambin como una variable en la URL ejemplo: ?
bdidx=510 (use & en lugar de ? si tiene otros parmetros en la URL)

sndmail

Activar o cancelar el envo del formulario por mail

save

Activar o cancelar el envo de datos a bases de datos externas

noadd

Evita la grabacin de la informacin en el temporal de BDFORMS

En el caso de uso externo a MBC-SQL ser necesario la asignacin de variables idm y web, ya que
ambas son utilizadas en algunos procesos.
IDM establece el idioma en el que se utilizar el formulario (por defecto se recomienda es)
WEB asigna el entorno correspondiente si es que usamos varias pginas anidadas, ponga zz para
cualquiera
La no asignacin de idioma y web puede hacer que no se recopilen ciertos datos del calendario y Editor
HTML, no pudiendo presentarse de forma correcta.
Estas son las claves de idioma disponibles:
af (Africano), al (Albano), bg, big5, big5-utf8, br (Brasileo), ca (Catal), cs-utf8, cs-win, da, de (Alemn),
du, el, en (Ingls), es (Espaol), fi (Fins), fr (Francs), he-utf8, hr (Croata), hr-utf8 (Croata UTF8), lt
(Lituano), lt-utf8 (Lituano UTF8), lv, nl, no (Noruego), pl (Polaco), pl-utf8 (Polaco UTF8), pt (Portugues),
ro (Romania), ru (Ruso), ru-win_ (Ruso Windows), si, sk (Eslovako), sp (Espaol Moderno), sv (Sueco),
tr,zh, cn_utf8 (Chino Tradicional UTF8)

Nota importante:
- La mayor parte de los campos son opcionales y no es necesario rellenarlos por completo.
Observe que campos precisa en cada momento para generar el formulario que desea y evite
el exceso de valores que no aportan nada. Si tiene dudas consulte los ejemplos que se
2010 Juan Menndez Crespo

Como usarlo

muestran en Ejemplos de campos

2010 Juan Menndez Crespo

17

MBC - Forms
El generador de formularios web

Part

III

Diagrama general

19

Diagrama general
Todo el bloque de creacin de formularios se apoya en la tabla bdForm que aporta los datos bsicos de
creacin/configuracin del mismo.

Diagram a de tablas y relaciones

Esquema general de un campo en un formulario, la tabla que lo contiene y los diferentes apartados.
Toda la relacin entre tablas es de integridad referencial, por lo que al eliminar un formulario se elimina
simultneamente todos sus detalles y esa accin no es reversible.

Diagram a de los cam pos y los elem entos disponibles

En cada una de las zonas de un campo podemos establecer la personalizacin de aspecto con STYLE
y CLASS, la diferencia entre ambos reside en el origen de la secuencia CSS. STYLE permite el uso
directo de estilos CSS, mientras que CLASS necesita ser definido en una hoja de estilos archivo.css y
debe estar precedido por un punto ejemplo: .miestilo , dentro de este figuran las secuencias CSS
adecuadas al campo.

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

IV

Mantenimiento

21

Mantenimiento

Todos los formularios de las tablas disponen de los mismos botones y funciones operativas, veamos a
continuacin cuales son estas.
En la parte superior figura el nombre del proyecto MBC-BDForms, seguido del nombre de la Tabla
(TABLE) y botones de exportacin. Estos botones exportarn los datos disponibles por filtro en los
formatos de XLS (excel), XML y CSV (Excel campos separados por comas).
A continuacin vemos el bloque de ayuda de bsquedas con el campo de bsqueda (bajo el el mtodo
de bsqueda) y a su derecha el botn de enviar bsqueda (Search(*) ), Mostrar todos los elementos
(Show All) o acceso a la Bsqueda avanzada (Advanced Search)
Toda esa informacin pertenece a lo que se denomina bloque de cabecera de formularios de
mantenimiento.
El siguiente bloque pertenece al propio listado de datos, en la parte superior e inferior se repiten los
mismos accesos y tiles con el fin de facilitar su uso en listados largos. Entre ambos disponemos del
propio listado de registros, encabezados por el nombre de cada campo.
La primera lnea de los bloques de utilidades corresponde a la paginacin de la informacin, Pgina X de
X con los botones nos permiten navegar por las pginas del listado, tambin podemos asignar
directamente el nmero de la pgina a la que se desea acceder.
A su derecha el nmero de registros de la base de datos y los que son mostrados.
En el extremo derecho el tamao de registros por pgina, en este caso vemos que son 30, utilice el
desplegable para seleccionar otro valor, una vez cambiado la propia tabla cambiar automticamente el
nmero de registros a mostrar.
En la segunda lnea disponemos de los botones de funcin:
Add - Agregar nuevo registro
2010 Juan Menndez Crespo

22

MBC - Forms

InLine Add - Agregar nuevo registro en lnea


Grid Add - Agregar registros en rejilla
Grid Edit - Editar registros en rejilla
Delete Selected Records - Borrar los registros marcados
Update Selected Records - Funcin de actualizado simultneo para los registros que cumplen cierto
filtro
En el bloque del listado que est en el centro disponemos de izquierda a derecha de los siguientes
botones:
Lupa - Ver el registro de la lnea
Lapiz y Libreta - Editar el registro de la lnea
Hoja-Barra - Editar en lnea el registro de la lnea
Doble Hoja - Duplicar el registro de la lnea
Hoja-Barra Estrella - Duplicar en lnea el actual registro
Los siguientes links pertenecen a accesos rpidos filtrando por el registro de los datos contenidos en
otras tablas, en este caso vemos acceso a Columnas de Formularios, Idioma de Formularios y Campos
de Formularios (pueden variar segn la tabla).
El cuadro siguiente corresponde a la marca del campo, con este selector la siguiente operacin (por
ejemplo Borrado) se realizar sobre aquellos que dispongan de marca en este campo.

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

24

MBC - Forms

Mantenimiento de tablas
La tablas de apoyo tienen como utilidad central el simplificar la seleccin de elementos a lo largo de
todo el mantenimiento.
Es importante resear que estas tablas solo deben ser manipuladas por Expertos en HTML/Form ya
que su modificacin puede afectar al funcionamiento general de la aplicacin.
A continuacin detallamos las comunes a todas las versiones de MBC-Forms:

5.1

Mtodos
Bsicamente un formulario permite solo dos acciones GET o POST, la diferencia reside en si
recuperamos la informacin del servidor o bien simplemente la enviamos. Lo habitual de un formulario es
el mtodo POST o envo de datos.

5.2

Campos
Un campo de entrada (field) puede ser INPUT, TEXTAREA, SELECT, LABEL, BUTTON (no compatible
con IE6)
El campo ms habitual es INPUT que suele ser utilizado para la mayor parte de las cargas de datos en
cualquier formulario.
SELECT equivale a los desplegables donde se muestra una lista de valores para seleccionar uno de
ellos
TEXTAREA es un bloque de texto libre (caja de texto) que se fija a base de un ancho y un alto
LABEL es una etiqueta sencilla de texto, internamente se monta LABEL para los textos de rtulo de
cada campo, aunque puede ser agregado tambin en la columna del campo.
BUTTON es solo compatible con los navegadores recientes y la forma de utilizarlo con versiones
anteriores es por el INPUT Type="button", tambin existen otro mtodos que se describen con ejemplos
en los formularios de plantilla.
FIELDSET es compatible solo con los navegadores recientes, no siendo un campo inicial para captura
nos permite agrupar otros campos y mejorar el aspecto en pantalla

2010 Juan Menndez Crespo

Mantenimiento de tablas

5.3

25

Tipo Campos
Segn sea el campo que deseamos utilizar debemos seleccionar el Tipo adecuado, pese a que se
dispone en el desplegable de todos los valores, es necesario un conocimiento mnimo de tipos de
campos en formularios para realizar una correcta asociacin.
Se est preparando una mejora que filtrara los tipos segn el campo seleccionado.

2010 Juan Menndez Crespo

26

MBC - Forms

Relacin de Cam pos con Tipos


INPUT - BUTTON / CHECKBOX / FILE / HIDDEN / IMAGE / PASSWORD / RADIO / RESET / SUBMIT / TEXT
SELECT - OPTION / OPTGROUP
TEXTAREA - TEXT
FIELDSET - LEGEND

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

VI

28

MBC - Forms

Configuracin general
La configuracin se realiza sobre cada uno de los form ularios, duplique los valores si son iguales o
m odifique los correspondientes.

Variable MAILHOST
Establece el servidor que utilizaremos para el envo de los datos de los formularios
Variable MAILFROM
Cuenta de correo que emite el e-mail en el servidor (verifique que dispone de esa cuenta en el servidor)
Variable MAILFROMNAME
Nombre de la cuenta de correo que aparecer en el envo al destinatario
Variable MAILFROMSUBJECT
Campo de objeto/subject/motivo en el correo
Variable MAILCOPY
Cuenta de correo para remitir una copia del formulario
Variable MAILMSG
Texto HTML que construye el literal del e-mail que ser enviado (ver documentacin avanzada)
Variable GRAPH
Literal que se mostrar en los casos de los formularios concatenados (correlativos), puede utilizarse la
librera de Google Chart (ver ms informacin)
Estos son algunos ejemplos de grficos usando Google API-Chart

Variable DIVSTYLE
2010 Juan Menndez Crespo

Configuracin general

29

Crea un area DIV global con estilo personalizado por esta variable como STYLE=
Variable STRFINAL
Establece el texto que ser mostrado una vez completado el formulario y enviado, ya sea un formulario
nico o el ltimo de una relacin encadenada.
Variable POSBLOQUE
Establece con CSS (hoja de estilos) la posicin del area DIV que muestra el literal de GRAPH
Variable HLPSHBOX
Asigna la cadena de ayuda adicional a la etiqueta <A ... ></A> para la activacin y uso de ShadowBox
(incluida en MBC-SQL). La cadena mnima necesaria es rel="ShadowBox" pudiendo agregar parmetros
de Ancho y Alto a la caja de sombra o bien personalizar el estilo (vea documentacin en MBC-SQL)
Variable ADDCODE
Agrega el cdigo que contenga al mdulo de MBC-Forms, es habitual su uso en la inclusin de hojas de
estilo del usuario para personalizar los formularios. Ejemplo:
<link rel="stylesheet" type="text/css" media="all" href="css/misestilos.css"
title="MisCSS">

Variable SHASH
Cadena de nmeros y/o letras que generan una clave de encriptacin para los campos tipo password o
text (no es posible su uso en Radio, Select, TextArea, File y Fecha , se recomienda su uso por temas
de seguridad si la base de datos es accesible por otros mtodos a la propia web.
Variable AJAXPOS
Establece la posicin del area <DIV..> donde se sita el Ajax del campo. Los valores disponibles son
"line" para fijar en la misma lnea o "dblline" para fijar en una nueva lnea.
Variable USEMAIL
Reasignacin de usabilidad de la funcin de envo de formulario por e-mail, por defecto su valor es 1
Variable USEDATA
Utiliza la funcin de grabado de informacin en base de datos externa (si se define en el formulario y los
campos correspondientes), por defecto el valor es 0 (no usar datos).

2010 Juan Menndez Crespo

30

MBC - Forms

CAMPO DESCRIPCIN
Indice

Nmero automtico que fija el ndice de valores

Variable

Nombre de la variable a la que se refiere (solo estn permitidas aquellas que sean
documentadas o bien las que se incorporen en futuras mejoras y personalizaciones)

Parmetro Literal que asigna valor a la variable, puede ser utilizado con etiquetas HTML
(especialmente en GRPAH)
Descripci Describe el uso y contenido de la variable
n
MBC-Form Formulario al que est relacionado esta variable
IDIOMA

Idioma asignado a la variable

WEB

Pgina web en la que se utilizar

Add
(botn)

Botn de almacenado o grabado de la informacin contenida en este formulario

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

VII

32

MBC - Forms

Definicin de formulario
Corresponde el trmino html <FORM></FORM>
Es el bloque principal y quin establece todo el entorno que se visualizar, de esta tabla dependen el
resto de tablas vinculadas (campos, idiomas, valores, columnas, etc...) En cierta forma ser este
registro quin adems nos permita navegar entre otros formularios, as como establecer las referencias
de navegacin automtica.

Desde el listado de formularios disponible podemos acceder directamente a sus contenidos y


definiciones:
Columna (ancho de las columnas que presentan los campos)
Idioma (literales para usos en varios idiomas simultneamente)
Separador (espacio entre campos verticalmente)
Q&A (Preguntas y respuestas realizadas en los formularios)
Campos (definicin de los campos del formulario y sus usos)
El form ulario divide sus cam pos de control en 5 solapas o tabs que contienen cada una la inform acin relativa
a su ttulo

2010 Juan Menndez Crespo

Definicin de formulario

2010 Juan Menndez Crespo

33

34

MBC - Forms

CAMPO

DESCRIPCIN

DOM Name Nombre del formulario, es imprescindible este campo para conocer realmente a quin
corresponden los datos que dentro se carguen
Ttulo

Ttulo de la pgina en formato texto plano, limitado a 250 caracteres. Permite la inclusin
de etiquetas HTML para mejorar su aspecto, si no dispone de suficiente tamao para
almacenar su ttulo puede utilizar el Formulario Idioma con la asignacin Titulo

Columnas

Nmero de columnas que van a ser manejadas en las tablas de presentacin del
formulario

Bloque

Nmero del formulario, es un texto que ser mostrado en los contadores de


cuestionarios consecutivos
2010 Juan Menndez Crespo

Definicin de formulario

CAMPO
De Bloques

35

DESCRIPCIN
Nmero total de bloques al que pertenece el cuestionario y que fija la posicin total de
este

Completado Nmero entero de 0 a 100 que establece el tanto por ciento realizado de los
%
cuestionarios enlazados
Style=

Estilo directo asociado al formulario (equivale a un <FORM STYLE=..> utilice


nomenclatura CSS

Class=

Estilo directo asociado al formulario (equivale a un <FORM CLASS=..>

Method=

Desplegable de mtodos para el formulario (GET/POST)

Tipo Accin Accin directa asociada al formulario (OnClick, OnSubmit, etc...)


Action=

Accin relacionada con el tipo, se dispone de ValidaForm(this) para verificar los campos
obligatorios

Tipo Tabla

Identifica la forma de almacenar los datos en la tabla (campos independientes o bien


uniforme)

Cadena
Conexin

Establece la cadena de conexin para datos remotos y almacenar el contenido de los


campos del formulario. Es necesario asignar los valores necesarios para conexin a
datos Access o SQL-Server.
En Access: A2|bd=datos.mdb|tbl=mitabla|user=usuario|pwd=xxxxx en los casos de
archivos de datos sin proteccin omita los campos de user= y pwd=. La ruta de la tabla
debe ser dentro de su propio alojamiento indicando las carpetas ejemplo: miruta/datos/
datos.mdb
En SQL-Server: SQL|bd=micatalogo|tbl=mitabla|user=usuario|pwd=xxxx|
ip=88.225.150.160 en el caso de usar el propio servidor omita ip=, "micatalogo" indica el
catlogo de SQL donde estn las tablas
"tbl=" establece la tabla de destino de los datos, es necesario indicar el tipo de tabla
(Uniforme o Campos) para establecer el mtodo de grabacin de datos.

Tabla de
Datos

Nombre de la tabla que incorpora los datos del formulario

Redirect
URL

Direccin URL a la que se enva automticamente la pgina al terminar los procesos


suyos internos

FIELDSET

Crea un campo tipo FieldSet entorno del formulario (equivale a <FIELDSET>)

Fieldset
Style=

Establece los estilos STYLE asociados al Fieldset (equivale a <FIELDSET STYLE="..)


utilizando lenguaje CSS

Fieldset
Class=

Establece el estilo tipo class al Fieldset (equivale a <FIELDSET CLASS="..) Es


necesario que est disponible en su hoja CSS de la pgina web

LEGEND

Crea un literal de leyenda para el Fieldset (equivale a <LEGEND>...</LEGEND>)

Legend
Style=

Establece los estilos asociados con el Legend (equivale a <LEGEND STYLE="..)


utilizando lenguaje CSS

Legend
Class=

Establece el estilo tipo class al Legend (equivale a <LEGEND CLASS="..) Es necesario


que est disponible en su hoja CSS de la pgina web

Access Key Tecla de acceso rpido al Fieldset (equivale a ACCESSKEY="..)


e-Mail
Destino

Correo electrnico de destino del contenido del formulario en el caso de no ser


almacenado o desear una copia sobre los datos modificados en la tabla

Javascript

Cdigo Javascript que se incrusta por el usuario para realizar acciones en los campos y/
o formulario

Add (botn)

Botn de grabacin del formulario en curso

2010 Juan Menndez Crespo

36

MBC - Forms

CAMPO

7.1

DESCRIPCIN

Buttons

Se dispone de 4 botones preconfigurados para el uso en los formularios, estos botones


disponen de literales en Idioma en Formulario y tan solo es necesario marcar aquellos
que deseamos se habiliten automticamente. Todos los botones incorporan el evento
OnClick=ValidaForm(this) excepto RESET. El funcionamiento en el caso de los botones
de SIGUIENTE y ENVIAR es idntico, si bien el aspecto varia en ambos casos.

Buttons
Style=

Establece el estilo tipo STYLE utilizando lenguaje CSS

Buttons
Class=

Establece el estilo tipo CLASS al area <DIV> que contendr los botones. Es necesario
que est disponible en su hoja CSS de la pgina web

Add HTML

Agrega cdigo HTML del usuario al propio formulario. Esto es realmente til cuando
precisamos incorporar determinadas funciones de frameworks externos o bien gestionar
areas DIV para posibles uso de Ajax en el formulario, as como agregar ciertos estilos
CSS del usuario al propio formulario independiente del resto de la web.

Idioma en formulario

La principal ventaja del uso de esta tabla reside en la posibilidad de dar tamaos muy superiores a los
que nos fija el propio formulario. Por otro lado esta es la forma de poder asignar literales adicionales al
formulario, cada uno de ellos con ciertas especificaciones (estilos y/o textos) y adems utilizar

2010 Juan Menndez Crespo

Definicin de formulario

37

diferentes idiomas si es que nuestra web as lo precisa.

CAMPO DESCRIPCIN

7.2

ID Form

Nmero del formulario al que se hace referencia, este valor se carga automticamente si
hemos utilizado el acceso desde el formulario de referencia

Idioma

Literal que establece el idioma para el literal, utilice la norma internacional de idiomas
(es=Espaol, en=English, de=Alemn, etc...)

Texto

Texto que se mostrar, puede utilizar todo tipo de etiquetas para este campo

Tipo

Los textos estn relacionados con el uso de los mismos, as Ttulo equivale al ttulo de la
web, Descripcin (amplia el texto genrico del formulario o bien fija la pregunta de un
cuestionario), Legend (leyenda opcional en idiomas), Anexo (literal que se muestra en la
parte inferior del formulario como notas adicionales), el resto de tipos pertenece a la
personalizacin de botones automticos en los formularios.

Add
(botn)

Botn de almacenado o grabado de la informacin contenida en este formulario

Columnas del formulario

Las columnas del formulario nos ayudan a establecer una norma en pixel para mejorar el aspecto del
mismo.
Tenga en cuenta que la suma de los anchos no puede superar el ancho del propio formulario usado en
MBC. Por otro lado cada columna deber disponer de un ancho suficiente para el contenido de
informacin que se desea insertar en ellla.

2010 Juan Menndez Crespo

38

MBC - Forms

CAMPO

DESCRIPCIN

ID Form

Nmero del formulario al que se asocia este registro, al usar el acceso desde formularios
este campo se rellena de forma automtica haciendo referencia al formulario origen

Columna Nmero de la columna, deben ser nmeros correlativos comenzando en el 1

7.3

Ancho

Nmero que indica los pixel que deben tener cada columna

Add
(botn)

Botn de almacenado o grabado de la informacin contenida en este formulario

Separador de campos
El separador permite realizar un espaciado vertical entre los diferentes campos con el fin de mejorar su
aspecto en pantalla.
Es habitual en formularios tipo cuestionario donde se generan listas de opciones tipo Radio para una
cuestin.

Cada form ulario perm ite solo un registro de asignacin de separador

2010 Juan Menndez Crespo

Definicin de formulario

39

CAMPO

DESCRIPCIN

ID Form

Nmero del formulario al que se asocia este registro, al usar el acceso desde formularios
este campo se rellena de forma automtica haciendo referencia al formulario origen

Separado Literal en etiquetas HTML para crear el espacio de separacin


r
Str Situa Situacin respecto de los campos ARRIBA (top), ABAJO (bottom), ARRIBA-ABAJO
(topbottom)
Add
(botn)

Botn de almacenado o grabado de la informacin contenida en este formulario

Ejemplo de separadores:
HTML Simple: <hr>
DIV con CSS : <div style="width:100%;height:2px;background-color:#555500;margin-bottom:5px;"></
div>
Puede utilizar cualquier tipo de elemento HTML, ya sean imgenes, areas div con estilos, tablas, etc.

7.4

Question & Answer (Q-A)


Es la base de datos de almacenamiento temporal de las preguntas y respuestas de los formularios.
Estos datos son utilizados para ser enviados por correo, mantener controles estadsticos del
funcionamiento de los formularios o bien como paso intermedio antes de lanzar la informacin a la base
de datos definida por el usuario en su web.
Mantiene dos ndices de control principal: el IDForm (nmero de formulario al que se hace referencia) y
IDSesion (sesin del servidor en el que se realizaron la carga de los datos)

7.5

Ejemplo de Formulario
DOM Name : prueba
Establezca siempre un nombre DOM sin espacios ni caracteres especiales, es recomendable el uso
uniforme de caracteres para simplificar las llamadas y referencias posteriores.
Ttulo : Formulario de Pruebas y chequeo de campos
Este sera el literal que aparecera en el formulario como Ttulo del mismo, en este caso no hemos
utilizado ninguna etiqueta HTML, no obstante veamos un ejemplo con etiquetas. Ttulo : <span
style="font-size:16px;">Formulario de Pruebas y chequeo de campos</span>
Recuerde que el lmite son 250 caracteres. En caso de precisar una longitud mayor utilice la tabla de
idioma y asigne correctamente el idioma del campo.
Columnas : 2
Fijamos que las tablas donde sern colocados los campos deben disponer de 2 columnas, una se
utilizar para el rtulo y otra para el campo.
Bloque : 3
Indicara que este es nuestro 3 formulario de una serie enlazada de formularios
De bloques : 8
Nmero de formularios enlazados o totales.

2010 Juan Menndez Crespo

40

MBC - Forms

Completado % : 40
Valor en % del formulario sobre el total, no tiene porque coincidir matemticamente con el % de bloque
ya que est pensado para los campos contenidos en ellos.
Style= : background-color:#cccccc;color:#000000;
Utilizando la nomenclatura de las CSS en este ejemplo fijamos un fondo gris claro y un texto de color
negro, estos son los valores generales para el formulario
Class= : .formgeneric
Nombre en la hoja de estilos CSS que tenemos en la web cargada de la clase que se asocia a este
formulario, puede ser incluso una clase que utilicemos de forma habitual en nuestra web.
Method= : POST
En este caso necesitamos enviar al servidor nuestros datos del formulario para ser almacenados
Tipo Accin : OnSubmit
Fijamos que deseamos realizar un proceso al utilizar la accin en envo (OnSubmit)
Action= : return ValidaForm(this)
En este caso utilizamos la propia funcin que incorpora el formulario para validar los campos
obligatorios en el formulario
Cadena Conexion : Provider=SQLOLEDB;Persist Security Info=False;Data Source=192.168.0.33;
Initial Catalog=mibbdd;User Id=invitado;Password=123456
Establece como conectar a nuestra base de datos, en este caso es recomendable siempre el uso de
bases de datos SQL ya que para MDB de Access necesitar conocer exactamente la ruta de acceso
completa, no es posible actualmente una conexin almacenada con SERVER-MapPATH
Tabla de Datos : bdContactoClientes
Nombre de la tabla donde se van a almacenar los datos contenidos en el formulario, cada formulario
hace referencia a una sola fuente de datos (tabla), en el caso de necesitar varias tablas utilice tantos
formularios enlazados como tablas tenga y precise.
Redirect URL : index.asp?zona=miform4
Una vez completados los procesos de este formulario vamos a ir de forma automtica al siguiente
formulario, en este caso hemos puesto una URL relativa a la propia web MBC-SQL, si desea una ruta
absoluta utilice la URL completa como: http://www.suweb.com/pagina.htm
FIELDSET : marcado
Hemos decidido disponer de un marco basado en una lnea que rodear nuestro formulario
Fieldset Style : padding:4px;
Para no dejar el texto pegado a los bordes asignamos un espaciado interior de 4px
Fieldset Class : .fldrojo
Asignamos de nuestra tabla CSS la clase fldrojo a este objeto (es necesario que disponga de esta
clase en las CSS cargadas en la pgina web
LEGEND : UN EJEMPLO
Vamos a poner en la esquina izquierda superior un rtulo sobre la lnea del Fieldset con ese texto
Legend Style= : Padding-left:3px;padding-right:3px;
Establecemos propiedades de estilo a nuestro texto metiendo 3px a izquierda y derecha para separarlo
2010 Juan Menndez Crespo

Definicin de formulario

41

de la lnea
Legend Class= : .fldlegend
Asignamos de nuestra tabla CSS la clase fldlegend a este objeto (es necesario que disponga de esta
clase en las CSS cargadas en la pgina web
Access-Key : P
Usaremos la tecla ALT-P (en Macinstosh solo P) para acceder de la pgina al formulario y iniciar su
proceso
e-Mail Destino : mimail@midominio.com
Una vez terminado el formulario, e independientemente a su almacenamiento deseamos que nos remita
un correo de aviso con la informacin cargada
JavaScript :
En este campo escribiramos nuestro cdigo Jvs estableciendo funciones y/o variables que sern
llamadas en los campos y eventos de estos

7.5.1

Formularios incluidos de ejemplo


Formulario de Contacto simple
Formulario de Contacto ampliado
Formulario de Contacto con verificacin de clave y Ajax de evaluacin de complejidad de clave
Formulario de suscripcin a newsletter
Formulario con campos calculados (ejemplo de compra simple)
Formulario de Satisfaccin de Clientes
Cuestionario de 6 etapas
Cuestionario con evaluacin de resultados

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

VIII

Definicin de campos

43

Definicin de campos
Un cam po es un valor que se contiene dentro de una tabla en uno de sus registros.

A la izquierda de la lista adems de los tradicionales botones de Ver/Editar/Duplicar disponemos de los


accesos a Acciones de los campos, Personalizacin en idiomas, valores disponibles (para campos tipo
SELECT y RADIO) y encadenar campos, etc...
La pantalla de carga de informacin de los campos se divide en cinco solapas o tabs que se definen por
el ttulo de la misma, agrupando as los campos relativos a este.

2010 Juan Menndez Crespo

44

MBC - Forms

2010 Juan Menndez Crespo

Definicin de campos

45

CAMPO

DESCRIPCIN

Id Form

Nmero de formulario al que se le asigna este campo de carga

Id Name=

Nombre del formulario (en HTML NAME=), debe ser un identificador nico para poder
recopilar correctamente la informacin, solo se usarn nombres iguales cuando el
campo corresponda a un INPUT RADIO para ayudar a la seleccin/deseleccin del valor
que se desea

Encadenado Campo con el que se encadena este. Solo seleccione este valor en caso de desear
poner campos seguidos, en el resto de los casos deje sin seleccin este campo
AccessKey

Tecla de acceso rpido, en Windows es necesario pulsar ALT+tecla en Macintosh


simplemente la letra

Obligatorio

Establece que el campo es de obligada carga, internamente genera una funcin en


Javascript ValidaForm() que verifica el contenido y avisa si estuviera vaco.

XSS Check

Verifica que el contenido del campo no disponga de contenido maligno para almacenar o
visualizar en web. Los trminos como script, embed, on(accion), layer, frame, ilayer,
vbscript, javascript, applet, etc... son modificados directamente antes de ser
almacenados en la base de datos y se incorporan caracteres que evitan su ejecucin
"<x>" as el trmino <script ...> se convierte en <s<x>cript> y no es interpretable ni
usable.

Orden

Nmero que establece en que orden ser mostrado el campo (en consecuencia
establece el TABINDEX del HTML del formulario)

Presentacin Desplegable que establece si el campo ser visualizado a la derecha o la izquierda del

2010 Juan Menndez Crespo

46

MBC - Forms

CAMPO

DESCRIPCIN
rtulo, es necesaria su asignacin an cuando este campo sea de una sola columna o
sin valor en el campo

Tipo

Establece el tipo bsico del campo (en HTML <TIPO valores>), cada tipo admite ciertas
caractersticas de contenido y subtipo de campo

Input Type=

Establece el tipo de campo que se mostrar (Button, File, Text, etc...) Es imprescindible
tras la declaracin de Tipo para poder asignar un aspecto al mismo. (en HTML TYPE=)

Valor por
defecto

Asigna un valor predefinido al campo (en HTML VALUE=), siendo un valor opcional es
muy recomendable para campos del tipo Radio con el fin de poder establecer un valor
inicial

Longitud

Ancho previsto para la caja de texto, no implica que pueda aadir ms texto (mxima
lng).
En el caso de Tipo TEXTAREA debe escribirse la longitud como ancho,alto (en
caracteres), el comportamiento de ancho y alto varia si esa TEXTAREA usa o no el
Editor HTML incrustado
En el caso de Tipo FIELDSET equivale al nmero de campos que se agrupan dentro de
el, en caso de superior al nmero de campos restantes por incorporar al formulario se
cierra automticamente
No asigne valores en los casos de campos tipo SELECT y este se ajustar al ancho del
valor mayor

Mxima Lng. Asigna el nmero mximo de caracteres que se admiten en el campo, con el fin de evitar
posibles prdidas de informacin en el almacenamiento dentro de una base de datos, no
suele utilizarse en formularios de envo por e-mail
HTML Editor Activa el editor HTML (FCK-Editor) dentro de un campo TEXTAREA, no es utilizable por
el resto de tipos de campos, activarlo en un campo de fecha o de texto corto puede
implicar no visualizar los datos contenidos
Calendario

Activa el botn del asistente de Calendario para facilitar la seleccin de una fecha
concreta

Ayuda

Texto plano o HTML de ayuda. Puede utilizarse cdigo similar a <img src"..." /> con el
fin de visualizar una imgen como botn de acceso a la ayuda

Link Help

Link que se asigna a Ayuda, siempre ser en una nueva ventana y debe estar escrita la
URL completa ejemplo: http://www.miweb.com/ayuda/archivoayuda.htm

Rtulo

Texto que describe al campo como rtulo de este, puede ser utilizado sin asignacin de
campo, en cuyo caso se convierte en un literal de descripcin dentro del formulario.
En el caso de Tipo FIELDSET este valor construye el dato LEGEND de la caja

Texto error

Literal que se muestra en la validacin del campo si utiliza la funcin Javascript interna
ValidaForm(this), si no se indica se asigna por defecto el texto del rtulo. Se recomienda
su asignacin en campos encadenados o bien en aquellos que utilicen caracteres
especiales como acentos, diresis, ees, etc...

BD Field

Campo de destino de la base de datos donde ser almacenada la informacin de este


campo

Conversin

Asigna una posible conversin a los datos antes de ser almacenados ( a texto, a entero,
a fecha, etc...) Tenga cuidado en la seleccin de conversin ya que un literal convertido
a nmero Entero o Largo puede significar almacenar un 0. En la versin Binaria solo
debe ser utilizada en el caso de trabajar con un campo tipo FILE si este se desea grabar
como Binario y no la cadena de texto del archivo subido. Por otra parte este campo
aporta el filtro de validacin de contenido para los campos, as una conversin a e-Mail
verifica que el contenido dispone de una direccin vlida, a entero y a largo verifica que
solo se han insertado nmeros en el campo (no permite decimales), a texto permite todo

2010 Juan Menndez Crespo

Definicin de campos

CAMPO

47

DESCRIPCIN
tipo de contenido, a booleano solo admite 1 o 0, a fecha valida que el dato contiene
informacin vlida para una fecha.

Aspecto

Forma en la que se va a presentar el campo:


En lnea: muestra el rtulo seguido del campo (debe insertar espacios en el rtulo con
&nbsp; para separar ambos)
En doble lnea: muestra el rtulo y con un simple retorno de carro el campo alineado a la
izquierda del rtulo
En dos filas: separa el rtulo y el campo en dos filas de la tabla que construye el
formulario
En dos columnas: crea tanto en rtulo como el campo en columnas separadas y
correlativas

Formato

Solo utilizable para campos que precisen formatos especiales como cuentas de banco
XXXX-XXXX-XX-XXXXXXXXXX, fechas dd/mm/yyyy, estos formatos son a nivel de
almacenamiento y para la presentacin en los datos o bien pueden ser utilizados con
Javascript del cliente tipo Mootools, Prototype o jQuery, ya que el propio HTML no
permite dar formato a los campos.

Rtulo Cell
Action

Acciones asociadas a la celda del rtulo (onMouseOver, OnMouseOut, etc...) con las
llamadas en Javascript correspondientes

Rtulo Cell
Style=

Estilo CSS directo a la celda (en HTML STYLE=) asignable solo a la celda del rtulo

Rtulo Cell
Class=

Estilo tipo Clase (.class) de la hoja de estilos CSS incluida en la web (en HTML
CLASS=) asignable solo a la celda del rtulo

Rtulo
Style=

Estilo CSS directo al contenido en este caso el rtulo

Rtulo
Class=

Estipo tipo Clase (.class) de la hoja de estilos CSS incluida en la web, en este caso
solo para el rtulo

Campo Cell
Action

Acciones asociadas a la celda del campo (onMouseOver, OnMouseOut, etc...) con las
llamadas en Javascript correspondientes

Campo Cell
Style=

Estilo CSS directo a la celda (en HTML STYLE=) asignable solo a la celda del campo

Campo Cell
Class=

Estilo tipo Clase (.class) de la hoja de estilos CSS incluida en la web (en HTML
CLASS=) asignable solo a la celda del campo

Campo
Style=

Estilo CSS directo al contenido en este caso el campo

Campo
Class=

Estipo tipo Clase (.class) de la hoja de estilos CSS incluida en la web, en este caso
solo para el campo

Ajax Div

Genera un rea DIV para recibir el contenido Ajax en el caso de realizar acciones. Las
areas DIV quedan denominadas como ID=ajax_IdName Ejemplo: IdName=MiCampo
<DIV ID="ajax_MiCampo"></DIV>

Ajax Accin Acciones de Ajax que se incorporan (OnBlur, OnChange, OnFocus, etc...)
Valor Default Valor por defecto que se almacena en el caso de que no se cumplimente el formulario y
no se disponga de informacin en este. Evita los posibles errores en carga de formulario
que el usuario ha retirado el valor previo establecido solo para modificar.
Add (botn)

Botn inferior del formulario para cargar o terminar de editar un campo, al pulsarlo se
almacena la informacin contenida en el mismo

Add HTML

Agrega cdigo HTML del usuario al propio formulario. Esto es realmente til cuando
precisamos incorporar determinadas funciones de frameworks externos o bien gestionar

2010 Juan Menndez Crespo

48

MBC - Forms

CAMPO

DESCRIPCIN
areas DIV para posibles uso de Ajax en el formulario, as como agregar ciertos estilos
CSS del usuario al propio formulario independiente del resto de la web.

Algunos valores de campos son asignados de forma interna, para evitar que afecten a la informacin que
el usuario quiera generar disponen de claves prefijo, en el caso de los campos el que se utiliza es mbc_
mbc_flgfrm para un campo oculto de gestin de datos y estado del formulario
mbc_sesion para la sesin del usuario en el formulario (o formularios encadenados)
mbc_zonaorig para la zona origen o anterior al formulario actual
ajax_ de prefijo para las areas DIV de ajax de cada campo.
A los campos de tipo Password se ha incorporado una funcin que elimina letras como espacios ( ),
apstrofes (') y el carcter igual (=), con el fin de evitar posibles ataques con manipulacin de carga de
contenido. De la misma forma la cadena password es convertida a ASCII y codificada para evitar ser
visualizada externamente.

8.1

Idioma en campos

Nos permite personalizar los formularios segn sea el idioma que corresponda al mismo, es un valor
alternativo al que se fija en la Definicin de campos como valor por defecto en el caso de no disponer de
idioma
CAMPO

DESCRIPCIN

ID Field

Establece el nmero del ndice relacionado con Campos, se rellena automticamente si


entramos desde la propia definicin de campos

Idioma

Idioma asignado al literal, utilice la norma internacional de textos para idioma


(es=Espaol, en=English, fr=Francs, etc...)

Texto

Literal que ser mostrado sustituyendo al que se define en el campo segn sea el
idioma

Tipo

Desplegable que nos ayuda a definir si el literal establecido es para el Rtulo del Campo,
el Literal o el valor que debe tener por defecto en el campo, Comentarios aadidos al
campo, Texto de mensaje de error si es obligatorio

Add (Botn)

Botn de almacenado o grabado de la informacin contenida en este formulario

2010 Juan Menndez Crespo

Definicin de campos

8.2

49

Acciones en campos

Son acciones adicionales a las que se pueden fijar en la definicin de cam pos en Ajax Accin.

Es necesario conocimientos medios/avanzados de Javascript para su utilizacin correcta. La diferencia


bsica entre esta zona de acciones y la otra es la posibilidad de asociar acciones a elementos del
DOM de nuestro formulario distintos del propio nombre DOM del campo en el que nos encontramos
CAMPO

DESCRIPCIN

ID Field

Nmero relacionado con los campos, si accede a este formulario desde el acceso directo
de Definicin de Campos su valor se rellena de forma automtica

Evento

Evento propio del campo (OnFocus, OnBlur, OnChange, etc...)

Javascript
Fn()

Nombre de la funcin Javascript a la que llamamos desde este campo con evento

DOM
destino

Nombre del objeto al que hacemos referencia en el evento

Add (botn) Botn de almacenado o grabado de la informacin contenida en este formulario

8.3

Campos encadenados
En ocasiones precisamos crear campos con varios tramos de valores, quizs los ejemplos ms
habituales son la cuenta del banco XXXX-XXXX-XX-XXXXXXXXXX, o separar el Nombre en Nombre y
Apellidos.
La solucin es la creacin de campos encadenados, es decir que se mantienen uno a continuacin del
otro. Lo que MBC-Forms realiza es asignar por herencia ciertas propiedades del campo principal a los
campos encadenados.

Caractersticas:
- Utilice &nbsp; para indicar espacios entre los campos como separador
- Utilice <BR /> para realizar un retorno de carro entre los campos como separador
- El campo de orden es interno y referido al campo al que se encadena
Limitaciones de los campos encadenados:
- Solo es admisible encadenar campos de tipo INPUT (TEXT, BUTTON, HIDDEN, PASSWORD)
- Los campos tipo INPUT RADIO/CHECKBOX pueden utilizar la columna de valores para realizar la
misma funcin

2010 Juan Menndez Crespo

50

MBC - Forms

- Si se activa Calendar se muestra al final de los campos encadenados, pero asigna el valor al primero
de ellos
- Solo se permite personalizar Rtulo y Campo por STYLE y CLASS
- No es posible el uso en TEXTAREA, SELECT (OPTION/OPTGROUP)

8.4

Definicin de valores

La definicin de valores nos ayuda a colocar varios elementos como opciones para un solo campo, es
habitual su uso en campos de tipo SELECT, puede ser utilizado tambin para campos tipo RADIO e
INPUT-BUTTON

CAMPO DESCRIPCIN
ID Field

Nmero relacionado con los campos, si accede a este formulario desde el acceso directo
de Definicin de Campos su valor se rellena de forma automtica

Value=

Valor que se asigna en el caso de seleccionar ese elemento, no asigne valor si corresponde
2010 Juan Menndez Crespo

Definicin de campos

51

CAMPO DESCRIPCIN
a un Ttulo de grupo y utilice / (barra de divisin) para las listas de OPTGROUP utilizando
as ese registro como cierre de ttulo de agrupado
Texto

Literal que ser mostrado en el desplegable de la SELECT o bien en los textos de RADIO y/
o BUTTON. Este texto ser el literal por defecto en el caso de no disponer de idiomas

Orden

Orden forzado en el que se van a mostrar los elementos, caso de disponer de valores
iguales se fija por el ndice propio de la tabla

Selected Asigna a ese valor la propiedad SELECTED dejndolo como valor por defecto en el campo
Add
(botn)

8.4.1

Botn de almacenado o grabado de la informacin contenida en este formulario

Idiomas en valores

Nos permite personalizar los valores de los campos segn sea el idioma que corresponda al mismo, es
un valor alternativo al que se fija en la Definicin de Valores de los campos como por defecto en el caso
de no disponer de idioma
CAMPO

8.5

DESCRIPCIN

ID Field

Nmero relacionado con Definicin de Valores, si accede desde el vinculo de Definicin de


valores este campo se rellena de forma automtica

Idioma

Idioma asignado al literal, utilice la norma internacional de textos para idioma (es=Espaol,
en=English, fr=Francs, etc...)

Texto

Literal que se muestra segn el idioma

Default
Value

Valor por defecto que se asocia al campo y su valor segn el idioma

Add
(botn)

Botn de almacenado o grabado de la informacin contenida en este formulario

Ejemplos de campos
A continuacin damos los ejemplos tpicos y ms habituales de los campos que son utilizados en un
formulario, as como una breve descripcin de como realizar el o los asientos para conseguir el efecto.

2010 Juan Menndez Crespo

52

MBC - Forms

Recuerde que las posibilidades de personalizacin y creacin estn sujetos a sus conocimientos de
CSS y su capacidad de Diseo
En la pestaa de DATOS es importante identificar el Aspecto del campo (en linea, doble linea, dos
columnas, dos filas) ya que es un valor que no se asume por defecto y establece el mtodo de
presentacin del campo. Se ha previsto en futuras versiones asignar por defecto el valor En Lnea.

8.5.1

Campo oculto
Los campos ocultos son muy tiles para trasladar informacin que precisamos en la base de datos o
bien en el correo que se enve sin falta de que el cliente vea esta informacin ya que es interna.
Por defecto todos los formularios incorporan un campo oculto que tiene de IdName : mbc_flgfrm
PARMETRO VALOR
DESCRIPCIN
ID Name
micampo Nombre o texto sin espacios para definir el campo
Orden
10
Definir en el orden deseamos colocarlo, se recomienda al principio del
formulario por temas de aspecto
Presentacin RotuloIzquierda rotulo, derecha campo, realmente no importa que se asigne ya que
Campo
no se muestra
Tipo
INPUT
Campo de entrada de informacin
Input Type= HIDDEN Establece que sea oculto
Valor por
V1
El valor que deseamos tener para trasladar a la base de datos
Defecto
Notas: el resto de campos no afectan al uso o presentacin del mismo ya que es oculto

8.5.2

Campos bloqueados
Una opcin que podemos utilizar como alternativa a los campos ocultos y que mostrara la informacin
al usuario sin permitir que este pueda modificarla es el campo bloqueado o "locked".
La creacin es simple ya que sera idntico a cualquier campo que necesitemos, la variacin reside en
las acciones del campo, en este caso en el campo Ajax Accin pondremos: OnFocus"this.blur()"
readonly

El efecto que se consigue es un campo visible pero no modificable por el usuario. Recuerde que esta
caracterstica es independiente al resto de configuracin del campo (aspecto, colores, tipo, etc...)
pudiendo as bloquear la informacin que precisa no ser modificada.

8.5.3

Campo de texto
Es el tipo de campo ms usado y verstil, permite la carga de cualquier contenido de texto y/o
nmeros.

PARMETRO
ID Name=
mitxt
Orden
12

VALOR

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
2010 Juan Menndez Crespo

Definicin de campos

53

PARMETRO
VALOR
Presentacin Rtulo-Campo
Tipo
Input Type
Longitud
Mxima Lng
Ayuda

Link Help

Rtulo
Conversion
Aspecto

DESCRIPCIN
Izquierda el rtulo, derecha el campo de texto para el
cliente
INPUT
Campo de entrada de datos
TEXT
Tipo Texto
50
Tamao (ancho) que muestra el campo en pantalla
80
Mximo de caracteres que se admiten en el campo
<img src="images/hlpbtn.gif" Hemos asignado una imagen utilizando etiquetas HTML,
border="0" hspace="4"
esta imagen esta en nuestra carpeta IMAGES bajo la ruta
alt="HELP/AYUDA"/>
de la pgina web, sin borde visible
http://www.mbc3c.com/
Direccin web a la que remitimos para visualizar la ayuda
manual/
esquema_general_mbc3c.
htm
Introduce un texto
Texto a mostrar para indicar que debe ser escrito en el
campo
A TEXTO
Es un dato opcional para convertir el dato antes de grabar
Dos Columnas
Usar en la tabla del formulario varios <TD> para mostrar
Rotulo y Campo

Pueden ser utilizados todos los campos de aspecto como Formato, Rtulo Cell Style, etc...
Los campos de accin nos pueden servir para escribir pequeas funciones que ajusten el texto, lo
conviertan en maysculas, o bien para procesar verificaciones sobre el valor cargado.

8.5.4

Ayuda en rtulo de campo


Esta funcionalidad puede ser insertada en cualquiera de los campos y es comn en forma de uso y
operacin
PARMETRO
VALOR
DESCRIPCIN
Ayuda
<img src="images/hlpbtn.gif" Hemos asignado una imagen utilizando etiquetas HTML,
border="0" hspace="4"
esta imagen esta en nuestra carpeta IMAGES bajo la ruta
alt="HELP/AYUDA"/>
de la pgina web, sin borde visible
Link Help
http://www.mbc3c.com/
Direccin web a la que remitimos para visualizar la ayuda
manual/
esquema_general_mbc3c.
htm
El campo ayuda fija el texto o bien con etiquetas HTML el objeto que presentamos, el link incorpora un
vnculo al objeto anterior para dirigir la navegacin. Puede ser utilizado un elemento FLASH insertando
un objeto embebido en ayuda.
Una versin alternativa puede ser el uso de JavaScript en los eventos del ratn sobre la celda (o
cualquier otro elemento):
onMouseover="ddrivetip('Texto de ayuda dinamico con CSS y Jvs', 300)" onMouseout="hideddrivetip()"
href="#"
En este caso hemos integrado algunos Javascript de DynamicDrive sobre nuestro formulario para

2010 Juan Menndez Crespo

54

MBC - Forms

agregar una funcionalidad de ayuda en el evento MouseOver de la casilla del rtulo

8.5.5

Campo de texto enriquecido


Es el tipo de campo ms usado y verstil, permite la carga de cualquier contenido de texto y/o
nmeros.

PARMETRO
VALOR
ID Name=
mitxthtml
Orden
12
Presentacin Rtulo-Campo
Tipo
Input Type
Longitud
HTML Editor
Ayuda

Link Help

Rtulo
Conversion
Aspecto

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el
cliente
INPUT
Campo de entrada de datos
TEXTAREA
Tipo Texto con area (rectangular de dos dimensiones)
50,7
Tamao (ancho,alto) que muestra el campo en pantalla
Marcado
Activamos el editor HTML para este campo
<img src="images/hlpbtn.gif" Hemos asignado una imagen utilizando etiquetas HTML,
border="0" hspace="4"
esta imagen esta en nuestra carpeta IMAGES bajo la ruta
alt="HELP/AYUDA"/>
de la pgina web, sin borde visible
http://www.mbc3c.com/
Direccin web a la que remitimos para visualizar la ayuda
manual/
esquema_general_mbc3c.
htm
Introduce un texto
Texto a mostrar para indicar que debe ser escrito en el
campo
A TEXTO
Es un dato opcional para convertir el dato antes de grabar
Dos Columnas
Usar en la tabla del formulario varios <TD> para mostrar
Rotulo y Campo

Pueden ser utilizados todos los campos de aspecto como Formato, Rtulo Cell Style, etc...
Los campos de accin nos pueden servir para escribir pequeas funciones que ajusten el texto, lo
conviertan en maysculas, o bien para procesar verificaciones sobre el valor cargado.
En este caso la personalizacin de estilos para el campo no operan ya que dependen de la
personalizacin que disponga el Editor HTML.

2010 Juan Menndez Crespo

Definicin de campos

8.5.6

55

Campo de fecha

Es el tipo de campo ms usado y verstil, permite la carga de cualquier contenido de texto y/o
nmeros.
PARMETRO
VALOR
ID Name=
mitxt
Orden
12
Presentacin Rtulo-Campo
Tipo
Input Type
Longitud
Mxima Lng
Calendario
Ayuda

Link Help

Rtulo
Conversion
Aspecto

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el
cliente
INPUT
Campo de entrada de datos
TEXT
Tipo Texto
10
Tamao (ancho) que muestra el campo en pantalla (dd/
mm/yyyy)
10
Mximo de caracteres que se admiten en el campo
Marcado
Activamos el botn Javascript de Calendario para ayudar a
la carga del dato
<img src="images/hlpbtn.gif" Hemos asignado una imagen utilizando etiquetas HTML,
border="0" hspace="4"
esta imagen esta en nuestra carpeta IMAGES bajo la ruta
alt="HELP/AYUDA"/>
de la pgina web, sin borde visible
http://www.mbc3c.com/
Direccin web a la que remitimos para visualizar la ayuda
manual/
esquema_general_mbc3c.
htm
Seleccione Fecha
Texto a mostrar para indicar que debe ser escrito en el
campo
A FECHA
Es un dato opcional para convertir el dato antes de grabar
Dos Columnas
Usar en la tabla del formulario varios <TD> para mostrar
Rotulo y Campo

Pueden ser utilizados todos los campos de aspecto como Formato (en este caso dd/mm/yyyy), Rtulo
Cell Style, etc...
Los campos de accin nos pueden servir para escribir pequeas funciones que ajusten el texto, lo
conviertan en maysculas, o bien para procesar verificaciones sobre el valor cargado.

8.5.7

Campo de CheckBox o verificacin


Es el campo tipo donde solo esperamos un SI o NO a la pregunta o bien a la accin del cliente

PARMETRO
VALOR
ID Name=
cb1
Orden
40
2010 Juan Menndez Crespo

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden

56

MBC - Forms

PARMETRO
VALOR
Presentacin RtuloCampo
Tipo
INPUT
Input Type= CHECKBOX
Valor por
False
defecto
Rtulo
Quiere
Factura?
Conversin
A
BOOLEANO
Aspecto
Dos
Columnas

DESCRIPCIN
Izquierda el rtulo, derecha el campo de texto para el cliente
Campo de entrada de datos
Marca de verificacin (cuadrado blanco marcable)
Al ser un elemento booleano podremos asignar TRUE o FALSE (1 o 0)
para establecerlo como marcado o no
Texto a mostrar para indicar que debe ser escrito en el campo
Es un dato opcional para convertir el dato antes de grabar
Usar en la tabla del formulario varios <TD> para mostrar Rotulo y Campo

Un ejemplo habitual de uso para este campo es preguntar: Desea los mismos datos de Factura que de
Cliente S/N
Se fija una accin (Ajax Accin) a este campo como: onClick='copyFields();'
En el Javascript del formulario habramos creado nuestra funcin
funcin de copiado de campos
function copyFields() {
if(self.document.miform.cb1.checked==true) {
self.document.miform.x_facnif.value=self.document.miform.x_bgnif.value;
self.document.miform.x_facempresa.value=self.document.miform.x_bgempresa.value;
self.document.miform.x_facdireccion.value=self.document.miform.x_bgdireccion.value;
self.document.miform.x_facpoblacion.value=self.document.miform.x_bgpoblacion.value;
self.document.miform.x_facprovincia.value=self.document.miform.x_bgprovincia.value;
self.document.miform.x_facpostal.value=self.document.miform.x_bgpostal.value;
}
}

8.5.8

Campo de Radio o seleccin

PARMETRO VALOR
ID Name
radbtn
Orden
50
Presentacin RtuloCampo
o
Campo
Rtulo
Tipo
INPUT
Input Type
RADIO
Valor por
v1

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el cliente.
Habitualmente utilizar el Campo-Rtulo ya que suele ser ms cmoda la
presentacin por la izquierda del campo de seleccin

Campo de entrada de datos


Crculo de seleccin
Asigne solo a uno de los campos este valor

2010 Juan Menndez Crespo

Definicin de campos

57

PARMETRO VALOR
DESCRIPCIN
defecto
Rtulo
Seleccion Texto a mostrar para indicar que debe ser escrito en el campo
e
Aspecto
Dos
Usar en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
Columnas
Nota
Repita este campo las veces que sean necesarias como opciones para el
cliente, entre las que debe seleccionar una
Cada campo de radio debe disponer de su propio ID Name, pero solo uno de los campos debe disponer
del valor por defecto el cual indicara que campo estar marcado en este grupo de seleccin.
Es importante no fijar el campo longitud ya que este valor configura una forma de presentacin
alternativa (ver Multi-Radio Seleccin)

8.5.9

Campo de Mltiple Radio-seleccin

PARMETRO VALOR
ID Name
radbtn
Orden
50
Presentacin RtuloCampo
o
Campo
Rtulo
Tipo
INPUT
Input Type
RADIO
Valor por
defecto
Longitud
3
Rtulo
Aspecto
Nota

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el cliente.
Habitualmente utilizar el Campo-Rtulo ya que suele ser ms cmoda la
presentacin por la izquierda del campo de seleccin

Campo de entrada de datos


Crculo de seleccin
No asigne ninguno en este caso

Nmero de columnas en las que se presentan los valores mltiples de


seleccin
Seleccion Texto a mostrar para indicar que debe ser escrito en el campo
e
Dos
Usar en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
Columnas
Repita este campo las veces que sean necesarias como opciones para el
cliente, entre las que debe seleccionar una

Cada campo de radio debe disponer de su propio ID Name, pero solo uno de los campos debe disponer
del valor por defecto el cual indicara que campo estar marcado en este grupo de seleccin.
Es importante fijar el campo longitud ya que este valor configura una forma de presentacin alternativa.
Establecido el bloque del campo pasamos a generar las lneas de seleccin dentro de valores del
2010 Juan Menndez Crespo

58

MBC - Forms

campo
PARMETRO
VALOR
Value=
qst1
Texto
Orden

Primera
opcin
10

Selected

DESCRIPCIN
Valor que damos a esta seleccin, cada uno debe disponer de un valor
distinto del resto
Literal que aparece para explicar la opcin que se selecciona
Establezca el orden ascendente en el que deben ser mostrados los
valores
Marque solo una de la lista de valores que ha puesto

8.5.10 Campo desplegable (SELECT)

PARMETRO VALOR
ID Name
despl1
Orden
90
Presentacin RtuloCampo
Tipo
SELECT
Input Type
OPTION
Logitud
Max. Longitud
Valor por
defecto
Rtulo
Aspecto
Ajax Accin

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el cliente
Campo de seleccin sobre una lista de valores
Opciones sucesivas en lista
No asigne valor para disponer del desplegable, si asigna alguno se convierte
en lista de valores
No asigne ninguno ya que el valor del campo est contenido en los valores
disponibles para el campo
No asigne valor alguno, se realiza desde la tabla de VALORES

Escoja
Texto a mostrar para indicar que debe ser escrito en el campo
versin
Dos
Usar en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
Columnas
Es habitual el uso de este campo en el caso de utilizar desplegables
anidados que dependen del valor anterior para mostrar los correspondientes a
la siguiente

Es importante que en los campos de longitud y mxima longitud no se ponga valor alguno, estos son
asignados de forma automtica por el propio desplegable. Si se asigna algn valor crear una lista de
valores en lugar de un desplegable.
Este tipo de campo no permite todas las propiedades que se puedan asignar en la hoja de estilos,
incluso es propio aspecto varia segn sea el navegador que se utilice (Internet Explorer, Opera, FireFox,
Safari, Flock, Netscape, etc...)

2010 Juan Menndez Crespo

Definicin de campos

59

Establecido el bloque del campo pasamos a generar las lneas de seleccin dentro de valores del
campo
PARMETRO
VALOR
Value=
sel1
Texto
Orden

Primera
opcin
10

Selected

DESCRIPCIN
Valor que damos a esta seleccin, cada uno debe disponer de un valor
distinto del resto
Literal que aparece para explicar la opcin que se selecciona
Establezca el orden ascendente en el que deben ser mostrados los
valores
Marque solo una de la lista de valores que ha puesto

8.5.11 Campo desplegable con OptGroup

PARMETRO VALOR
ID Name
despl1
Orden
90
Presentacin RtuloCampo
Tipo
SELECT
Input Type
OPTION
Valor por
defecto
Rtulo
Escoja
versin
Aspecto
Dos
Columnas
Ajax Accin

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el cliente
Campo de seleccin sobre una lista de valores
Opciones sucesivas en lista
No asigne valor alguno, se realiza desde la tabla de VALORES
Texto a mostrar para indicar que debe ser escrito en el campo
Usar en la tabla del formulario varios <TD> para mostrar Rotulo y Campo
Es habitual el uso de este campo en el caso de utilizar desplegables
anidados que dependen del valor anterior para mostrar los correspondientes a
la siguiente

Este tipo de campo no permite todas las propiedades que se puedan asignar en la hoja de estilos,
incluso es propio aspecto varia segn sea el navegador que se utilice (Internet Explorer, Opera, FireFox,
Safari, Flock, Netscape, etc...)
Establecido el bloque del campo pasamos a generar las lneas de seleccin dentro de valores del
campo

2010 Juan Menndez Crespo

60

MBC - Forms

PARMETRO
VALOR
Value=
sel1
Texto
Orden

Primera
opcin
10

Selected

DESCRIPCIN
Valor que damos a esta seleccin, cada uno debe disponer de un valor
distinto del resto
Literal que aparece para explicar la opcin que se selecciona
Establezca el orden ascendente en el que deben ser mostrados los
valores
Marque solo una de la lista de valores que ha puesto

Notas importantes:
- No asigne Value= para establecer el OPTGROUP de una lista de valores (OPTION)
- Establezca en Value= la barra de divisin ( / ) para indicar donde termina el grupo (</OPTGROUP>)

8.5.12 Campo de archivo

Es el tipo de campo es necesario cuando queremos facilitar la seleccin de un archivo del cliente para
subir posteriormente a la base de datos o bien al servidor (Upload File).
PARMETRO
VALOR
ID Name=
mitxt
Orden
12
Presentacin Rtulo-Campo
Tipo
INPUT
Input Type
FILE
Longitud
50
Mxima Lng 80

Rtulo

Seleccione su
archivo

Conversion

Aspecto

Dos Columnas

DESCRIPCIN
Denominacin nica del campo para recuperar el valor
Nmero con el que vamos a fijar el orden
Izquierda el rtulo, derecha el campo de texto para el cliente
Campo de entrada de datos
Tipo Texto
Tamao (ancho) que muestra el campo en pantalla
Mximo de caracteres que se admiten en el campo, solo lo usaremos
cuando disponemos de una limitacin de espacio en el
almacenamiento del texto del archivo, si es un archivo a incrustar en
la base de datos este campo no es necesario.
Texto a mostrar para indicar que debe ser escrito en el campo
Es un dato opcional para convertir el dato antes de grabar, solo lo
usaremos en caso de asignar un texto (como literal del archivo) en
lugar de subir como BLOB el archivo seleccionado
Usar en la tabla del formulario varios <TD> para mostrar Rotulo y
Campo

Pueden ser utilizados todos los campos de aspecto como Formato, Rtulo Cell Style, etc...
Los campos de accin nos pueden servir para escribir pequeas funciones que ajusten el texto, lo
conviertan en maysculas, o bien para procesar verificaciones sobre el valor cargado, en ocasiones se
utiliza para mostrar una versin Thumbnail de la imagen que subiremos.
Nota: este campo no es utilizable en formularios continuos salvo almacenamiento del nombre del
archivo.

2010 Juan Menndez Crespo

Definicin de campos

61

8.5.13 Campo de agrupamiento FieldSet

Agrupa varios campos con una lnea rectangular, para mejorar su visualizacin en pantalla
PARMETRO VALOR
DESCRIPCIN
ID Name=
fldset
Denominacin nica del campo para recuperar el valor
AccessKey F
Normalmente este valor puede y se recomienda asignar a cualquier campo
para facilitar su acceso por teclado
Orden
25
Nmero con el que vamos a fijar el orden
Presentacin RtuloUtilice siempre este formato de presentacin
Campo
Tipo
FIELDSET Cuadro de grupo en presentacin
Input Type= LEGEND Literal en el cuadro, no seleccione nada si no desea ver ese texto
Longitud
4
Nmero de campos que se agrupan bajo el FieldSet
Rtulo
MI
Literal que se fija como leyenda (LEGEND) en el borde del cuadro
GRUPO
Es muy habitual establecer estilos para este tipo de elemento (especialmente espaciado interno o
Padding).
Para fijar estilos al Fieldset debe utilizar los correspondientes al Campo, en el caso de Legend sern los
correspondientes al Rtulo.

8.5.14 Ayuda con JavaScript en celda de rtulo


Una versin alternativa en ayuda puede ser el uso de JavaScript en los eventos del ratn sobre la celda
(o cualquier otro elemento):
onMouseover="ddrivetip('Texto de ayuda dinamico con CSS y Jvs', 300)" onMouseout="hideddrivetip()"
href="#"
En este caso hemos integrado algunos Javascript de DynamicDrive sobre nuestro formulario para
agregar una funcionalidad de ayuda en el evento MouseOver de la casilla del rtulo
Para ello aprovechamos las libreras que se cargan en el HEAD de la web:
<script type="text/javascript" src="jvs/ayuda.js"></script>

8.5.15 Personalizar el rtulo


La personalizacin del rtulo afecta a la zona donde se fije este en el formulario, si en Presentacin
selecciona Rtulo-Campo este corresponde a la izquierda, y al contrario en Campo-Rtulo.
La personalizacin es individual en el caso de Aspecto = Dos Columnas, ya que si fueran en 1 columna
2010 Juan Menndez Crespo

62

MBC - Forms

(en lnea o doble lnea) la personalizacin de rtulo para los valores CELL afecta tambin a los mismos
del Campo.
PARMETRO
VALOR
Rtulo Cell
Action
Rtulo Cell
background-color:
Style=
#0000FF;color:
#FFFFFF;
Rtulo Cell
miclasecelda
Class=
Rtulo Style= text-align:right;
Rtulo Class= miclaserotulo

DESCRIPCIN
Accin o evento ligado a la celda
Utilice cualquiera de los comandos CSS 2 para definir el estilo
(ver CSS)
Debe estar definida en la hoja CSS que se utilice en la web
como .miclasecelda
Utilice cualquiera de los comandos CSS 2 para definir el estilo
(ver CSS)
Debe estar definida en la hoja CSS que se utilice en la web
como .miclaserotulo

8.5.16 Personalizar el campo


La personalizacin del rtulo afecta a la zona donde se fije este en el formulario, si en Presentacin
selecciona Rtulo-Campo este corresponde a la izquierda, y al contrario en Campo-Rtulo.
La personalizacin es individual en el caso de Aspecto = Dos Columnas, ya que si fueran en 1 columna
(en lnea o doble lnea) la personalizacin de rtulo para los valores CELL afecta tambin a los mismos
del Campo.
PARMETRO
VALOR
Campo Cell
Action
Campo Cell
background-color:
Style=
#0000FF;color:
#FFFFFF;
Campo Cell
miclasecelda
Class=
Campo Style= text-align:right;
Campo Class= miclaserotulo

DESCRIPCIN
Accin o evento ligado a la celda
Utilice cualquiera de los comandos CSS 2 para definir el estilo
(ver CSS)
Debe estar definida en la hoja CSS que se utilice en la web
como .miclasecelda
Utilice cualquiera de los comandos CSS 2 para definir el estilo
(ver CSS)
Debe estar definida en la hoja CSS que se utilice en la web
como .miclaserotulo

8.5.17 Campo CAPTCHA (verificacin humana)


Los campos de CAPTCHA tienen como principal funcin la validacin de que ha sido un humano
leyendo una imagen distorsionada quin procesa su contenido y escribe las letras que se encuentran
dentro.
La librera CAPTCHA que se incluye construye una imagen que contiene letras y/o nmeros
hexadecimales (del 0 al 9 y de la A a la F), la presentacin es nica, siendo personalizable el aspecto
del campo de carga y la celda del campo.
Siempre se muestra en la celda asociada al campo y se recomienda el uso de un rtulo para indicar
que debe realizarse con esa imagen.

2010 Juan Menndez Crespo

Definicin de campos

63

Las acciones y validacin se encuentran incluidas dentro del propio mdulo de MBC-Forms por lo que
no es necesario activar accin alguna por parte del usuario.

8.5.18 Verificacin humana


Otro mtodo tambin bastante extendido para evitar formularios rellenos por robots es la introduccin de
un texto con una respuesta simple como:
Capital de Inglaterra >> londres
Escriba la respuesta a esta pregunta 2 mas 3 >> 5
Para ello utilizaremos un campo de texto normal, marcaremos el campo como obligatorio y usaremos
una validacin en Javascript con eventos como OnBlur o OnChange para verificar que el valor cargado es
idntico al que nosotros indicamos
Otras opciones simples de validacin de usuario humano es la carga de una imagen creada
manualmente e insertada en el formulario, esa imagen llevar cargado un texto sencillo (dos a 6 letras
y/o nmeros) y pediremos que se escriba el valor ledo. En ocasiones se usa una simple operacin
aritmtica en formato grfico para validar esto mismo.
La verificacin humana hoy en da se hace muy necesaria para evitar posibles ataques a su base de
datos, no obstante el propio sistema de MBC-Forms incorpora ciertos mecanismos de defensa contra
Java Maligno incrustado en los campos.

8.5.19 Doble campo de verificacin de dato


Consiste en un campo de texto introducido dos veces que utilizar una funcin Javascript para validar
que el contenido es el mismo.
Suele ser habitual para validar contraseas del cliente o bien correos electrnicos.
Su uso es simple, en el segundo campo de entrada (el de verificacin) utilice una accin OnBlur y
compare las cadenas de ambos campos.
Ejemplo de cdigo Javascript de validacin de campos iguales:
Form NameDOM => MiForm
NameDom => CampoPwd1 (campo de carga de un password)
NameDOM => CampoVerifyPwd1 (campo de verificacin que son idnticos)
Ajax Accin => OnClick= comprobarClave()
<script>
Function comprobarClave(){
clave1 = document. MiForm. CampoPwd1.value
clave2 = document. MiForm. CampoVerifyPwd1.value
If (clave1 == clave2)
alert("Las dos claves son iguales...\nRealizaramos las acciones del caso positivo")
Else
alert("Las dos claves son distintas...\nRealizaramos las acciones del caso negativo")
}
</script>

Veamos un cdigo Javascript similar que realiza acciones sobre dos campos pwd1 y pwd2 del
2010 Juan Menndez Crespo

64

MBC - Forms

formulario prueba
<script>
function FldRepeat() {
var pw1 = document.prueba.pwd1.value;
var pw2 = document.prueba.pwd2.value;
if (pw1 != pw2) {
self.document.prueba.pwd2.value='';
alert('Los campos no coinciden');
return false;
}
}
</script>

En este caso realizamos un borrado del dato que no corresponde (pwd2) y a continuacin damos el
aviso del error.

8.5.20 Campo de imagen


Los campos de imagen se consideran botones de envo Submit sobre el formulario pero utilzando una
imagen como acceso directo.
En este caso la longitud del campo se usar como en TextArea pero referido al ancho y alto de la
imagen en cuestin.
PARMETRO

VALOR

DESCRIPCIN

8.5.21 Campo con imagen simple


Si lo que se desea es realmente solo insertar una imagen seleccione en el Tipo base de entrada
IMAGEN lo que equivale a sustituir:
la etiqueta
<INPUT .../>
por
<IMG .... />
Al variar este inicio de etiqueta el tamao del campo que estaba siendo utilizado para fijar el ancho de la
imagen se convierte en HEIGHT y WIDTH como parmetros del <IMG.../>

8.5.22 Campo utilizando formato de presentacin


PARMETRO VALOR

DESCRIPCIN

2010 Juan Menndez Crespo

Definicin de campos

PARMETRO VALOR

65

DESCRIPCIN

8.5.23 Botones
Sin lugar a dudas este campo siempre es necesario en todo formulario, sea cual sea su naturaleza, una
vez completado necesitaremos realizar una accin.
Existen varias formas de utilizar y gestionar los botones de un formulario, si bien el generador utiliza
siempre una metodologa en el proceso de gestin (que puede ser alterado por usuarios con nivel
avanzado de programacin en Javascript).

Mtodo 1
<input type="button" value="Enviar" Onclick="javascript:docum ent.location.href='<% = URL %>'" />
Mtodo 2
<input type="button" value="subm it" />
Mtodo 3 (borrado de contenido de cam pos)
<input type="button" value"reset" onclick="docum ent.form s[0].reset()" />

8.5.24 Campo con operaciones


Una de las necesidades ms habituales es la escritura automtica de totales en base a cambios en los
campos del formulario, veamos una simple funcin de ejemplo para realizar esto
onchange="checkImpte(this)"
function checkImpte() {
var total1=self.document.miform.campo1.value*50>;
var total2=self.document.miform.campo2.value*10;
self.document.miform.subtot.value = total1+total2;
}

En este ejemplo hemos utilizado la accin Al Cambiar en un campo para realizar una operacin primero
de multiplicar el valor de un campo por 50, otro campo por 10, en ambos casos crear una variable para
mantener el valor y a continuacin sumar ambos y asignarlos al campo de SUBTOT que tenemos
definido

8.5.25 Cambiar el color del campo al foco


Una de las ayudas visuales ms comunes en el uso de formularios es el coloreado de un campo al
establecer el foco sobre el, esto ayuda a saber en donde se encuentra el cursor y que campo se est
solicitando.
Para ello usaremos dos acciones simultneamente: OnFocus (al establecer el foco) y OnBlur (al perder
2010 Juan Menndez Crespo

66

MBC - Forms

el foco)

onfocus="this.style.background=('#ff0000');this.style.color=('#00ff00')" onblur="this.style.backgr

Existe tambin un mtodo alternativo usando CSS con a:focus {...}

8.5.26 Campos encadenados


Es el campo habitual para cuentas de banco separando Banco/Sucursal/DC/Cuenta y algunos otros de
este tipo (fechas DD/MM/AAAA).
Realice 4 campos de texto simple, cada uno de ellos con sus correspondientes rtulos y longitudes.
El primer campo de los encadenados ser el referente para los dems, los otros tres campos asigne en
encadenado el nmero de campo de referencia. Recuerde que el campo de rtulo ser el literal que
precede a cada campo y en este caso sera ms lgico poner un simple - (guin) para separar las
cuentas.

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

IX

68

MBC - Forms

CSS en MBC-Forms
Estas son algunas de las clusulas CSS ms habitualmente utilizadas en la definicin de campos y
formularios.
Adicionalmente puede forzar a cargar una hoja CSS dentro del cdigo del mdulo utilizando una llamada
desde la configuracin
Recomendamos a los usuarios de nivel bajo/medio que se documenten con cualquier libro que describa
de forma general las CSS o bien que consulte la web de W3C
Modelo de cajas en CSS

Margen=Margin Borde=border Relleno=padding Ancho=w idth Alto=height Contenido=espacio al que afectan


los anteriores

CSS

DESCRIPCIN

font-family

tipografa que deseamos utilizar

font-style

estilo asignado a la tipografa (italica por ejemplo = italic)

font-weight

Densidad del texto (negrita por ejemplo = bold)

font-size

Tamao del texto en pixel o em

font

Permite el uso simultneo de los valores anteriores

text-indent

Indentacin del texto

text-align

Alineado del texto

text-transform

Conversin del texto

word-spacing

Espaciado entre palabras

letter-spacing

Espaciado entre letras

color

Color del texto

backgroundcolor

Color del fondo

backgroundimage

Imagen de fondo

backgroundrepeat

Repetir imagen

background-

Posicin de la imagen

2010 Juan Menndez Crespo

CSS en MBC-Forms

CSS

69

DESCRIPCIN

position
background

Permite el uso simultneo de los valores anteriores

padding-left

Espaciado interno por la izquierda

padding-right

Espaciado interno por la derecha

padding-top

Espaciado interno superior

padding-bottom Espaciado interno inferior

9.1

padding

Permite el uso simultneo de los valores anteriores

margin-left

Espaciado externo vaco por la izquierda

margin-right

Espaciado externo vaco por la derecha

margin-top

Espaciado externo vaco por arriba

margin-bottom

Espaciado externo vaco por abajo

margin

Permite el uso simultneo de los valores anteriores

border-color

Color del borde

border-style

Estilo del borde

border-width

Grosor del borde

border-left

Borde izquierdo

border-right

Borde derecho

border-top

Borde superior

border-bottom

Borde inferior

border

Permite el uso simultneo de los valores anteriores

#RRGGBB

Notacin RGB de 6 valores hexadecimales (habitualmente la notacin utilizada)

#RGB

Notacin simplificada de RRGGBB siempre que los nmeros de cada sean iguales
CCFFAA=CFA

rgb(R,G,B)

Notacin de tres colores de valores 0 a 255

rgb (R%,G%,B
%)

Notacin de tres colores de valores porcentuales

cursor

Especifica el curso sobre el elemento [ [http://.../cursor.ico,]* [ auto |


crosshair | default | pointer | move | e-resize | ne-resize | nw-resize
| n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait |
help | progress ] ]

Ejemplos de CSS para personalizacin


A continuacin estos son los ejemplos y preguntas ms habituales de personalizacin tanto en rtulos
como en campos.
Hemos puesto el ejemplo grfico usando un formulario de color blanco de fondo y como color a
personalizar el Rojo 100% (#FF0000;) con el fin de facilitar la visualizacin de los cambios.
Cambiar el fondo de un rtulo completo
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Rtulo Cell Style
Escriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner
Cambiar el fondo del texto de un rtulo
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Rtulo Style
Escriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner

2010 Juan Menndez Crespo

70

MBC - Forms

Cambiar el fondo de un campo (area de trabajo)


Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style
Escriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner
Cambiar el fondo del area de un campo (zona de carga de datos)
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style
Escriba: background-color:#FF0000; donde "#FF0000;" equivale al color que desea poner
Cambiar el tamao del texto
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style
Escriba: text-size=14px; donde "24px" equivale al tamao en pixel de la fuente a cambiar
Alinear el rtulo a la izquierda
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Rtulo Cell Style
Escriba: text-align:left; donde "left" equivale a la posicin del texto, puede utilizar left-centerright entre otras opciones
Alinear arriba un rtulo
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Rtulo Cell Style
Escriba: vertical-align:top; donde "top" equivale ala posicin del elemento en el area, puede
utilizar top-middle-bottom entre otras opciones
Alinear arriba y a la derecha un rtulo
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style
Escriba: text-align:right;vertical-align:top; donde "right y top" asignan la posicin del
elemento
Centrar completamente un rtulo
Seleccione el campo que desea modificar, pulse Editar y vaya al campo Campo Cell Style
Escriba: text-align:center;vertical-align:middle; donde "center y middle" asignan la
posicin del elemento horizontal y vertical repectivamente
Cambiar el color del texto de un rtulo

Cambiar el color del texto de un campo

Cambiar el color del texto de un campo y el color del fondo del mismo

Alinear el contenido de un campo al centro

Alinear el contenido de un campo a la derecha

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

72

10

MBC - Forms

Eventos de un formulario
La nomenclatura de exploradores es : FF - FireFox, N - Netscape y IE - Internet Explorer, en el caso de
Opera, Safari, Flock, Google Chrome, etc... se supone que al menos manejan los eventos de FireFox.
EVENTO

CUANDO OCURRE

FF

IE

onabort

Cargando una imagen es interrumpido

onblur

Al perder el foco (relacionado con OnFocus)

onchange

El usuario cambia el contenido de un campo

onclick

El ratn hace click sobre el objeto

ondblclick

El ratn hace doble click sobre el objeto

onerror

Un error se ha producido al cargar un documento o una imagen

onfocus

Un elemento toma el foco (relacionado con OnBlur)

onkeydown

Una tecla es presionada

onkeypress

Una tecla es presionada o esta presionada

onkeyup

Una tecla se ha soltado

onload

Una pgina o imagen se ha finalizado su carga

onmousedown

Un botn del ratn se ha presionado

onmousemove

El ratn se ha movido

onmouseout

El ratn se ha movido fuera de un elemento

onmouseover

El ratn se mueve sobre un elemento

onmouseup

El botn del ratn se ha soltado

onreset

El botn de reset se ha presionado

onresize

Una ventana o frame se ha variado su tamao

onselect

Se ha seleccionado una parte de texto

onsubmit

Se ha solicitado el envo o presionado un botn de envo

onunload

El usuario sale o descarga la pgina

Manejar de forma correcta los eventos le permitir controlar por completo las acciones de los usuarios
sobre sus formularios.

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XI

74

11

MBC - Forms

Javascript en MBC-Forms
Recuerde que no es necesaria la insercin de las etiquetas <SCRIPT...></SCRIPT> para el
cdigo javascript del formulario
Funcin de validacin de campos que se construye al activar un campo como obligatorio
function ValidaForm(EW_this) {
if (EW_this.texto1 && !EW_hasValue(EW_this.texto1, "TEXT" )) {
if (!EW_onError(EW_this, EW_this.texto1, "TEXT", "Campo necesario/obligatorio sin rellenar")
return false;
}
if (EW_this.dt1 && !EW_hasValue(EW_this.dt1, "TEXT" )) {
if (!EW_onError(EW_this, EW_this.dt1, "TEXT", "Campo necesario/obligatorio sin rellenar"))
return false;
}
if (EW_this.desple1 && !EW_hasValue(EW_this.desple1, "SELECT" )) {
if (!EW_onError(EW_this, EW_this.desple1, "SELECT", "Campo necesario/obligatorio sin rellena
return false;
}
if (EW_this.desple2 && !EW_hasValue(EW_this.desple2, "SELECT" )) {
if (!EW_onError(EW_this, EW_this.desple2, "SELECT", "Campo necesario/obligatorio sin rellena
return false;
}
return true;
}

Comprobacin de un campo si dispone valor


function EW_hasValue(obj, obj_type) {
if (obj_type == "TEXT" || obj_type == "PASSWORD" || obj_type == "TEXTAREA" || obj_type == "F
if (obj.value.length == 0)
return false;
else
return true;
}
else if (obj_type == "SELECT") {
if (obj.type != "select-multiple" && obj.selectedIndex == 0)
return false;
else if (obj.type == "select-multiple" && obj.selectedIndex == -1)
return false;
else
return true;
}
else if (obj_type == "RADIO" || obj_type == "CHECKBOX")
{
if (obj[0]) {
for (i=0; i < obj.length; i++) {
if (obj[i].checked)
return true;
}
} else {
return (obj.checked);
}
return false;
}
}

2010 Juan Menndez Crespo

Javascript en MBC-Forms

75

Gestin de errores de validacin de campo


function EW_onError(form_object, input_object, object_type, error_message) {
alert(error_message);
if (object_type == "RADIO" || object_type == "CHECKBOX") {
if (input_object[0])
input_object[0].focus();
else
input_object.focus();
}
else if (!EW_isHiddenTextArea(input_object, object_type)) {
input_object.focus();
}
if (object_type == "TEXT" || object_type == "PASSWORD" || object_type == "TEXTAREA" || objec
if (!EW_isHiddenTextArea(input_object, object_type))
input_object.select();
}
return false;
}

Funciones bsicas de gestin del Editor HTML


// DHTML editor
function ew_DHTMLEditor(name, f) {
this.name = name;
this.create = (f) ? f : function() { this.active = true; };
this.editor = null;
this.active = false;
}
// Create DHTML editor
function ew_CreateEditor(name) {
if (typeof ew_DHTMLEditors == 'undefined')
return;
for (var i = 0; i < ew_DHTMLEditors.length; i++) {
var ed = ew_DHTMLEditors[i];
var cr = !ed.active;
if (name) cr = cr && ed.name == name;
if (cr) {
if (typeof ed.create == 'function')
ed.create();
if (name)
break;
}
}
}
</script>
<script type="text/javascript" src="bdforms/fckeditor/fckeditor.js"></script>
<script type="text/javascript">
<!-_width_multiplier = 16;
_height_multiplier = 60;
var ew_DHTMLEditors = [];
// update value from editor to textarea
function ew_UpdateTextArea() {
if (typeof ew_DHTMLEditors != 'undefined' && typeof FCKeditorAPI != 'undefined') {

2010 Juan Menndez Crespo

76

MBC - Forms

var inst;
for (inst in FCKeditorAPI.__Instances)
FCKeditorAPI.__Instances[inst].UpdateLinkedField();
}
}
// update value from textarea to editor
function ew_UpdateDHTMLEditor(name) {
if (typeof ew_DHTMLEditors != 'undefined' && typeof FCKeditorAPI != 'undefined') {
var inst = FCKeditorAPI.GetInstance(name);
if (inst)
inst.SetHTML(inst.LinkedField.value)
}
}
// focus editor
function ew_FocusDHTMLEditor(name) {
if (typeof ew_DHTMLEditors != 'undefined' && typeof FCKeditorAPI != 'undefined') {
var inst = FCKeditorAPI.GetInstance(name);
if (inst && inst.EditorWindow) {
inst.EditorWindow.focus();
}
}
}

Activacin y creacin del DHTML-Editor en el formulario


ew_CreateEditor();

Activacin de DHTML-Editor en campo TextArea


var editor = New ew_DHTMLEditor("txtac1");
editor.create = Function() {
var sBasePath = 'bdforms/fckeditor/';
var oFCKeditor = New FCKeditor('txtac1', 40*_width_multiplier, 5*_height_multiplier);
oFCKeditor.BasePath = sBasePath;
oFCKeditor.ReplaceTextarea();
this.active = True;
}
ew_DHTMLEditors[ew_DHTMLEditors.length] = editor;

Cdigo para disponer de el Calendario Javascript


<link rel="stylesheet" Type="text/css" media="all" href="bdforms/calendar/calendar-win2k-1.css"
<script Type="text/javascript" src="bdforms/calendar/lang/calendar-es.js"></script>
<script Type="text/javascript" src="bdforms/calendar/calendar-setup.js"></script>

Cdigo para activar en el campo el botn del calendario


Calendar.setup(
{
inputField : "dt1", // ID of the Input field
ifFormat : "%d/%m/%Y", // the Date format
button : "cx_dt1" // ID of the button

2010 Juan Menndez Crespo

Javascript en MBC-Forms

77

}
);

Validacin de claves con tamao, verificacin y caracteres


function validatePwd() {
var invalid = " "; // Invalid character is a space
var minLength = 6; // Minimum length
var pw1 = document.myForm.password.value;
var pw2 = document.myForm.password2.value;
// check for a value in both fields.
if (pw1 == '' || pw2 == '') {
alert('Please enter your password twice.');
return false;
}
// check for minimum length
if (document.myForm.password.value.length < minLength) {
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}
// check for spaces
if (document.myForm.password.value.indexOf(invalid) > -1) {
alert("Sorry, spaces are not allowed.");
return false;
}
else {
if (pw1 != pw2) {
alert ("You did not enter the same new password twice. Please re-enter your password.");
return false;
}
else {
alert('Nice job.');
return true;
}
}
}

Validar si el campo es e-mail


En el campo insertamos en Ajax acciones: onblur="ValidarMail(this)"
En el formulario agregamos este javascript:
function echeck(str) {
var at="@"
var dot="."
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert("E-mail No Valido")
return false
}
if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert("E-mail No Valido")
return false
}
if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert("E-mail No Valido")
return false
2010 Juan Menndez Crespo

78

MBC - Forms

}
if (str.indexOf(at,(lat+1))!=-1){
alert("E-mail No Valido")
return false
}
if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert("E-mail No Valido")
return false
}
if (str.indexOf(dot,(lat+2))==-1){
alert("E-mail No Valido")
return false
}
if (str.indexOf(" ")!=-1){
alert("E-mail No Valido")
return false
}
return true
}
function ValidarMail(varmail){
var emailID=varmail
//document.reservas.txtEmail
if ((emailID.value==null)||(emailID.value=="")){
alert("Por favor entre un email valido")
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=""
emailID.focus()
return false
}
return true
}

Desactivar la tecla ENTER de un campo


En el campo donde deseamos que no opere la tecla ENTER (chr=13) incorporamos este literal en
Acciones
onkeypress="javascript:if(event.keyCode==13){return false;}"

Podemos reutilizar la misma funcin para asignar un tabulado (TAB chr=8) para cambiar al siguiente
campo como alternativa al ENTER
onkeypress="javascript:if(event.keyCode==13){return (Escribir aqui la secuencia que se envia);}

Acciones sobre un campo SELECT


En ocasiones disponemos de campos SELECT que deben refrescar la pantalla con los datos de la
seleccin
Incorporamos en el formulario un cdigo que usaremos como funcin
function CargarUrlBxtm(param) {
document.location = 'index.asp?bxtm=' + param;
}
function CargarUrlBxsr(param) {
document.location = 'index.asp?bxsr=' + param;
}

2010 Juan Menndez Crespo

Javascript en MBC-Forms

79

En el campo insertamos la funcin con el evento OnChange


onchange="CargarUrlBxtm(this.value)"

Funcin para eliminar ENTER reutilizable


Insertamos en el formulario este cdigo que luego vamos a incorporar como funcin en el evento del
campo que necesitemos
function blockEnter()
{
if (event.keyCode==13)
return false;
}

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XII

Ajax en MBC-Forms

12

81

Ajax en MBC-Forms
Se ha creado una funcin simple de peticin Ajax a la URL que desee el cliente
function AjaxGet(esto,URL,destino)
{
var ajax = new ajaxFunction();
ajax.onreadystatechange=function()
{
if(ajax.readyState==4)
{
document.getElementById(destino).innerHTML=ajax.responseText;
//esto.focus();
}
}
ajax.open("GET",URL+"?campo="+esto.name+"&valor="+esto.value,true);
ajax.send(null);
}

Para utilizar la funcin Javascript indicada simplemente aada al campo que desea utilizar un evento
con la funcin
Ejemplo:
OnBlur="AjaxGet (this,'ruta/miprograma.asp','ajax_micampo')"
En este ejemplo hemos puesto el evento Blur (al salir/modificar) y dnde miprograma.asp ser el
programa generado y subido al servidor por usted (con la ruta relativa a la web donde se ejecuta MBCForms) y que retorna el texto que ser insertado tras la peticin, ajax_micampo equivale al nombre del
area DIV que est predefinido para el campo.
Recuerde que cada campo dispone de un area <DIV..></DIV> con el prefijo 'ajax_' en la ID= y ser el
sitio donde retorne el cdigo pedido.

12.1

Validar complejidad de un password


Entre los mdulos ASP que se incluyen en MBC-SQL existe uno que se denomina pwdcomplex.asp,
este programa evalua la complejidad de una cadena de caracteres para su uso como password.
Por ejemplo: 1234 ser menos compleja que Ab1234 y an se podra mejorar si usamos caracteres
como $ ( ! / ) etc... Esta funcin retorna un texto indicando el nivel de complejidad de esta clave.
En un campo que hemos definido como ID Name = pwd1 metemos en Ajax accin = onkeyup="AjaxGet
(this,'asp/pwdcomplex.asp','ajax_pwd1')"
El resultado es que este campo escribe su nivel de complejidad avisando al usuario sobre la posibilidad
de mejorar.

12.2

Verificar existencia de un usuario

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XIII

Integracin con MBC-SQL

13

83

Integracin con MBC-SQL


Mdulo-Patrn: bdForms
Parmetros del contenedor:
idform : nmero de formulario que se visualizar
pag : paginacin
tblborder : ancho del borde de las celdas
tblspacing : espaciado entre celdas de las tablas
tblpadding : espaciado interior de las tablas
usestyle : activa el uso de estilos heredados del contenedor de MBC

13.1

Recomendaciones de integracin
Son necesarios los siguientes archivos:
ARCHIVO
bdforms.asp

RUTA DESDE ROOT-WEB


/sql/include

bdforms (carpeta)

/sql/bdforms

DESCRIPCIN
Al estar en esta carpeta ser usado desde la
carpeta /sql por el bloque index.asp
Debe estar incluido en el maininclude.asp de
MBC
Patrn principal incluye procedimiento y
funciones necesarias. Incluye la cadena de
conexin a /bdforms
Mantenimiento integral de la gestin de archivos

El archivo /sql/include/maininclude.asp debe contener estas lneas para poder admitir la llamada:
<!--#include file="bdforms.asp"--> <% 'modulo de generacin de formularios %>
Case "bdforms" 'llamada al generador de formularios
Call bdforms(parametros, estilorotulo, estilopie, ancho, estilo)

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XIV

Datos para desarrolladores

14

85

Datos para desarrolladores


La informacin que a continuacin se describe solo sirve para usuarios de nivel medio/avanzado, es
necesario conocimientos de HTML / DHTML, Javascript, CSS y ASP, para poder interpretar de forma
adecuada.
Si tiene alguna duda, sugerencia o consulta, utilice el foro www.mastercafe.com/forum para generar su
propio hilo y que otros usuarios puedan disponer tambin de esa informacin.
Descripcin de como crear el texto para el Mail Msg (en desarrollo)
Como utilizar Class y Style simultneamente (en desarrollo)
Creacin de programas ASP externos que se utilizan con Ajax (en desarrollo)

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XV

Utiles

15

87

Utiles
A continuacin describimos algunas utilidades que se han incorporado a MBC-Forms y que pueden ser
personalizadas por el usuario de nivel medio/avanzado.
Recomendamos visitar la web de los creadores para obtener ms detalles en su personalizacin y
parametrizacin.

15.1

Calendario

Es un elemento emergente que nos ayuda a seleccionar de un calendario la fecha que deseamos poner,
estableciendo el valor automticamente en el campo.
Dispone de botones de avance y retroceso de ao, mes y da.

15.2

Filtro XSS
Es una funcin que se ha incorporado para ser utilizada por el cliente de forma intencionada con el fin
de aportar seguridad en los contenidos de los campos de texto (especialmente textArea).
Estos son los trminos a los que afecta el filtro XSS
"javascript", "vbscript", "expression", "<applet", "<meta", "<xml", "<blink", "<link", "<style", "<script",
"<embed", "<object", "<iframe", "<frame", "<frameset", "<ilayer", "<layer", "<bgsound", "<title",
"<base", "onabort", "onactivate", "onafterprint", "onafterupdate", "onbeforeactivate", "onbeforecopy",
"onbeforecut", "onbeforedeactivate", "onbeforeeditfocus", "onbeforepaste", "onbeforeprint",
"onbeforeunload", "onbeforeupdate", "onblur", "onbounce", "oncellchange", "onchange", "onclick",
"oncontextmenu", "oncontrolselect", "oncopy", "oncut", "ondataavailable", "ondatasetchanged",
"ondatasetcomplete", "ondblclick", "ondeactivate", "ondrag", "ondragend", "ondragenter", "ondragleave",
"ondragover", "ondragstart", "ondrop", "onerror", "onerrorupdate", "onfilterchange", "onfinish", "onfocus",
"onfocusin", "onfocusout", "onhelp", "onkeydown", "onkeypress", "onkeyup", "onlayoutcomplete",
"onload", "onlosecapture", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove",
"onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onmove", "onmoveend", "onmovestart",
"onpaste", "onpropertychange", "onreadystatechange", "onreset", "onresize", "onresizeend",
"onresizestart", "onrowenter", "onrowexit", "onrowsdelete", "onrowsinserted", "onscroll", "onselect",
"onselectionchange", "onselectstart", "onstart", "onstop", "onsubmit", "onunload"
Cual es el efecto que se produce en el texto que es cargado tras el filtro XSS:
Antes: <script type="text/javascript">

2010 Juan Menndez Crespo

88

MBC - Forms

Despus: <s<x>cript type="text/ja<x>vascript">

15.3

RTE Editor texto


Gua de referencia rpida de los botones disponibles en la barra de herramientas del Editor de Texto Enriquecido.
Funciones comunes de la barra de herramientas
Elemento (botn)

Funcin
Ver o editar el documento en codigo fuente HTML (para usuarios avanzados.
Quitar todos los contenidos creando as una pgina en blanco.
Guarda la pgina que se est editando.
Previsualizar como quedara el HTML visto por los usuarios.
Seleccionar una plantilla creada.
Cortar el texto seleccionado al clipboard.
Copiar el texto seleccionado al clipboard.
Pegar los datos copiados al clipboard (con o sin formato).
Pegar contenido copiado desde Microsoft Word o aplicaciones similares.
Imprimir el actual documento.
Chequear con el corrector ortogrfico el documento (usa correctores externos).
Deshacer o rehacer la ultima accin realizada.
Buscar una palabra o frase dentro de un documento.
Buscar y reemplazar una palabra o frase en un documento.
Seleccionar todo el texto en el documento.
Quitar el formato en el texto seleccionado.
Aplicar remarcado, itlica, subrayado o tachado al texto seleccionado.
Subndice y suprandice para el texto seleccionado.
Crear numeracin o marcas de lista.
Incrementa o decrementa la indentacin.

2010 Juan Menndez Crespo

Utiles

89

Formatea un bloque de texto para identicar entre comillas (textos provenientes de otras
fuentes).
Establece el alineado del texto (izquierda, centrado, derecha o justificado).
Crear/editar o eliminar del texto los hipervnculos. Tambin puede ser usado para manejar las
subidas de archivos y los vnculos con el servidor). (ver documentacin ampliada)
Inserta o modifica un link tipo ancla.
Insertar imgenes en el documento. (ver documentacin ampliada)
Insertar elementos de Adobe Flash en la pgina.
Crear una tabla con un nmero definido de columnas y filas (ver documentacin ampliada)
Insertar una lnea divisora horizontal.
Insertar emoticones como imagen (smiley faces, email icon, lightbulb, etc.).
Insertar smbolos y caracteres especiales (acentuados, marca, monedas, etc.).
Insertar un cambio de pgina para impresoras (solamente en las versiones de impacto).

Estilos y formatos que determinan la apariencia y el valor semntico del documento. Usted
deber desplegar el campo y seleccionar un elemento para aplicar estilos, fuentes,
configuracin de la fuente, tamaos, etc. Para quitar estilos y/o formatos seleccione el mismo
estilo de nuevo.

Cambia el color del texto en la zona seleccionada.


Cambia el color del fondo en la zona seleccionada.
Maximiza el tamao del editor dentro del navegador.
Muestra los lmites de los elementos de bloques en el texto.
Acerca de FCKeditor (acceso a la web en ingls).

Funciones de formularios
Barra de
Elementos

Funcin
Crear un nuevo bloque de formulario en la pgina.
Insertar un checkbox (marca de verificacin) en la pgina.
Insertar un botn radio en la pgina.

2010 Juan Menndez Crespo

90

MBC - Forms

Insertar un campo de texto en la pgina.


Inserta una caja de texto multilineas en la pgina.
Insertar un campo de seleccin en la pgina.
Insertar un botn de formulario en la pgina.
Insertar como una imagen como botn para enviar los datos del formulario. No use este elemento para
insertar imgenes en el documento.
Insertar un campo oculto en la pgina.
Recopilado de "http://docs.fckeditor.net/FCKeditor_2.x/Users_Guide/Quick_Reference"

15.3.1 Insertar Imgenes


Al insertar una nueva imagen obtenemos este formulario emergente para establecer los datos bsicos
necesarios

En la solapa de Image Info (Informacin de la imagen) disponemos de los siguientes valores


Campo
URL
Browse / Buscar
Alternative text
Width / Ancho

Descripcin
Direccin donde se encuentra la imagen respecto del documento raiz
Botn de acceso al navegador/buscador de imgenes
texto alternativo que se muestra al estar el ratn sobre la imagen
Ancho en pixel (puede asignarse automticamente)

2010 Juan Menndez Crespo

Utiles

Height / Alto
Border / Borde
HSpace / Espacio Hor.
Vspace / Espacio Vert.
Align / Alinear

91

Alto en pixel (puede asignarse automticamente)


Border de la imagen en pixel
Espaciado horizontal respecto de otros elementos en pixel
Espaciado vertical respecto de otros elementos en pixel
Alineacin de la imagen respecto del resto de contenido externo

Una segunda solapa nos ayuda a definir posibles links (vnculos) con otros elementos de la web o
externos

El campo URL establece el destino referido al link (src en trminos HTML)


El campo Target (destino) define que accin debe realizar el navegador al usar el link (_self , _blank,
_parent) estas acciones van descritas en el propio desplegable.
La tercera solapa nos ayuda a subir directamente imgenes al servidor, si bien estas no quedarn
registradas en la tabla Imgenes (que se usa como referencia de la libreria), su utilidad reside en facilitar
el mantenimiento y carga ocasional de algunos elementos grficos.
Pulse sobre el botn de Seleccionar para buscar el archivo a buscar y posteriormente subir al servidor.
Una vez seleccionado pulse sobre el botn Enviar al servidor (send it...) para subirlo a su espacio web.
Tenga en cuenta que el tiempo de subida siempre depender del tamao del archivo que se sube y de la
disponibilidad de caudal de red que tenga su equipo.

2010 Juan Menndez Crespo

92

MBC - Forms

La cuarta solapa es la avanzada su uso suele estar orientado a usuarios con ciertos niveles de
programacin ya que permite usar lenguaje CSS.

2010 Juan Menndez Crespo

Utiles

93

Los campos de imagen avanzada son:


Id para establecer un identificador nico en el DOM
Direccin de lenguaje
Cdigo de lenguaje
Descripcin larga de la URL
Clase definida para el objeto, es necesario que ya est creada en las CSS genricas de la web o bien
en la personalizacin de CSS de la configuracin web.
Titulo de aviso
Estilos personalizados, internamente agrega un style="estilos usuario"

15.3.2 Insertar Links


Existen tres tipos de Links o vnculos: URL, Ancla y e-Mail
A continuacin describimos el genrico URL y en los apartados anexos tratamos el resto de
modalidades.

2010 Juan Menndez Crespo

94

MBC - Forms

Tipo de Link
Establece la definicin que deseamos realizar al vnculo que insertamos, disponemos de tres modos
URL (link tradicional), Ancla (Anchor o link contenido en texto) y por ltimo eMail (mailto: )
Protocolo es el prefijo que utilizar dicho link, habitualmente usaremos http:// para links absolutos
(direcciones web completas) y Otros para links relativos al sitio web en el que estamos. Disponemos de
otros protocolos como ftp://, https:// etc... pero estos siempre sern para links absolutos.
URL define la ruta de destino del link, verifique este link si es posible antes de escribirlo o copie y pegue
el texto desde la pgina web de destino.

2010 Juan Menndez Crespo

Utiles

95

Destino
Target o destino del link establece donde debe el navegador abrir el vnculo, puede ser en la pgina
actual (_self), pgina nueva (_blank), etc... seleccione la opcin deseada.
En el caso de utilizar frames en la web debemos establecer el nombre del frame donde se destine el
vnculo.

En los casos de seleccin de POPUP o ventana emergente disponemos de nuevos parmetros para
configurar dicho elemento (ventana).
La mayora de las opciones se basan en un disponible o no disponible para el usuario que vea esta
ventana.
Campo
Resizable
Location Bar
Menu Bar
Scroll Bars
Status Bar
Tool Bar
Full Screen (IE)
Dependent (nets)
Width / Alto
Height / Ancho
Left Pos./ Izquierda
Right Pos / Derecha

2010 Juan Menndez Crespo

Descripcin
Ajuste de la ventana por el usuario
Barra de direccin URL visible
Barra de men visible
Barra de desplazamiento (horizontal o vertical) visible
Barra de estado de ventana visible
Barra de herramientas visible
Ver en pantalla completa (solo Internet Explorer)
Ventana dependiente (solo Netscape)
Ancho de la ventana en pixels
Alto de la ventana en pixels
Posicin absoluta en pantalla desde la izquierda (horizontal)
Posicin absoluta en pantalla desde la derecha (vertical)

96

MBC - Forms

Subida directa de archivos al servidor (utilidad anexa para facilitar trabajos intermedios de descarga
necesaria en la web para el usuario, como PDF).
Su funcionamiento es idntico a la operativa que se describe en la insercin de imgenes.

Para los usuarios avanzados se ha dispuesto esta ventana que le permite re-asignar ciertos parmetros
especiales. Es necesario algunos conocimientos de HTML y CSS para poder manejar correctamente
estos campos.
Campo

Descripcin

2010 Juan Menndez Crespo

Utiles

97

Id
Identificador para el DOM id=""
Language
Orientacin (dcha a izda o de izda. a dcha.) dir=""
Direction
Access Key
Tecla de acceso rpido al link accesskey=""
Name
Nombre del vnculo name=""
Languaje Code Codigo de idioma lang=""
Tab Index
Nmero de tabulado dentro del total que se muestra en el navegador tabindex=""
Advisory Title
Titulo del link title=""
Advisory Content Tipo de contenido del link type=""
Stylesheet Class Nombre de la definicin class en la hoja de estilos personalizada class=""
Linked resource Codigo de caracteres vinculado charset=""
Style
Use directamente lenguaje CSS para establecer los valores style="suestilo"
15.3.2.1 Link de ancla
Insercin de un link tipo ancla (anchor) dentro del texto contenido. Recuerde que para poder utilizar este
tipo de link necesitar previamente haber definido las diferentes anclas por el texto (ver uso)

Seleccione el nombre del ancla al que hace referencia, el desplegable le limitar los vnculos
disponibles. O bien si ha creado Id dispondr en el desplegable de ellas.

2010 Juan Menndez Crespo

98

MBC - Forms

En la insercin de anclas es necesario fijar un literal, que se recom ienda no contenga espacios pero que se
significativa al sitio de referencia para sim plificar su uso.

15.3.2.2 Link de email

Equivale a automatizar el proceso de envo directo de un correo a travs de la aplicacin del cliente
(Outlook, Express, Eudora, etc...) equivale a realizar en HTML un mailto:cuenta@decorreo.com
Indique la direccin de email del destinatario, si necesita poner varias utilice punto y coma (;) para
separar los elementos
Indique el objeto del envo de correo (equivale a Subject como parmetros)
Indique el texto genrico que se incrustar en el correo electrnico (este texto es por defecto y el
usuario podr modificarlo, como el subject).

15.3.3 Insertar Tabla


Al hacer click sobre el botn de insertar tabla veremos emerger esta pantalla:

2010 Juan Menndez Crespo

Utiles

99

Las propiedades que podemos utilizar en la creacin de tablas son:


Campo
Descripcin
Filas
Nmero entero que establece las filas de la tabla
Columnas
Nmero entero que establece las columnas de la tabla
Anchura
Nmero entero que establece el ancho total en pixel o porcentaje
Altura
Nmero entero que establece el alto total en pixel o porcentaje
Medida
Establece la medida de ancho y alto
Tamao Borde
Nmero entero que establece el nmero de pixels de borde
Alineacin
Ajuste del contenido de la celda (derecha, izquierda, centrado)
Esp. e/celdas
Nmero entero que establece en pixel el espacio entre celdas
Esp. interior
Nmero entero que establece en pixel el margen interior de las celdas
Ttulo
Nombre que fijamos a la tabla (area DOM para usos en Javascript)
Sntesis
Descripcin opcional de la tabla
Es importante resear que la tabla siempre est supeditada a la caja donde se vaya a mostrar, por lo
que no debe poner tamaos superiores a la caja destino de la misma. Se recomienda el uso de valores
porcentuales para simplificar la operacin.
15.3.3.1 Celdas
Editar y cambiar propiedades de las celdas
Unir celdas (combinar)
Insertar/Eliminar/Combinar/Dividir celdas
15.3.3.2 Filas y Columnas
Insertar / Eliminar filas y/o columnas

2010 Juan Menndez Crespo

100

MBC - Forms

15.3.4 Navegar por el servidor

Esta es la ventana que se muestra cuando deseamos navegar por el servidor para buscar una de las
imgenes subidas con anterioridad o bien queremos subir nuevos elementos.
En la parte izquierda superior disponemos del tipo de recurso que estamos buscando o manipulando. A
su derecha nos mostrar la ruta en la que nos encontramos.
Bajo el tipo de recurso veremos en formato de rbol la carpeta en uso, as como la opcin de
seleccionar otra carpeta contenida en esta en el servidor, movernos a la carpeta anterior, etc.
En la zona central (bajo la ruta en la que estamos) disponemos de un listado de elementos encontrados
que coinciden con el tipo de recurso, simplemente marque el archivo que desea usar en la ventana
anterior al navegador.
En la parte inferior se han dispuesto dos utilidades para el mantenimiento: creacin de nuevas carpetas
(con el fin de poder organizar los archivos subidos) y subida al servidor de nuevos elementos (imgenes,
pdf, etc...). El uso de la subida es simple: seleccione con el botn examinar el archivo de su equipo, a
continuacin pulse UPLOAD para subirlo a la carpeta en la que se encuentra.

15.3.5 Insertar Flash


La funcin de insercin de elementos flash pretende simplificar la codificacin de estos ya que son
objetos embebidos en la web.

2010 Juan Menndez Crespo

Utiles

101

La URL establece el origen del archivo y podemos utilizar el botn de Ver servidor para
simplificar la seleccin del mismo
Configure el ancho y alto del elemento flash para forzar su visualizacin correcta, si omite estos campos
la tendencia es crear un zoom a la caja contenida (siempre que este se habilitara en los comandos de
flash).
Dispone en la parte inferior de una vista previa de como quedara este elemento en la web.

2010 Juan Menndez Crespo

102

MBC - Forms

Se ha incluido la utilidad de subir automticamente archivos al servidor, para ello pulse el botn
Examinar y seleccione el archivo de su equipo, a continuacin pulse el botn de Enviar al Servidor para
subirlo.

2010 Juan Menndez Crespo

Utiles

103

Para los usuarios avanzados y simplificar la tarea de insertar comandos o parmetros al objeto flash, se
han dispuesto estos campos.
Es necesario disponer de conocimientos bsicos de HTML y CSS para manipular los campos inferiores.

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XVI

Usando forms.asp externamente

16

105

Usando forms.asp externamente


Forms.asp es una aplicacin externa que nos permite utilizar cualquier formulario como una pgina
directa sin necesidad de integrarla en una caja.
Bsicamente el objetivo es facilitar el uso de formularios en cajas de sombras (shadowbox) como
elemento emergente no obstructivo o bien como popup
Parmetros disponibles:
IDFORM establece el nmero del formulario que deseamos utilizar
HIDEFIELD agregar campos ocultos con informacin externa al formulario definido
USER nombre del usuario autorizado para la utilizacin de la herramienta
Ejemplos de llamadas a Forms externas
http://www.miweb.com/forms.asp?idform=5&user=nombre
http://www.miweb.com/forms.asp?idform=5&hidefield=campo1:valor;campo2:valor;campo3:
valor&user=nombre

2010 Juan Menndez Crespo

MBC - Forms
El generador de formularios web

Part

XVII

Formularios ejemplo

17

107

Formularios ejemplo
Estos son los formularios que encontrar por defecto en su base de datos BD-Forms y que han sido
creados como ejemplos funcionales para integrar en su web
Formulario de ejemplos de campos
Formulario simple de contacto
Formulario extendido de contacto
Formulario de contacto bsico
Formulario de reservas
Formulario de newsletter (basado en AJAX)
Formulario de newsletter (conexin con datos y validacin de clave)
Formulario de acceso a webmail

2010 Juan Menndez Crespo

108

MBC - Forms

Index

-DDatos del cliente (Q&A)


39
Desarrolladores
85
Desplegables del mantenimiento
DHTML Editor
54
Diagrama general
19
Dudas
9

-AAdobe Flash
100
Agrupar campos en pantalla
61
Ajax MBC
81
Anchor link
97
Asignar fecha con calendario
87
Ayuda en rtulo de campo
53

-EEditor
88
Editor texto enriquecido
88
ejemplo
11
Ejemplo de formulario
39
Ejemplos de Campos
51

-BBotones
65
Browse server
100
Buscar archivos en el servidor

24

100

-F-

-CCalendario
87
Campo de archivo
60
Campo de fecha
55
Campo de seleccin agrupada
59
Campo de seleccin desplegable
58
Campo de seleccin tipo radio
56
Campo de seleccion tipo Radio-Mltiple
Campo de texto
52
Campo de verificacin
55
Campo Oculto
52
Campos
24
Campos Acciones
49
Campos definicin
43
Campos Idioma
48
Campos por tabla
19
Campos Valores definicin
50
Campos Valores Idiomas
51
CAPTCHA
62
cms
9
Codificacion idiomas
16
Como usar
16
Compatibilidad
9
Configuracin
28
CSS en MBC
68

57

FAQ
9
Field Help
53
FIELDSET 61
FireFox Mozilla
9
Flock
9
Formulario Columnas
37
Formulario definicin
32
Formulario Idiomas
36

-GGestion de archivos
Google Chrome
9

100

-HHIDDEN
52
Historia
11
HTML Editor
54

-IINPUT CHECKBOX 55
INPUT FILE
60
INPUT RADIO
56, 57
INPUT TEXT 52
2010 Juan Menndez Crespo

Index

INPUT TEXT DATE


55
insertar email
98
Insertar Flash
100
Insertar imgenes
90
Insertar links
93
Insertar tabla
98
Integracin con MBC-SQL
Internet Explorer
9
introduccion
9

-PPersonalizacin
61, 62
Preguntas frecuentes
9
83

-QQue es CMS
Que es MBC

-JJavascript en Celda de rtulo


Javascript en MBC
74

-R-

61

Recomendaciones
83
Rich Text Editor
88
RTE
88
RTE Field
54

-KK-Meleon

-S-

-LLink de email
98
Links de ancla
97
Links recomendados

9
9

Safari
9
SELECT OPTGROUP
59
SELECT OPTION
58
Separador de campos en formulario
Subida de archivos
100

11

-MMacromedia Flash
100
Mantenimiento
21
Mantenimiento de tablas
Marcos en campos
61
mbc
9
Mejoras
11
Mtodos
24

-TTabla
98
Tablas y relaciones
19
Tecnologa que usa
9
TEXTAREA HTML
54
Tipo Campos
25

24

-U-

-NNavegar por el servidor


Novedades
11

Upload
100
Uso de CSS en Campos
62
Uso grfico de CSS en rtulo
61

100

-OOpera
9
Operaciones en campos con Javascript

2010 Juan Menndez Crespo

-V65

Validacin humana

62

38

109

110

MBC - Forms

-Wweb 2.0

2010 Juan Menndez Crespo

111

Endnotes 2... (after index)

2010 Juan Menndez Crespo

Contraportada

You might also like