第2章 単純なフォームの作成
概要
このチュートリアルでは、以下の実行方法を説明します。
- フォームの作成
- フィールドのフォームへの追加
要件
- App Studio アカウント
2.1. チュートリアル
2.2. ステップ 1: ログイン
認証情報を使って Studio にログインします。
2.3. ステップ 2: フォームの作成
「フォームビルダー」タブをクリックします。フォーム画面が表示されます。フォームがすでに作成されている場合は、それらのフォームがここに表示されます。複数のフォームが作成されている場合、検索ボックスを使用してフォームを検索したり、一覧表示のフォーマットを変更して一度により多くのフォームを表示できるようにしたりできます。フォームが存在しない場合やユーザーにすでに作成されたフォームを参照するための十分な権限がない場合には、「フォームが見つかりません」というメッセージが表示されます。
フォームを選択すると、フォームのダッシュボードが表示されます。このダッシュボードから、選択したフォームについての詳細情報にアクセスできます。この情報には、以下が含まれます。
- このフォームを使用したプロジェクト
- 今日提出する (Submissions Today)
- 送信合計
- ページ
- サブスクライバー
新規フォームを作成するには、「新規フォーム」ボタンをクリックします。
フォーム作成ウィンドウが表示されます。ここでは、フォームテンプレートの選択とフォーム名の入力を求めるプロンプトが表示されます。オプションでフォームの説明を含めることができます。
数多くのフォームテンプレートから選択することができます。これらのテンプレートのいずれかをクリックすると、フォームのプレビューが表示されます。事前に作成されたフォームを使用したくない場合は、「B lank Form」テンプレートを選択します。
テンプレートを選択しても、これをそのままフォームとして使用しなければならないという訳ではありません。テンプレートはフォーム作成の開始時に使用し、編集することができます。
2.4. ステップ 3: フォームの編集
フォームを編集するには、まず該当フォームを一覧から選択します。フォームを選択すると、フォームのプレビューがフォームメニューと共に画面に表示されます。
新規に作成されたフォームが選択されている場合、フォームのプレビューは、フォームのタイトル以外は空白で表示されます。これはフィールドがフォームにまだ追加されていないためです。
サイドバーからフォームを編集を選択します。これにより、「フォームを編集」画面が表示されます。ここからフィールドをフォームに追加できます。フィールドのフォームへの追加は、ドラッグアンドドロップと、単純に追加したいフィールドをクリックする 2 つの方法のいずれかで実行できます。
フィールドをフォームに追加する際、フィールドをクリックするとこれがフォームの末尾に追加されます。フィールドのドラッグアンドドロップの場合は、フォームの任意の場所にフィールドを配置できます。フィールドはフォームに追加した後に、ドラッグアンドドロップで移動できます。
フィールドをクリックしてフォームに追加します。フィールドが追加されると、フォームのプレビューは自動的に更新されます。すべてのフィールドは、フォームに追加されると自動的に「Untitled」というラベルが付けられ、「Required」値が適用されます。
「Required」属性によって、フォームの提出にフィールドへの値の入力が必要かどうかが決まります。「Required」属性がフィールドに追加されている場合は、フォームの提出前に値が該当フィールドに入力または選択されている必要があります。
Number フィールドをフォームに追加します。追加後にプレビューでこのフィールドをクリックします。その後に新規メニューが表示されます。
ここから、選択したフィールドに関連する各種の属性を設定できます。これらには、フィールド名、追加の指示、入力可能な最大/最小値の制限などが含まれます。
各フィールドにはそれぞれ固有の設定オプションがあります。たとえば、テキストフィールドには、入力可能な最大文字セット数の設定オプションがありますが、写真のアップロードフィールドにはアップロード可能な最大ファイルサイズの設定オプションがあります。
「Number」フィールドの属性を以下のように設定します。
- Name: Number field
- Instructions: Please enter your mobile number
ここで Text フィールドをフォームにドラッグして追加します。Text フィールドが Number フィールドの上に置かれるようにこのフィールドの位置を変更します。これを実行するには、Text フィールドを Number フィールドの上にドラッグしてからリリースします。
Text フィールドを選択し、名前を「Name」に設定します。
フォームを保存します。
フォームが正常に作成され、プロジェクトへの関連付けが可能になりました。

Where did the comment section go?
Red Hat's documentation publication system recently went through an upgrade to enable speedier, more mobile-friendly content. We decided to re-evaluate our commenting platform to ensure that it meets your expectations and serves as an optimal feedback mechanism. During this redesign, we invite your input on providing feedback on Red Hat documentation via the discussion platform.