Professional Documents
Culture Documents
MBC - Forms
Generador de formularios para pginas web
por Juan Menndez Crespo
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
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
16
19
Part IV Mantenimiento
21
24
1 Mtodos
................................................................................................................................... 24
2 Campos
................................................................................................................................... 24
3 Tipo Campos
................................................................................................................................... 25
28
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
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
68
1 Ejemplos
...................................................................................................................................
de CSS para personalizacin
69
72
74
81
1 Validar
...................................................................................................................................
complejidad de un password
81
2 Verificar
...................................................................................................................................
existencia de un usuario
81
83
1 Recomendaciones
...................................................................................................................................
de integracin
83
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
105
107
Index
108
Foreword
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
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.
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
1.4
12
MBC - Forms
1.5
CARACTERSTICAS
Introduccin
CARACTERSTICAS
13
1.6
14
MBC - Forms
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
pag
Nmero
tblborder
Nmero
tblspacing
Nmero
tblpadding
Nmero
usestyle
1/0
bdidx
Nmero
sndmail
save
noadd
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
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.
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.
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.
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
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
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.
26
MBC - Forms
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).
30
MBC - Forms
CAMPO DESCRIPCIN
Indice
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
WEB
Add
(botn)
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.
Definicin de formulario
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
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=
Class=
Method=
Accin relacionada con el tipo, se dispone de ValidaForm(this) para verificar los campos
obligatorios
Tipo Tabla
Cadena
Conexin
Tabla de
Datos
Redirect
URL
FIELDSET
Fieldset
Style=
Fieldset
Class=
LEGEND
Legend
Style=
Legend
Class=
Javascript
Cdigo Javascript que se incrusta por el usuario para realizar acciones en los campos y/
o formulario
Add (botn)
36
MBC - Forms
CAMPO
7.1
DESCRIPCIN
Buttons
Buttons
Style=
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
Definicin de formulario
37
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)
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.
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
7.3
Ancho
Nmero que indica los pixel que deben tener cada columna
Add
(botn)
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.
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
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
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.
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
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.
44
MBC - Forms
Definicin de campos
45
CAMPO
DESCRIPCIN
Id Form
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
Obligatorio
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
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
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
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
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=
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=
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
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
Idioma
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)
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.
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
Javascript
Fn()
Nombre de la funcin Javascript a la que llamamos desde este campo con evento
DOM
destino
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 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
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
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
Idioma
Idioma asignado al literal, utilice la norma internacional de textos para idioma (es=Espaol,
en=English, fr=Francs, etc...)
Texto
Default
Value
Add
(botn)
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.
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
54
MBC - Forms
8.5.5
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.
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
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
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
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
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
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
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...)
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
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
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>)
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.
Definicin de campos
61
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.
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
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
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.
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.
VALOR
DESCRIPCIN
DESCRIPCIN
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()" />
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
66
MBC - Forms
el foco)
onfocus="this.style.background=('#ff0000');this.style.color=('#00ff00')" onblur="this.style.backgr
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
CSS
DESCRIPCIN
font-family
font-style
font-weight
font-size
font
text-indent
text-align
text-transform
word-spacing
letter-spacing
color
backgroundcolor
backgroundimage
Imagen de fondo
backgroundrepeat
Repetir imagen
background-
Posicin de la imagen
CSS en MBC-Forms
CSS
69
DESCRIPCIN
position
background
padding-left
padding-right
padding-top
9.1
padding
margin-left
margin-right
margin-top
margin-bottom
margin
border-color
border-style
border-width
border-left
Borde izquierdo
border-right
Borde derecho
border-top
Borde superior
border-bottom
Borde inferior
border
#RRGGBB
#RGB
Notacin simplificada de RRGGBB siempre que los nmeros de cada sean iguales
CCFFAA=CFA
rgb(R,G,B)
rgb (R%,G%,B
%)
cursor
70
MBC - Forms
Cambiar el color del texto de un campo y el color del fondo del mismo
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
onblur
onchange
onclick
ondblclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
El ratn se ha movido
onmouseout
onmouseover
onmouseup
onreset
onresize
onselect
onsubmit
onunload
Manejar de forma correcta los eventos le permitir controlar por completo las acciones de los usuarios
sobre sus formularios.
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;
}
Javascript en MBC-Forms
75
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();
}
}
}
Javascript en MBC-Forms
77
}
);
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
}
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);}
Javascript en MBC-Forms
79
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
12.2
MBC - Forms
El generador de formularios web
Part
XIII
13
83
13.1
Recomendaciones de integracin
Son necesarios los siguientes archivos:
ARCHIVO
bdforms.asp
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)
MBC - Forms
El generador de formularios web
Part
XIV
14
85
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">
88
MBC - Forms
15.3
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.
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.
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.
90
MBC - Forms
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)
Utiles
Height / Alto
Border / Borde
HSpace / Espacio Hor.
Vspace / Espacio Vert.
Align / Alinear
91
Una segunda solapa nos ayuda a definir posibles links (vnculos) con otros elementos de la web o
externos
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.
Utiles
93
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.
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
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
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.
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.
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).
Utiles
99
100
MBC - Forms
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.
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.
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.
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.
MBC - Forms
El generador de formularios web
Part
XVI
16
105
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
108
MBC - Forms
Index
-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
-PPersonalizacin
61, 62
Preguntas frecuentes
9
83
-QQue es CMS
Que es MBC
-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-
Upload
100
Uso de CSS en Campos
62
Uso grfico de CSS en rtulo
61
100
-OOpera
9
Operaciones en campos con Javascript
-V65
Validacin humana
62
38
109
110
MBC - Forms
-Wweb 2.0
111
Contraportada