将Form Bridge与HTML5表单的自定义门户集成 integrating-form-bridge-with-custom-portal-for-html-forms
FormBridge是一个HTML5 Forms Bridge API，它允许您与表单交互。 有关FormBridge API引用，请参阅FormBridge API引用。
您可以使用FormBridge API从“HTML”页获取或设置表单字段的值并提交表单。 例如，您可以使用API构建类似于向导的体验。
现有的HTML应用程序可以使用FormBridge API与表单进行交互并将其嵌入到HTML页面中。 您可以使用以下步骤通过Form Bridge API设置字段的值。
将HTML5表单集成到网页 integrating-html-forms-to-a-web-page
-
选择配置文件或创建配置文件
-
在CRX DE界面中，导航到：
https://'[server]:[port]'/crx/de。 -
使用管理员凭据登录。
-
创建配置文件或选择现有配置文件。
有关如何创建配置文件的详细信息，请参阅创建配置文件。
-
-
修改HTML配置文件
在配置文件渲染器中包含XFA运行时、XFA区域设置库和XFA表单HTML片段，设计您的网页，并将表单放入网页中。
例如，使用以下代码片断，创建一个包含两个输入字段的应用程序，并创建一个表单以演示表单与外部应用程序之间的交互。
code language-xml <%@ page session="false" contentType="text/html; charset=utf-8"%><% %><%@ taglib prefix="cq" uri="https://www.day.com/taglibs/cq/1.0" %><% %><!DOCTYPE html> <html manifest="${param.offlineSpec}"> <head> <cq:include script="formRuntime.jsp"/> <!-- Portal Scripts and Styles --> <cq:include script="portalheader.jsp"/> </head> <body> <div id="leftdiv" > <div id="leftdivcontentarea"> <!-- Portal Body --> <cq:include script="portalbody.jsp"/> </div> </div> <div id="rightdiv"> <div id="formBody"> <cq:include script="config.jsp"/> <!-- Form body --> <cq:include script="formBody.jsp"/> <! --To assist in page transitions -- add navigation, based on scrolling --> <cq:include script="../nav/scroll/nav_footer.jsp"/> <cq:include script="footer.jsp"/> </div> </div> </body> </html>note note NOTE 第9 行，包含用于CSS样式和JavaScript文件的附加JSP引用以设计页面。 第18 行上的<div id="rightdiv">标记包含XFA表单的HTML片段。 页面样式为两个容器：left 和 right。 正确的容器具有表单。 左侧容器包含两个输入字段和一个外部HTML页的一部分。 以下屏幕抓图显示了表单在浏览器中的显示方式。 
左侧是 HTML页 的一部分。 包含字段的右侧是 xfa表单。
-
从页面访问表单字段
以下是示例脚本，您可以添加此脚本来设置表单字段中的值。
例如，如果要使用 名字 和 姓氏 字段中的值设置 雇员姓名，请调用 window.formBridge.setFieldValue 函数。
同样，可以通过调用 window.formBridge.getFieldValue API读取该值。
code language-javascript $(function() { $(".input").blur(function() { window.formBridge.setFieldValue( 'xfa.form.form1.#subform[0].EmployeeName', $("#lname").val()+' '+$("#fname").val() ) }); });