2019年12月23日

A-Formのデザインカスタマイズ:必須入力項目を目立たせよう

A-Form, A-Member, A-Reserve(MTプラグイン) 

投稿者 小森

この記事は A-Form Advent Calendar 2019 参加記事です。

ドキュメントに掲載しそびれていた小ネタを紹介します。
入力画面で「必須かどうか」を判定する「is_necessary」があります。

<mt:loop name="fields"> の中であれば


<mt:if name="is_necessary">(必須の場合表示)</mt:If>

というように使用できます。

テンプレート記述例

このis_necessaryを入力画面のテンプレート(aform_form.tmpl)で下記のように使うと、
必須入力項目だけにclassをつけることができます。


<mt:else><mt:Ignore>&lt;!-- 見出し, コメント・注釈パーツ以外 --&gt;</mt:Ignore>
<dl class="dl_<mt:var name="parts_id" escape="html"><mt:if name="is_necessary"> necessary</mt:If>"> ★←ココ
  <dt><mt:AFormFieldLabel aform_id="$aform_id" parts_id="$parts_id">
  <mt:AFormFieldValidation aform_id="$aform_id" parts_id="$parts_id"></dt>
  <dd><mt:AFormFieldInputExample aform_id="$aform_id" parts_id="$parts_id">
      <mt:AFormFieldInput aform_id="$aform_id" parts_id="$parts_id">
      <mt:AFormFieldError aform_id="$aform_id" parts_id="$parts_id"></dd>
</dl>

CSS記述例


.aform-content dl {
    margin: 0.125em 0;
    padding: 0.5em 0;
    display: flex;
    border-bottom: 1px dotted #ccc;
}
.aform-content dl dt {
    font-weight: bold;
    width: 35%;
    border-right: 5px solid #ccc;
    margin-right: 2.5%;
    background: #f0f0f0;
    padding: 10px;
}
.aform-content dl dd {
    margin: 0 0 0.5em;
    width: 65%;
}
.aform-content dl.necessary dt {
    border-right-color: #D92B00;
}

表示例

aform20191223_02.png

色面積が増えると、わかりやすくなりますね。
お試しください!

投稿者 小森 : 18:08

その他の記事

アークウェブ移転のおしらせ

  • 2006年10月25日
  • 投稿者 : 小森

Movable Type用高機能メールフォーム生成プラグイン A-Formの詳細へ
Movable Type用会員限定サイトプラグイン A-Memberの詳細へ
Movable Type用予約サイト構築プラグイン A-Reserveの詳細へ
ARK-Web×CSR(企業の社会的責任)

アークウェブの本

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

Zen Cartによるオンラインショップ構築・運用テクニック―オープンソース徹底活用

内容充実のZen Cart公式本(v1.3対応)がついに発表です。アークウェブのスタッフをはじめZen-Cart.JPの中心メンバーが共著で執筆しました。続きを読む

Movable Type プロフェッショナル・スタイル

Movable Type プロフェッショナル・スタイル

ビジネスサイト構築におけるCMSとしてのMTの活用方法について、豪華執筆陣による実践的MT本です。八木が共著で執筆しました。続きを読む

Web屋の本

Web屋の本

Web 2.0時代の企業サイトの構築・運用などの戦略を考える「Web屋の本」 (技術評論社)を、中野・安藤が執筆しました。続きを読む

新着はてブ

Loading

アーカイブ

応援しています

  • キッズ・セーバー
  • ソロモン・リリーフ ─ソロモン諸島を応援する有志による、震災復興支援プロジェクト─

    (終了しました)

RSS配信

 

サービスおよびソリューション一覧


最新情報・投稿をチェック


このページのトップに戻る

Photo by A is for Angie

Powered by Movable Type Pro 6.3.8