テキストフィールドコンポーネントは、インライン入力フィールド内にテキストを挿入することができます。
このフォームコンポーネントを使用するには、テキストフィールドコンポーネントを構築するフォームにドラッグするだけです。
フォームデザイナーにドラッグすると、新しいウィンドウが表示され、このフォームコンポーネントの設定ウィンドウが表示されます。このウィンドウはセクションごとに分かれています。表示、データ、バリデーション、API、条件、ロジック、レイアウトです。これらのセクションとそのプロパティについては、後ほど詳しく説明します。
テキストエリアは、テキストフィールドフォームコンポーネントと同じオプションを持っています。違いは、より長いテキストを入力できる複数行の入力フィールドになることです。テキストエリアは、エンドユーザーのためのCK Editor WYSIWYGとしても利用できます。これはコンポーネントの設定で設定します。
ディスプレイ
数値フィールドは、フィールドが数値の種類に限定されるべき場合に使用されるべきである。
データ
千のセパレータを使用
このオプションは、ローカルデリミタで千単位を区切ります。
小数点以下の桁数
このフィールドの値の小数点以下の桁数の最大値。
小数を必要とする
このフィールドには、ゼロが後続する場合でも常に小数を表示する。
パスワードフィールドは、テキストフィールドコンポーネントと同じオプションを持っています。テキストフィールドと異なるのは、htmlの<input>タイプがテキストではなくパスワードになることです。これにより、フィールドには入力された値の代わりにアスタリスクが表示されます。
チェックボックスは、ブーリアン値の入力フィールドです。オンかオフのどちらかになります。
バリデーション
- 必須
チェックされている場合、そのフィールドはチェック必須となります。必須である場合、フォームが送信されたときにチェックされたと見なされるか、または送信されないので、値を永続化する必要がない場合があります。
Check BoxesフォームコンポーネントはRadioコンポーネントと同様に機能しますが、ユーザーが複数の値をチェックすることができます。
ディスプレイ
インラインレイアウト
このフィールドをチェックすると、チェックボックスが垂直方向ではなく水平方向にレイアウトされます。
バリデーション
必須
チェックした場合、そのフィールドには少なくとも1つのボックスがチェックされていることが要求されます。必須である場合、フォームが送信されたときにチェックされたと見なされるか、または送信されないので、値を永続化する必要はないかもしれません。
セレクトフィールドは、ユーザーにドロップダウン・リストで値のリストを表示します。ユーザーはその中から1つの値を選択することができます。
ディスプレイ
ウィジェットタイプ
このオプションでは、使用するウィジェットの種類を選択することができます。選択できるのは、ChoicesJSとHTML 5です。
データ
データソースの種類
オプションが引き出されるデータの種類を選択します。
価値観
これらは、このフィールドで選択される値です。Valueカラムはデータベースに保存されるもので、Labelはユーザーに表示されるものです。
ストレージタイプ
データを格納するタイプ。autotype “を選択すると、URLから取得したデータの型を使用することが推奨されます。
アイテムテンプレート
結果データ項目用のHTMLテンプレートです。
静的検索を有効にする
チェックすると、Selectドロップダウンで提供される静的なリスト内で検索することができます。
検索しきい値
0から1までの数字で、マッチングアルゴリズムがあきらめるポイントを表す。0.0の閾値は完全一致を要求し、1.0の閾値は何でも一致させる。
読み取り専用値
チェックすると、Read Onlyモードの時に値だけを表示します。
Choices.jsのオプション
Selectコンポーネントのオプションとして使用する生のJSONオブジェクト。
生のJSON
使用するJSON Arrayを入力します。プロパティ名を持つオブジェクトの配列としてフォーマットされる必要があります。
URL
データソースのURLをJSON Array形式で入力します。これは、選択リストに外部JSON値を入力するために使用されます。
Lazy Load データ
このオプションを設定すると、このコントロールがフォーカスされるまで、URLへのリクエストを開始しません。フォームに多くの選択ドロップダウンがある場合、パフォーマンスを向上させることができます。
リクエストヘッダ
URLへのリクエストと一緒に送信されるべきヘッダーです。認証に役立つことがあります。
データパス
項目が反復可能である場合、ソースデータ内のプロパティ。
リミッティングレスポンスを無効にする
このオプションを有効にすると、リクエストのクエリ文字列に limit と skip オプションが含まれなくなります。
検索クエリ名
リクエストを送信する際に、結果をフィルタリングするために使用される検索クエリストリングパラメータの名前です。URLのサーバーがこのクエリパラメータを処理する必要があります。
フィルタークエリ
このフィルタは、クエリパラメータを使用する際に、追加のフィルタリングを行うために使用される。
ソートクエリ
このオプションは、クエリパラメータを使用する際にソートを行うために使用されます。
制限
このオプションは、要求または閲覧するアイテムの数を制限するために使用されます。
リフレッシュオプションオン
チェックすると、他のフィールドが変更されたときにデータをリフレッシュします。
リフレッシュオプションの値をクリアする
Refresh Options Onがオンの場合、コンポーネントはその値がクリアされます。
Formio Authenticate
リクエストにFormio認証が必要な場合、ユーザーはこのオプションにチェックを入れる必要があります。
ラジオフォームコンポーネントは、選択肢のリストを表示し、その中から1つを選択する場合に使用します。
フォーム内でさまざまなアクションを実行するためのボタンを追加することができます。
ディスプレイ
アクション
ボタンが実行するアクションを指定します。
提出
submitアクションは、form.ioサーバーまたは事前に設定されたカスタムコールバックURLのいずれかにフォームを送信します。
状態での保存
このボタンが押されたときに、ユーザーが投稿を保存したい状態を指定します。
イベント
ボタンがクリックされたときに発生するイベント。イベント名は、ユーザーが入力する必要があります。
バリデーションを表示する
ボタンが押されると、フォーム上のあらゆるバリデーションエラーを表示します。
カスタム
ボタンがクリックされたときに評価するカスタムロジックです。
リセット
フォームのフィールドをリセットして、元の状態に戻します。
オーパーツ
OAuth認証を行う。
URLへのPOST
送信先となるURL。
ヘッダー
リクエストのヘッダープロパティと値。
テーマ
ボタンのカラーテーマです。
サイズ
ボタンの大きさです。
ブロックボタン
このコントロールは、バウンディングコンテナの全幅に広がる必要があります。
左アイコン
アイコンを表示するためのフルアイコンクラス文字列。
右のアイコン
アイコンを表示するためのフルアイコンクラス文字列。
ショートカット
このコンポーネントのショートカットです。
高度なフォームには、最も高度な入力フォームが含まれています。
電子メールコンポーネントは、テキストフィールドコンポーネントとほぼ同じです。電子メールコンポーネントにはカスタムバリデーション設定があり、正しく設定すれば、入力された値が有効な電子メールアドレスであることを確認できます。また、フォームのメールアクションに簡単に統合することができます。 フォームにメールアドレスフィールドが必要な場合は、このコンポーネントを使用します。
URLコンポーネントは、単純なテキストを受け付けないことを除けば、テキストフィールドコンポーネントとほぼ同じです。
電話番号フォームコンポーネントは、フォームに電話番号を入力するために使用することができます。テキストフィールドは、文章よりも短い一般的なテキストを入力するために使用することができます。入力マスクやバリデーションを定義するオプションがあるので、情報を希望する形式に変換することができます。
タグコンポーネントは、テキストフィールドと非常によく似ていますが、フォームにタグを追加するために使用されます。
データ
デリミタ
タグの区切りに使用するデリミタ。
マックスタグ
追加できるタグの最大量。0を指定すると無制限となります。
ストアアズ
タグを格納するデータ型。文字列（CSV）またはタグの配列の2つのオプションがあります。
アドレスフォームコンポーネントは、入力された住所に対してルックアップを行う特殊なコンポーネントです。フリーフォームで入力でき、住所だけでなく、ジオロケーションなどの情報も保存されます。
ディスプレイ
リージョンバイアス
この検索に使用する地域バイアス。
Google Maps APIキー
Google MapsのAPIキーです。Google MapsのAPIキーの取得方法については、Googleのデベロッパーズサイトのテーマ（https://developers.google.com/maps/documentation/geocoding/get-api-key）をご覧ください。
日付/時刻フォームコンポーネントは、日付、時刻、またはその両方を入力するために使用することができます。
ディスプレイ
タイムゾーンの表示
選択されたタイムゾーンでキャプチャされた日付時刻が表示されます。ユーザーは、ビューアー、投稿、場所、UTC のいずれかの日付時刻を選択できます。Location “の場合は、ドロップダウンメニューから場所を選択する必要があります。
ロケール設定を使用する
日付と時刻の表示には、ロケール設定を使用します。
フォーマット
datetime 値を表示するための日付形式。使用可能な書式の完全なリストは、このサイト(https://github.com/angular-ui/bootstrap/tree/master/src/dateparser/docs#uibdateparsers-format-codes) を参照してください。
日付
日付入力の有効化
このオプションは、このフィールドの日付入力を有効にします。
最短日
ピッキング可能な最短日。
最大期日
選択可能な最大日付。
時間
イネーブル時間入力
このオプションは、このフィールドの時間入力を有効にします。
時間ステップサイズ
タイムピッカーで増加/減少させる時間数を指定します。
分ステップサイズ
タイムピッカーで増加/減少させる分数です。
12時間表示（AM/PM）
12時間表示（AM/PM表示）が可能です。
日付を入力するためのコンポーネント。
日
選択
このオプションでは、ユーザーは「Number」と「Select」のいずれかを選択することができます。つまり、エンドユーザーには、日数を入力するための空のフィールド、または利用可能なすべての日を含むドロップダウンメニューが表示されます。
日目
日」フィールドを「月」フィールドの前に表示する。
月
選択
このオプションでは、ユーザーは「番号」または「選択」のいずれかを選択できます。つまり、エンドユーザーには月の名前を入力するための空のフィールドか、利用可能なすべての月を含むドロップダウンメニューが表示されることになります。
年
選択
このオプションでは、ユーザーは「番号」と「選択」のいずれかを選択することができます。つまり、エンドユーザーには、年号を入力するための空のフィールドか、利用可能なすべての年号を含むドロップダウンメニューが表示されます。
最低年数
入力可能な最低年数。
最大年数
入力可能な最大年数。
入力時間に対するコンポーネント。
ディスプレイ
入力タイプ
使用するウィジェットの種類を指定します。2つのオプションがあります。HTML 5 Time InputとText Input with Maskです。
データ
データフォーマット
このフィールドの値を保存するための moment.js のフォーマット。
Currency コンポーネントは、フォームのフィールドに通貨の金額を表示する場合に使用します。 このコンポーネントは、小数点以下の 2 つの値を許容する数値入力マスクを保持しており、ユーザーが通貨の金額を入力すると自動的にカンマが追加されます。
データ
通貨
通貨フォーマットで使用する通貨。使用可能な値は、通貨コード (ISO-4217) です。
Surveyコンポーネントは、radioと同様に機能します。1つの質問ではなく、ユーザーはコンポーネントの設定内で構成される複数の質問に対して値を選択することができます。Surveyは、同じ文脈の回答や値を持つ複数の質問をする際に活用できる素晴らしいコンポーネントです。
データ
ご質問
ユーザーがアンケートで質問したいこと。
価値観
質問ごとに選択できる値です。
