項目のHTMLタグの属性を編集したい

  • 更新

クライゼルのフォーム機能では、フォームの入力欄部分として下記のようなHTMLタグは自動で生成されます。
(※デザインタイプの場合は差込記号の設置が必要)

そのHTMLタグの「属性」を編集する場合についてご説明します。

入力欄に対して、他項目と異なるCSSを適用したり、Javascriptを適用する際などに活用できます。

テキスト <input type="text" name="e_*" id="e_*" value="" size="30" />
メールアドレス <input type="text" name="e_*" id="e_*" value="" size="40" />
郵便番号 <input type="text" name="e_*[zip1]" id="e_*[zip1]" value="" size="3" maxlength="3" />-<input type="text" name="e_*[zip2]" id="e_*[zip2]" value="" size="4" maxlength="4" />

上記中の*部分はフォーム項目ID

ご注意
  • 各属性の値は、HTML記述ルールに反しないよう設定ください。
    id・class名のルール例)
    • 半角英数字と、記号は「-」(ハイフン)「_」(アンダースコア)のみを使用する。
    • 先頭文字に数字や記号を使用しない。
    • idの値は、ページ内で重複してはいけない。
  • 実際の動作を充分にテストしてご利用ください。

操作手順

1 [フォーム]>[フォーム設定]を選択します。
[データベース一覧]画面が表示されます。

2 対象となるデータベース名称の[フォーム一覧]をクリックします。
[フォーム一覧]画面が表示されます。

3 対象となるフォームの[項目]をクリックします。
[フォーム項目の設定]画面が表示されます。

4 各項目の[設定]を開くと、各項目の項目設定が表示されますので、その下段の方にある[HTMLタグの属性の設定]を設定します。

[HTMLタグの属性の設定]画面(メールアドレス項目の例)attr_01.jpg

[その他属性]では属性名と属性値を指定できます。
例えば placeholder="例)test@tricorn.co.jp"という入力例のplaceholderを指定したい場合は、[属性名]に placeholder 、[属性値]に 例)test@tricorn.co.jp というように指定してください。

[追加]ボタンで、属性入力欄を追加できます。

項目種別ごとに仕様が異なる点

メールアドレス
  • 確認用項目について、適用される属性は基本は同一となります。
    確認用項目のidには末尾に _re が付与されます。
パスワード
  • 確認用項目について、適用される属性は基本は同一となります。 ただし、確認用項目のidには末尾に _re が付与されます。
  • 『パスワード(認証用)』または『パスワード(再発行用)』については、別途で属性を設定可能
単一選択・性別・未既婚・はい/いいえ
  • [表示スタイル]にてドロップダウンリストとラジオボタンのいずれかを選択することによって、設定画面が可変します。
  • ドロップダウンリスト時には、selectタグとoptionタグに対して属性設定できます。
  • ラジオボタン時にはinputタグとlabelタグに対して設定できます。
  • idに指定した値は、選択肢のidがユニークになるように末尾に_と選択肢IDが追加されます。
    例)
    attr_03.jpg
複数選択
  • [表示スタイル]にてドロップダウンリストとチェックボックスのいずれかを選択することによって、設定画面が可変します。
  • ドロップダウンリスト時には、selectタグとoptionタグに対して属性設定できます。
  • チェックボックス時にはinputタグとlabelタグに対して設定できます。
  • idに指定した値は、選択肢のidがユニークになるように末尾に_と選択肢IDが追加されます。(単一選択の画像で示した内容と同様です)
日付
  • [表示スタイル]にてドロップダウンリストとテキスト入力のいずれかを選択することによって、設定画面が可変します。
  • ドロップダウンリスト時には、selectタグとoptionタグに対して属性設定できます。
都道府県
  • ドロップダウンリスト時には、selectタグとoptionタグに対して属性設定できます。
  • ドロップダウンリストの「分割表示」を選択している時には、selectタグが地域ごとに分割されます。
    画像のようにselectタグにidを指定した際には指定値の後ろに[1]~[6]の値がつきます。
    attr_04.jpg
電話番号
  • 「テキスト入力(分割)」選択時、分割されたテキストボックスには原則同じ属性が適用されます。
  • この機能でplaceholderを指定する場合は、「テキスト入力(一括)」の表示スタイルをご利用ください。
  • id属性についてはそれぞれ[tel1]、[tel2]、 [tel3]が末尾に付与されます。
郵便番号
  • テキスト入力(分割)選択時、分割されたテキストボックスには原則同じ属性が適用されます。
  • id属性についてはそれぞれ[zip1]、[zip2]が末尾に付与されます。
  • 郵便番号辞書検索ボタンの属性についても設定可能です。
    attr_05.jpg
画像投稿項目
  • アップロードボタンとキャンセルチェックボックスに対して属性の指定が可能です。

5 それぞれ設定が完了したら[次へ→]をクリックして確認画面へ進み、[実行→]をクリックして設定を更新します。
フォーム上で表示される項目名です。データベース項目の項目名を必要に応じて変更します。

参考

データベースを複製、フォームをコピーした場合も、設定値は引き継がれます。