Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

formTemplate

Use the form template (formTemplate) to gather information from the user; for example, requiring a password to access your app. The banner area can contain an image and a description of your product. The user enters text in the text field directly below the banner using the automatically generated keyboard. Use the footer area to contain any user interaction buttons. Figure 7-1 shows the basic layout for a formTemplate page. The theme for the form template defaults to the system preference.

Figure 7-1Form template image: ../Art/ATV_temps_form_2x.png

Main Elements of the Form Template

Listing 7-1 shows the main elements in TVML format, and Table 7-1 describes the main elements.

Listing 7-1formTemplate TVML format
  1. <formTemplate>
  2. <background>
  3. </background>
  4. <banner>
  5. <img />
  6. <description>…</description>
  7. </banner>
  8. <textField>…</textField>
  9. <footer>…</footer>
  10. </formTemplate>

Table 7-1formTemplate element descriptions

Element name

Description

background

Only accepts img and heroImg elements in the background.

banner

Information displayed along the top of the screen that is typically used to provide instructions to the user.

description

The text used to describe what the user needs to enter.

footer

Information displayed along the bottom of the screen, such as a Submit button for the user to commit the information entered in textField.

img

An image of the product.

textField

User input field.

Form Template Example

Listing 7-2 shows the TVML for a formTemplate example. The interactive keyboard is automatically created. The footer area contains a button that can submit the user input. Modify your main JavaScript file to accept the user input from the button. For more information on available JavaScript functions, see Apple TV JavaScript Framework Reference. Figure 7-2 shows the output for the example.

Listing 7-2formTemplate example TVML
  1. <document>
  2. <formTemplate>
  3. <banner>
  4. <img src="path to images on your server/Car_Movie_800X400.png" width="800" height="400"/>
  5. <description>Enter email for access</description>
  6. </banner>
  7. <textField>tclark@example.com</textField>
  8. <footer>
  9. <button>
  10. <text>Submit</text>
  11. </button>
  12. </footer>
  13. </formTemplate>
  14. </document>
Figure 7-2formTemplate example output image: ../Art/formTemplateSS_2x.png