Frequently asked questions (FAQ) for HTML5 forms

Why do barcodes and signature field in not appear in my form?

Answer: Barcodes and signatures fields are not relevant in HTML or mobile scenarios. These fields appear as a non-interactive area. However, AEM Forms Designer provides a new signature scribble field that can be used instead of signature field. One can also add a custom widget for barcodes and integrate it.

Is Rich Text supported for the XFA Text Field?

Answer: The XFA field, which allows rich content in AEM Forms Designer, is not supported and is rendered as normal text without support for styling the text from the user interface. Also, XFA fields with comb property are displayed as a normal field, though there are still restrictions on number of allowed characters based on the value of comb digits.

Are there any limitations regarding using repeatable Subforms?

Answer: Repeatable Subforms should have an initial count of 1 or more. Repeatable Subforms with an initial count of zero are not supported. You can also choose to use a repeatable Subform and not display it when the form is loaded. To achieve the use case:

1. Set initial count of the repeatable Subform to 1.

   

2. Use initialize event of the form to hide primary instance of the Subform. For example, the code below hides the primary instance of the Subform on form initialization. It also verifies the app type to ensure that the script is executed only on the client side:

   if ((xfa.host.appType == "HTML 5" || xfa.host.appType == "Exchange-Pro" || xfa.host.appType == "Reader")&&(_RepeatSubform.count == 1)&&(form1.Page1.Subform1.RepeatSubform.Key.rawValue == null)) {
   RepeatSubform.presence = "hidden";
   }
   

3. Open the script for adding an instance of the Subform for editing. Add the code like the below to add an instance of the Subform script.

   The code below checks the hidden instance of the Subform. If the hidden instance of the Subform is found, delete the hidden instance of the subform and insert a fresh instance of the Subform. If the hidden instance of the Subform is not found, then simply insert a fresh instance of the Subform.

   if (RepeatSubform.presence == "hidden")
   {
   RepeatSubform.instanceManager.insertInstance(0);
   RepeatSubform.instanceManager.removeInstance(1);
   }
   else
   {
   RepeatSubform.instanceManager.addInstance(1);
   }
   

4. Open the script for removing an instance of the Subform for editing. Add the code like the following to removing an instance of the Subform script.

   The code checks count of the Subforms. If the count of the Subform reached 1, the code hides the subform instead of deleting the Subform.

   if (RepeatSubform.instanceManager.count == 1) {
   RepeatSubform.presence = "hidden";
   } else {
   RepeatSubform.instanceManager.removeInstance(RepeatSubform.instanceManager.count - 1);
   }
   

5. Open the presubmit event of form for editing. Add the following script to the event to remove the hidden instance of the script before editing. It prevents sending data of the hidden Subform on submission.

   if(RepeatSubform.instanceManager.count == 1 && RepeatSubform.presence == "hidden") {
   RepeatSubform.instanceManager.removeInstance(0);
   }
   

Are there any limitations regarding using hidden subforms?

Answer: A hidden subform with complex hierarchy that is split across pages causes layout issues. A workaround is to mark the subform initially visible and then hide it in an initialize script based on some logic or data.

Why some text are truncated or are displayed incorrectly in HTML5?

Answer: Where a Draw or Caption text element has not been given enough space to display content, the text appear truncated in mobile form rendition. This truncation is also visible in the Design view of AEM Forms Designer. Though this truncation can be handled in the PDFs, it cannot be handled in the HTML5 forms. To avoid the issue, provide enough space to Draw or Caption Text so that it does not truncate in the design mode of the AEM Forms Designer.

I am observing layout issues related to missing content or overlapping content. What is the reason?

Answer: If there is a Draw Text or a Draw Image element along with another overlapping element at the same position (say a Rectangle), the Draw Text content are not visible if it comes later in the document order (in AEM Forms Designer Hierarchy view). PDF supports transparent layering but HTML/browsers do not support transparent layering.

Why are some fonts displayed in the HTML form different from the ones used while designing the form?

Answer: HTML5 Forms do not allow embedding fonts (in contrast to PDF forms where fonts are embedded inside the form). For the HTML version of a form to render as expected, ensure that the fonts are available in the CRX Repository (AEM Content Repository) of your AEM Forms server and on the machine that has AEM Designer installed. When the fonts are not available in the CRX Repository of your AEM Forms server or at the location where AEM Designer is installed, the form is rendered with fallback fonts.

