テンプレート構文は、標準の PDF フォームフィールドをサポートするとともに、簡単かつ便利に PDF フォームを記入できるようになる PDF フォームのカスタム入力タイプもサポートしています。つまり、HTML5 のカスタム入力タイプを PDF に追加することができます。フォームのカスタム入力タイプは、標準の PDF 仕様ではサポートされていないため、PDF ビューワでのみ開き、表示し、記入することができます。Acrobat や他の PDF ビューワではサポートされていません。また、フォームのカスタム入力タイプはテキストボックスフィールドを継承しており、以下のタイプがあります。
- text
- date
- time
- tel
- url
- password
- month
- week
- number
- search
また、上記のカスタム入力タイプにバリデーションを定義し、サーバーなどに送信する前にフォームに関する検証メッセージを表示できます。例えば、「必須フィールドが未入力です。」、「パスワードは8文字以上である必要があります。」、「メールアドレスは適切な形式に従って記入してください。」のようなものです。検証メッセージが設定されている場合、そのバリデーションに従わずにフォームが送信されると、定義された検証メッセージが表示されます。これらのバリデーションは、次のバリデーションタイプを使用して、フォームのカスタム入力タイプに定義することができます。
- validationmessage
- validateoninput
- minlength
- maxlength
- required
- pattern
- min
- max
以下は、バリデーションが定義されたカスタム入力タイプの例です。
- {{(form={"type":"url", "autocomplete":"url", "validateoninput": true, "backgroundcolor": "rgb(191, 207, 255)", "border": {"color": "#000000"}})}}
- {{(form={"type":"email", "autocomplete":"email", "validateoninput": true, "backgroundcolor": "rgb(191, 207, 255)", "border": {"color": "#000000"}})}}
- {{(form={"type":"password", "autocomplete":"off", "validateoninput": true, "placeholder": "4～8文字", "pattern": "^(?=.*\\d).{4,8}$", "validationmessage": "パスワードは4～8文字で入力してください", "backgroundcolor": "rgb(191, 207, 255)", "border": {"color": "#000000"}})}}
フォームのカスタム入力タイプは、テキストボックスフィールドを継承しているため、テキストボックスフィールドのすべての設定も継承しています。また、すべてのカスタム入力タイプに適用できる共通設定もあります。各タイプに固有の設定は以下のとおりです。
電話番号、パスワード、URL の入力タイプの設定
| プロパティ | 型 | 例 | 説明 |
| pattern | String | {"type": "tel" , "pattern":"[0-9]{3}-[0-9]{2}-[0-9]{3}"} | 有効な入力に一致するように記述されるパターンを指定します。 |
| placeholder | String | {"type": "password" , "placeholder": "4 to 8 characters"} | 電話番号フィールドのplaceholder属性の値を設定または返します。 |
| maxlength | Integer | {"type": "password" , "minlength": 4, "maxlength": 8} | 入力できる最大文字数を指定します。 |
| minlength | Integer | {"type": "password" , "minlength": 4, "maxlength": 8} | 入力文字列の最小の長さを指定します。 |
メールアドレスの入力タイプの設定
| プロパティ | 型 | 例 | 説明 |
| multiple | Boolean | {"type": "email" , "multiple": true} | ユーザーがメールアドレスフィールドに複数のメールアドレスを入力できるかどうかを設定または返します。 |
| pattern | String | {"type": "email" , "pattern": "\\S+@\\S+\\.\\S+"} | メールアドレスフィールドのpattern属性の値を設定または返します。 |
| placeholder | String | {"type": "email" , "placeholder": "example@xxx.com"} | メールアドレスフィールドのplaceholder属性の値を設定または返します。 |
テキストの入力タイプの設定
| プロパティ | 型 | 例 | 説明 |
| maxlength | Integer | {"type": "text" , "minlength": 4, "maxlength": 8} | 入力できる最大文字数を指定します。 |
| minlength | Integer | {"type": "text" , "minlength": 4, "maxlength": 8} | 入力文字列の最小の長さを指定します。 |
| pattern | String | {"type": "text" , "pattern": "\\S+@\\S+\\.\\S+"} | テキストフィールドのpattern属性の値を設定または返します。 |
| placeholder | String | {"type": "text" , "placeholder": "Input your name!"} | テキストフィールドのplaceholder属性の値を設定または返します。 |
| spellcheck | Boolean | {"type": "text" , "spellcheck": true} | 要素でスペルミスのチェックを行うかどうかを定義します。 |
検索の入力タイプの設定
| プロパティ | 型 | 例 | 説明 |
| maxlength | Integer | {"type": "search" , "minlength": 4, "maxlength": 8} | 入力できる最大文字数を指定します。 |
| minlength | Integer | {"type": "search" , "minlength": 4, "maxlength": 8} | 入力文字列の最小の長さを指定します。 |
| placeholder | String | {"type": "search" , "placeholder": "Search..."} | 検索フィールドのplaceholder属性の値を設定または返します。 |
| spellchecker | Boolean | {"type": "search" , "spellcheck": true} | 要素でスペルミスのチェックを行うかどうかを定義します。 |
バリデーション設定
フォームのカスタム入力タイプに定義できるバリデーション設定は以下のとおりです。
| プロパティ | 型 | 説明 |
| validateonmessage | String | ローカライズされた検証メッセージを示します。 |
| validateoninput | Boolean | ユーザー入力をすぐに検証するかどうかを示します。 |
| maxlength | Number | 入力できる最大文字数を指定します。 |
| minlength | Number | 有効な入力データとみなすことができる最小の文字数を指定します。 |
| required | Boolean | フォームに入力する必要があるかどうかを示します。 |
| pattern | String | 制約検証を通過させるために入力された値が一致する必要がある正規表現を示します。 |
| max | Number | 入力欄が受け付ける最大文字数を指定します。 |
| min | Number | 入力欄が受け付ける最小の文字数を指定します。 |
フォームのカスタム入力タイプでサポートされる設定
フォームのカスタム入力タイプでサポートされる設定は以下のとおりです。
| 属性 | 入力タイプ | 説明 |
| autocomplete | すべて | 入力タイプを指定します。 |
| autofocus | すべて | ページが読み込まれたときに、自動的にそのフォームコントロールにフォーカスを設定します。 |
| defaultvalue | すべて | デフォルト値を指定します。 |
| disabled | すべて | コントロールが無効であるかどうかを指定します。 |
| displayname | すべて | 入力コントロールのテキストラベルであり、フィールドが入力フォームダイアログに表示される時のみに適用されます。 |
| min | date、number | 入力欄が受け付ける最小の文字数を指定します。 |
| max | date、number | 入力欄が受け付ける最大文字数を指定します。 |
| maxlength | text、tel、url、password、search | 入力できる最大文字数を指定します。 |
| minlength | text、tel、url、password、search | 入力文字列の最小の長さを指定します。 |
| multiline | text | このプロパティをtrueに設定すると、テキスト領域をユーザー入力要素として使用できます。 |
| multiple | ブール値。複数の値を許可するかどうかを指定します。 | |
| pattern | text、tel、password | 有効な入力に一致するように記述されるパターンを指定します。 |
| placeholder | text、tel、url、password、search | フォームコントロールが空の時にフォームコントロール内に表示される内容を示します。 |
| readonly | すべて | ブール値。値が編集できません。 |
| required | すべて | ブール値。フォームが送信できるようにするためには値が必要です。 |
| spellcheck | text、search | 要素でスペルミスのチェックを行うかどうかを定義します。 |
| type | すべて | フォームコントロールのタイプです。 |
| validateonmessage | すべて | ローカライズされた検証メッセージを示します。 |
| validateoninput | すべて | ユーザー入力をすぐに検証するかどうかを示します。 |
以下の帳票テンプレートには、DioDocs のテンプレート構文でサポートされている様々なカスタム入力タイプとその設定が定義されています。これらのフォームフィールドは非常に一般的であり、PDF フォームへの入力が非常に便利になります。生成された PDF フォームを PDF ビューワで表示すると、「日付」および「時間」のフィールドは、日付ピッカーと時刻ピッカーのドロップダウンになります。「電話番号（パターン指定）」のフィールドは、フォームに入力される文字列が一致すべきパターンを定義しています。「パスワード（最小文字数指定）」と「パスワード（最大文字数指定）」のフィールドは、パスワードを設定する際に使用できる文字数の制限を定義しています。フォームのカスタム入力タイプに適用されるバリデーションにより、フォームへの入力がより便利になります。
上記帳票テンプレートから帳票を作成し、PDF に出力すると、PDF ビューワでは以下のような PDF フォームになります。
