前のトピック: フォーム属性

次のトピック: 要素の HTML および JavaScript 属性

要素を追加、移動、削除する方法

新規または既存のフォームで、テキスト フィールド、チェック ボックスやラジオ ボタンを備えたテキスト領域、などの要素を追加および設定できます。 フォームを作成およびカスタマイズする場合は要素を追加し設定します。

フォーム上に要素を追加および設定するには、以下の手順に従います。

  1. コンポーネント ツリー(フォーム デザイナの左ペイン)で、「コンポーネント」の「システム」フォルダを展開し、追加する要素が「システム」フォルダ内のツリー ビューに表示されていることを確認します。

    たとえば、テキスト フィールドを追加する場合は、[システム]フォルダ([コンポーネント]フォルダ下)が表示され、それが展開されて[テキスト フィールド]オプションが表示されていることを確認します。 同様に、選択ボックスとそのオプションを追加する場合は、[ラジオ グループ]フォルダ([システム]フォルダ下)が表示され、それが展開されて[ラジオ]オプションが表示されていることを確認します。

  2. 要素を追加する先のフォームがすでに存在することを確認します。 必要であればフォームを作成します。
  3. 「フォーム」の「マイ フォーム」フォルダを展開し、要素を追加するフォームまでスクロールします。
  4. 追加する要素および対象のフォームの両方が同時にツリー ビューに表示されていることを確認します。
  5. 要素(「テキスト フィールド」など)をクリックし、対象のフォーム上にドラッグ アンド ドロップします。

    たとえば、対象のフォームの名前が「Model Options」の場合、[テキスト フィールド]をクリックして、同じツリー内で「Model Options」までドラッグ アンド ドロップします。

    要素をクリックしてドラッグすると、チェックマークが付いた円および「1 個のオブジェクトが選択されました」というメッセージの両方がカーソルの隣に表示されます。

    マウスをドラッグし、ドラッグされた要素がドロップ先の既存フォームまたはフォーム要素の上にくると、チェックされた円が緑色になり、カーソルが手のマークに変わります。 逆に、ドラッグされた要素が、ドロップ可能なフォームまたはフォーム要素の上にない場合は、チェックされた円が赤色になります。

  6. マウス ボタンを放して、フォームまたはフォーム要素上に要素をドロップします。 ドロップすると、チェックされた円は緑色になります。 そうなっていない場合は、要素が追加されないことを意味します。

    同様に、試行されたアクションがルールに違反する場合は、要素が追加されません。 たとえば、選択オプションをラジオ グループ上にドロップしようとしたり、選択グループを別の選択グループ上にドロップしようとした場合などです。

  7. 新しい要素に対して必須の HTML 属性を指定し、[保存]をクリックします。

    各要素に必須の HTML 属性は、太字で表示されます。

    注: この要素を保存しないで別のアクションを実行しようとした場合は失敗します。 たとえば、この要素を保存する前に、新しい要素をドラッグ アンド ドロップしようとすると失敗します。

  8. プレビュー領域(中央のペイン)でフォームを参照し、要素が適切にフォームに追加されたかどうかを確認します。 そうでなかった場合、要素を再調整するか、追加した要素を削除して再試行します。
  9. 新しい要素に対して任意の HTML 属性を必要に応じて指定し、[保存]をクリックします。
  10. デフォルトでは、コンポーネントは 1 つの列に整理されます。 2 つの列を使用するようフォームを設定するには、以下の手順に従います。
    1. 「システム」フォルダから「列レイアウト」をドラッグし、対象のフォーム上にドロップします。
    2. このレイアウトをドロップすると、列レイアウトおよび 2 つの子「列 1」および「列 2」でツリーが自動的に更新されます。
    3. [列レイアウト]の横のアイコンをクリックすると、「列 1」および「列 2」という名前の 2 つの列が表示されます。
    4. テキスト フィールド、ラジオ グループ、選択ボックスなど他の要素を「列 1」および「列 2」にドラッグ アンド ドロップし、目的のレイアウトを実現します。

      : [列レイアウト]または[列]を強調表示すると、プレビュー領域でフォーム上の対応する領域がグレー表示されて使用不可になり、列内の要素が赤枠で協調表示される場合があります。

  11. 新しい要素に対して JavaScript 属性を必要に応じて指定し、[保存]をクリックします。
  12. 新しい要素に意味のある名前を指定するには、以下の手順に従います。
    1. コンポーネント ツリーで新しい要素を選択し、コンポーネント ツリーの上部にある[名前の変更]ボタンをクリックします。

      : コンポーネント ツリーで、ユーザが作成したフォームの新しい要素(テキスト領域またはラジオ グループ)を選択していることを必ず確認してください。コンポーネント ツリーの「システム」フォルダにある同じ名前の要素を選択しないよう注意してください。

      [名前]ダイアログ ボックスが表示されます。

    2. 新しい名前を入力して、[OK]をクリックします。

    たとえば、「External Storage Drive Order Form(外部ストレージ ドライブ注文フォーム」という名前のフォームにラジオ グループをドラッグ アンド ドロップし、その名前をデフォルトの「ラジオ グループ」から「Capacity in GB(容量 GB)」に変更します。 次に、そのラジオ グループ上に 3 つのラジオ ボタンをドラッグ アンド ドロップし、名前をデフォルトの「ラジオ ボタン」から「Small (50)」、「Medium (100)」、「Large (150)」にそれぞれ変更します。

    : 新しい要素を作成すると、名前の最後にコロン(:)が自動的に追加されます。 要素の名前を変更する場合、このコロンは[名前]ダイアログ ボックスには表示されません。 ただし、[OK]をクリックしてダイアログ ボックスを閉じると、プレビュー領域に表示されます。 そのため、[名前]ダイアログ ボックスでは、コロンを追加しないようにします。追加すると、プレビュー領域で名前の後に 2 のコロンが表示されます。

  13. 新しい要素が目的どおりに表示され機能することを確認します。 必要に応じて、外観および機能が目的に沿うように属性を調整します。
  14. 追加する要素ごとに、これまでの手順を繰り返します。
  15. (任意)フォーム上で 1 つまたは複数の要素を別の場所にドラッグ アンド ドロップします。たとえば、要素の順序を入れ替えることができます。
  16. (任意)不要になった要素を選択し、[削除]をクリックしてフォームから削除します。