Are vAlign and hAlign attributes supported in HTML forms?

Answer: Yes, the vAlign and hAlign attributes are supported. The vAlign attribute is not supported in Internet Explorer and in multiline field.

Do HTML5 forms support Hebrew characters?

Answer: HTML5 forms support Hebrew characters in all the browsers except Microsoft Internet Explorer.

Do HTML5 forms have any limitations on numeric field?

Answer: Yes, HTML5 forms has a few limitations. If the number of digits are more than the count specified in the picture clause, then the numbers are not localized and are displayed in English locale.

Why HTML forms are larger in size than PDF forms?

Answer: Numerous intermediate data structures and objects such as form dom, data dom, and layout dom are required to render an XDP to an HTML form.

For PDF Forms, Adobe Acrobat has a built-in XTG engine to create intermediate data structures, and objects. Acrobat also takes care of layout and scripts.

For HTML5 forms, browsers do not have a built-in XTG engine to create intermediate data structures, and objects from raw XDP bytes. So, for HTML5 forms, intermediate structures are generated on the server and sent to the client. At client,JavaScript based script and layout engine use these intermediate structures.

The size of the intermediate structure depends on the size of the original XDP and the data merged with the XDP.

Are there any limitations regarding using tables in my xdp?

Answer: Complex Tables cause issues in rendering.

• Section (SubformSet) inside a table are not supported.
• Header or footer rows in some tables are marked for repetition. Splitting such tables across multiple pages can run into some issues.

Do accessible tables have any limitations?

Answer: Yes, accessible tables have the following limitations:

• Nested tables and subform inside a table are not supported.

• Headers are only supported for the top row or left columns of the table. Headers are not supported for mid-table elements. You can apply headers to multiple row and column headers are supported provided all such rows and columns are along with the topmost row or leftmost column of the table.

• Rowspanand colspanfrom a random location inside the table is not supported.

• You cannot dynamically add or remove instance of rows which contain elements with rowspan value greater than 1.

What is the reading order of tool tip and caption for screen readers?

Answer:

• When both caption and tool tip are present, the only caption is read. If the caption is not available, then the tool tip is read. You can also specify the precedence for reading in an XDP using form designer
• When you hover an element, then tool tip is displayed. If tool-tip is not available speech text is displayed. If speech text is not available, then field name is displayed.

When you hover a field, a tool tip is displayed. How to disable it?

Answer: To disable tool tip on hover, select none in the accessibility panel of the Designer.

In Designer, a user can configure custom appearance properties of radio button and check boxes. Do, while rendering the forms, HTML5 forms take such custom appearance properties into account?

Answer: HTML5 forms ignore the custom appearance properties of radio button and check boxes. The radio buttons and check boxes appear as per the specifications of the underlying browser.

When an HTML5 Form is opened in a supported browser, the border of the fields placed adjacently is not aligned properly or subforms appear overlapped. When the same HTML5 Form is previewed in Forms Designer, the fields and layout do not appear misaligned and subforms appear in the correct position. How to fix the issue?

Answer: When a subform is set to flow content and the subform has a hidden border element, the border of the fields placed adjacently is not aligned properly or subforms appear overlapped. To resolve the issue, you can remove or comment the hidden <border> elements from the corresponding XDP. For example, the following <border> element is marked as a comment:

            <!--<border>
               <edge presence="hidden"/>
               <corner thickness="0.175mm" presence="hidden"/>
            </border> -->

Why screen readers do not work correctly with the Date/Time field object?

Answer: Screen readers do not support date/time fields. However, you can manually enter date/time to the field to make the screen reader read it. Use tool-tip or screen-reader text to instruct the user to manually select date/time for the field.

Do HTML5 forms support display patterns for floating fields?

Answer: HTML5 forms do not support display patterns for floating fields.

What is the format of the Date field in HTML5 Forms?
Answer: The Date field accepts the ISO format, YYYY-MM-DD. If you specify a date in some other format, the Date Field does not accept the formatting until the user tabs out of the field.