Creating an iPad Form Advanced Guide
This guide is designed for YAPI users who are familiar with the document creation process, want to create more elaborate documents, and want to understand the "do and don'ts" when constructing data-integrated forms. It is recommended that users read the listed articles below before deep-diving into this expanded guide.
- What is the Form Builder?
- Where is the Form Builder?
- Creating an IPad Form With The Form Builder
- Adding, Editing, and Deleting in YAPI Documents
The following guide will show YAPI users how to create documents using advanced techniques.
Table of Contents
HTML Code
The YAPI Form Builder uses a computer language referred to as Hypertext Markup Language or HTML for short. This code can be wrapped around certain content and then used to change the characteristics of text within the Form Builder and allow for documents to be adjusted in ways that can better fit the form context, such as bolding or underlining important sections.
Currently, HTML is only supported within the Paragraph option within the Form Builder and can be enabled by clicking the Has HTML checkbox at the bottom of the Paragraph window.
To apply HTML towards any typed content, simply add the associated code before and after the content.
Example: <b>Lorem ipsum dolor sit amet.</b>
Bold, Italics, Underlining
The following will show how to apply bolding, italics, and underlines to certain content.
| HTML Code | Result |
|---|---|
| <b> </b> | Lorem ipsum dolor sit amet. |
| <i> </i> | Lorem ipsum dolor sit amet. |
| <u> </u> | Lorem ipsum dolor sit amet. |
Lists
Lists can also be introduced to documents. The list code can be used to quickly list and organize content with bullet points, letters, and numbers. Keep in mind with the way the YAPI builder recognizes text, the string of text will need to be on one line otherwise the order will contain gaps.
Lists also include a <li> </li> tag dedicated to identifying specific lines or paragraphs for specific points. An example of how the lists should be applied within the Form Builder is the following:
Example: <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
| HTML Code | Result |
|---|---|
| <ol> </ol> |
|
| <ul> </ul> |
|
Adjusting the characteristics of the list can be further expanded by clarifying the type that will be used on top of the currently assigned ordered tag. Adding these additional methods will require adjusting the main order type with the following:
Example: <ul style="list-style-type:disc;"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
These supported types include:
Unordered List Types
| HTML Code | Result |
|---|---|
| <ul style="list-style-type:disc;"> </ul> |  |
| <ul style="list-style-type:circle;"> </ul> |  |
| <ul style="list-style-type:square;"> </ul> |
|
| <ul style="list-style-type:none;"> </ul> |
|
Ordered Lists Types
| HTML Code | Result |
|---|---|
| <ol type="1"> </ol> |  |
| <ol type="A"> </ol> |  |
| <ol type="a"> </ol> |  |
| <ol type="I"> </ol> |  |
| <ol type="i"> </ol> |  |
Special Characters
With the Has HTML checkbox enabled, certain standard special characters will render incorrectly from the final product. This is because special characters such as commas, ellipses, and quotations, require their HTML code to be introduced into the body for them to render correctly. Some typical special characters that will be used often with their associated code will be the following:
| HTML Code | Result |
|---|---|
| " | "e; |
| ' | ' |
| & | & |
| < | < |
| > | > |
Styles
Text can be manipulated in a manner that can adjust the size, font, and alignment of the content being inputted. These styles can be prefaced before key sentences or paragraphs to adjust the text characteristics. Many of the styles can also be used in conjunction with each other without needing to introduce a new line.
Example: <p style="font-size:100%;""font-family:courier;""text-align:center;">
Text Size
The text size of the text can be manually adjusted by introducing a percentage to the font-size style.
| HTML Code | Result |
|---|---|
|
<p style="font-size:100%;"> </p> |
Normal |
|
<p style="font-size:125%;"> </p> |
Bigger! |
Text Font
The YAPI Document Editor is able to support some commonly used fonts to diversify the content within documents.
| HTML Code | Result |
|---|---|
| <p style="font-family:courier;"> |
Courier |
A good list of options to choose from are:
- Arial (the default font)
- Times New Roman
- Helvetica
- Times
- Courier New
- Courier
- Verdana
Text Alignment
The alignment of the text can be used to make certain content be available in certain portions of the page.
| HTML Code | Result |
|---|---|
| <p style="text-align:left;"> </p> | Left |
| <p style="text-align:right;"> </p> | Right |
|
<p style="text-align:center;"> </p> |
Center |
