--- title: "基本要素" slug: "the-basic-elements" abstract: "フォーム作成によく使われる要素の概要:テキスト、ファイルアップロード、番号、単行テキスト、多行テキスト、メール、電話、チェックボックス、日付。" --- # 基本要素 テキスト、メール、電話などフォームでよく使われる要素は、**フォーム要素**ペインの**基本**セクションにまとめられています。これらの要素はフォーム**要素**ペインの**一般**タブからフォームキャンバスにドラッグすると、フォームフィールドとなり、編集できます。 ## 本文 テキスト要素を使ってフォームにテキストフィールドを追加してください。この要素をフォームのタイトルに使って目的を述べることができます。例えば、キャリア問い合わせフォームやお問い合わせフォームなどです。 セクション アイテム 概要 詳細 本文 例えば、フォームのタイトルにテキスト要素を追加するときに現れるテキストです。 フィールド名 元素の名前。 HTMLタグ テキスト用のHTMLタグを選択します。タグを追加するには、sitecore/System/Settings/Forms/Meta Data/Text Tagsへ行ってください。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ## 番号 数字の要素を使って数字を入力するフィールドを追加してください。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 要素名。フィールド名には必ず意味のある名前を使わせてください。フィールド名はフォームフィールドのSitecore定義アイテムの実際のアイテム名です。 デフォルト値 初期価値。 プレースホルダーテキスト 期待値を説明するためのヒントとして機能するフォームフィールド内のテキスト。プレースホルダーテキストは、連絡先がフィールドをクリックすると消えます。例えば、ここにファーストネームを入力してください。 最小値 最小値を決定します。入力がこのフィールドで指定された値より低い場合、コンタクトは検証エラーメッセージを表示します。 最大価値 最大値を決定します。入力がこのフィールドで指定された値より大きい場合、交接者は検証エラーメッセージを表示します。 ステップ 例えば、連絡先に偶数だけを埋めたい場合は、数値区間を指定します。デフォルト値は1です。 検証 フィールド検証 フィールド検証が適用されるかどうかを決定します。 フィールドの重要性 訪問者が項目を記入しなければならないかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 ## 単行テキスト 単行テキスト要素を使って、テキストを1行入力するフィールドを追加してください。例えば、名前入力欄の場合などです。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 元素の名前。 デフォルト値 初期価値。 プレースホルダーテキスト 期待値を説明するためのヒントとして機能するフォームフィールド内のテキスト。連絡先がフィールドをクリックすると、プレースホルダーテキストは消えます。例えば、ここにファーストネームを入力してください。 最小テキスト長 単行テキスト要素の入力フィールドの最小テキスト長を決定します。入力がこのフィールドに指定された文字数より短い場合、コンタクトは検証エラーメッセージを表示します。 最大テキスト長 単行テキスト要素の入力フィールドの最大テキスト長さを決定します。入力がこのフィールドに指定された文字数を超える場合、連絡先は検証エラーメッセージを表示します。 検証 フィールド検証 フィールド検証が適用されるかどうかを決定します。 フィールドの重要性 連絡先が欄を埋める必要があるかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 ## 複数行テキスト 複数行テキスト要素を使って、複数の行を入力できるフィールドを追加してください。この要素は、住所やコメント、説明などの長い回答にも使えます。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 元素の名前。 デフォルト値 初期価値。 プレースホルダーテキスト 期待値を説明するためのヒントとして機能するフォームフィールド内のテキスト。プレースホルダーテキストは、連絡先がフィールドをクリックすると消えます。例えば、ここにファーストネームを入力してください。 行数 利用可能な回数を決定します。 最小テキスト長 複数行テキスト要素の入力フィールドの最小テキスト長を決定します。入力がこのフィールドに指定された文字数より短い場合、連絡先は検証エラーメッセージを表示します。 最大テキスト長 複数行テキスト要素の入力フィールドの最大テキスト長を決定します。入力がこのフィールドに指定された文字数を超えると、連絡先は検証エラーメッセージが表示されます。 検証 フィールド検証 フィールド検証が適用されるかどうかを決定します。 フィールドの重要性 連絡先が欄を埋める必要があるかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 ## メール メール要素を使って、メールアドレスを入力するフィールドを追加してください。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 元素の名前。 デフォルト値 初期価値。 プレースホルダーテキスト 期待値を説明するためのヒントとして機能するフォームフィールド内のテキスト。連絡先がフィールドをクリックすると、プレースホルダーテキストは消えます。例えば、ここにファーストネームを入力してください。 最小テキスト長 メール要素の入力フィールドの最小テキスト長さを決定します。連絡先は入力がこのフィールドに指定された文字数より短い場合、検証エラーメッセージが表示されます。 最大テキスト長 メール要素の入力フィールドの最大テキスト長を決定します。連絡先は、入力がこのフィールドに指定された文字数を超えると検証エラーメッセージが表示されます。 検証 フィールド検証 フィールド検証が適用されるかどうかを決定します。オプションは **Email Validator** または **String Length Validatorです。** フィールドの重要性 連絡先が欄を埋める必要があるかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 ## 電話 電話要素を使って、電話番号を入力するフィールドを追加します。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 元素の名前。 デフォルト値 初期価値。 プレースホルダーテキスト 期待値を説明するためのヒントとして機能するフォームフィールド内のテキスト。連絡先がフィールドをクリックすると、プレースホルダーテキストは消えます。例えば、ここにファーストネームを入力してください。 最小テキスト長 最小テキスト長を決定します。入力がこのフィールドで指定された文字数より短い場合、連絡先は検証エラーメッセージを表示します。 最大テキスト長 最大テキスト長を決定します。入力がこのフィールドで指定された文字数を超えると、連絡先は検証エラーメッセージを表示します。 検証 フィールド検証 フィールド検証が適用されるかどうかを決定します。オプションは **電話番号検証器** または **文字列長検証器です。** フィールドの重要性 連絡先が欄を埋める必要があるかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 ## チェックボックス チェックボックス要素を使って、ユーザーがオプションを切り替えたり選択したりできるチェックボックスを表示してください。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 元素の名前。 確認済み デフォルトで事前選択されているチェックボックスの値を決定します。 検証 フィールドの重要性 連絡先が欄を埋める必要があるかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 ## 日付 Date要素を使って日付を入力するフィールドを追加してください。 セクション アイテム 概要 詳細 レーベル 特定のフォーム欄が求めている情報が何を求めているかを連絡先に伝えるキャプション。 フィールド名 元素の名前。 選択日 デフォルトで選ばれた日付を指定します。 開始日 開始日を指定します。 終了日 日付範囲の終了日を指定します。 検証 フィールドの重要性 連絡先が欄を埋める必要があるかどうかを示します。オプションは **任意** または **必須**です。 スタイリング CSSクラス フィールドのCSSクラスを定義します。 ラベル用のCSSクラス ラベルのCSSクラスを定義します。 詳細設定 セーブを許可します フォーム提出時に入力済みフィールドデータの保存を有効または無効にします。 > !注Sitecoreフォームは日付フィールドを HTML5要素。この要素はIE11およびMac OSのSafariブラウザではサポートされていません。これらのブラウザで日付フィールドとdatetime picker要素を取得するには、[カスタム要素の実装](https://doc.sitecore.com/xp/en/developers/91/sitecore-experience-manager/en/walkthrough--creating-a-custom-form-element.html)を検討してください。