フォームのデザインについてはなんとかしたいと思っていますので、お教えいただければ対応いたします。

DIVタグにクラスやIDを設定すると、CSSでデザインを変更できることはわかります。ただ、デザインの自由度の幅を広げるために、どのようにDIVタグでくくればいいのかなどのノウハウがありません。

また、Concrete5の多くのマーケットプレースなどで提供されているデザインテンプレートを利用した時でも、そのテーマでデザインが変わることが望ましいと思います。すると、標準化されたIDを付けるべきだと思います。そのような仕組みなのかどうかもわかりませんが。

また、関係あるのかどうなのかもわかっていないのですが、ブロック毎にテンプレートが定義できますが、そのテンプレートでもデザイン変更ができるのではと思って調べています。

ぼちぼち勉強しますが、教えていただければ早く対応できます。

とりあえずこうしてくれないか、ということであれば、具体的にここにDIVタグをいれて、この名称のIDを付加してほしいと具体的に言っていただければ対応します。

masnogさんへ


確認画面と送信後画面のことをおっしゃられているのではないかと思うのですがあっていますでしょうか？

お手数ですが、僕もよくわかっていなくて・・・・すみません。
そこで３つのファイルを添付させていただきました。
それぞれ、formタグの中身のみを取り出したものです。できればこのファイルに書き加えてアップしていただけませんでしょうか？そうすればわかりやすいと思います。よろしくお願いします。


tomoacさんへ

現在のブロックは次期バージョンの5.4.2では動きません。
jquery関係の仕様変更が問題のようです。
その他いろいろ教えていただきたいこともございますので、
一度二人ででも、お会いするかして勉強会をしませんか？
ご返事待っています。

すみません。
先の書き込みをするさいに書き込みがあることに気付きました。
お手数でした。

勉強会の件
すみません。実はいまの会社を辞めることにしたので時間もあったのですが、新しいところに仕事を持っていって引き継ぐことになりそこでしばらくお手伝いすることになったことがあり、ちょっと時間がとれません。８月中旬以降になったら落ち着くかもしれません。
バグ修正等は、逆に気分転換として適当な時間なので対応はさせていただいてます。

具体的にご指摘いただいたところを修正しました。

ご指摘の後、ソースを見ていましたら、ご指摘の意味がわかりました。

Version 1.5.7 としてリリースします。
http://concrete5.tomo.ac/osusumeblock/form/

id="msg"は、エラーメッセージなので、エラーでないメッセージ用に、id="msg2" にしました。

classの指定は必要ですか？
私には意味や用途が分からないもので。

いえ、すみませんでした。余計なことをしてしましまいた。
ひとつmsgはmsgとmsg2に分けるのが気になりました。
たとえば errormsg と checkmsgとするなど分かりやすい名前をつけることが必要ですよーーー。
参考にしてください。

そうですね。
ただそういう細かいことより、テンプレート対応が必要だとわかりました。

フォーム用のアドオン、"Form Tableless Layout"というのを見つけました。
これをインストールするとフォームのタグが<div>タグになります。

これ、別のスレッドにします。

tomoac様

テーマの変更に拡張フォームブロックの外観も統一するためには、
標準フォームブロックの構造やクラスを継承するのが一番だと思います。
なぜなら、標準のフォームブロックで使用されているクラスやIDのスタイルであれば
テーマ内のcssで指定されている可能性が高いからです。

標準フォームブロックの構造、クラス、IDをまとめてみました。
1.先頭にアンカータグを配置
2.アンカー以下のブロック全体をformブロックで囲んでいる
　formのIDは "miniSurveyView"+bID 、クラスは"miniSurveyView"
3.目に見えるフォーム要素はテーブル内に配置
　tableにはクラス"formBlockSurveyTable"を指定
4.左のtd（class="question"）に質問の見出しを表示
　右のtd（classなし）にフォーム要素を配置
5.テーブル最下行の右側tdに、submitボタンを配置
6.完了やエラーメッセージはform最上部にdivタグ（id="msg"）内に配置
7.エラーメッセージはさらにdivタグ（class="error"）で囲まれている

拡張フォームブロックは標準フォームブロックをベースに開発されているので
上記のほとんどはそのままなのですが、独自に拡張された部分がこれらのルールから
はずれている箇所があります。

それが前回あげさせていただいた、以下の2点です。
・id="msg"が指定されていないメッセージがある
・送信等のボタンがテーブル内に配置されていない。

また、今回"msg2"というidを増やされましたが、そうではなく(7)のように
エラーメッセージをdivタグ（class="error"）で囲むのがベターです。

ちなみにIDとクラスについてですが、機能は似ていますが、その違いは、
IDはページ内で必ずユニークな要素ですが、クラスの方は同じクラスの要素が
複数あっても構わないモノです。
今、"msg"はidで指定していますが、本来はクラスで指定するべきだろうと思います。

以上、よろしくお願いいたします。

7/15の投稿で、
1.メッセージのdivタグに"msg"クラスが指定されていない
は
1.メッセージのdivタグにid="msg"が指定されていない
の間違いでした。

ややこしいことで申し訳ありません。

ご教示ありがとうございます。

すみません。結果、どうなんでしょう？

>拡張フォームブロックは標準フォームブロックをベースに開発されているので
>上記のほとんどはそのままなのですが、独自に拡張された部分がこれらのルールから
>はずれている箇所があります。
>
>それが前回あげさせていただいた、以下の2点です。

これは解決しましたでしょうか？


＞また、今回"msg2"というidを増やされましたが、そうではなく(7)のように
＞エラーメッセージをdivタグ（class="error"）で囲むのがベターです。

msg2は、エラーでなく単なるメッセージなので、エラーと同じにはしなかったのですが、divタグ（class="error"）で囲むほうがいいでしょうか。


＞ちなみにIDとクラスについてですが、機能は似ていますが、その違いは、
＞IDはページ内で必ずユニークな要素ですが、クラスの方は同じクラスの要素が
＞複数あっても構わないモノです。
＞今、"msg"はidで指定していますが、本来はクラスで指定するべきだろうと思います。

classで範囲を限定することで、同じネイ省のID名の重複を避けるということでしょうか。

tomoac様

1.5.7確認をいたしました。
ちなみに修正の観点は、標準フォームブロックの構成に近づけることであって
良い悪いとは別問題だということをご承知ください。

>これは解決しましたでしょうか？
　ありがとうございます、ほぼOKなのですが、ボタンを配置する最下行のtrにtdがひとつになっているのと、
　不要なbrタグがはいっています。
<tr>
<td colspan="2"><input type="hidden" name="state" value="2"><br />
<input class="formBlockSubmitButton" name="Submit" type="submit" value="送信する" />
<input class="formBlockSubmitButton" name="Submit" type="submit" value="戻って修正する" /></td>
</tr>
　　　　　　　　↓
<tr>
<td> </td>
<td>
<input class="formBlockSubmitButton" name="Submit" type="submit" value="送信" />
<input class="formBlockSubmitButton" name="Submit" type="submit" value="戻って修正する" />
</td>
</tr>

>msg2は、エラーでなく単なるメッセージなので、エラーと同じにはしなかったのですが、
>divタグ（class="error"）で囲むほうがいいでしょうか。
　
　メッセージを囲むdivのIDは"msg2"→"msg"に変更して欲しいです。
　そうでないと、id="msg2"へのcssスタイルをテーマに追加する必要が発生します。

　メッセージのhtml構成は以下のように整理されればよろしいかと
　<div id="msg">
　　ここに普通のメッセージ
　　<div class="error">ここにエラーメッセージ</div>
　　<div class="error">ここにエラーメッセージ２</div>
　</div>

>classで範囲を限定することで、同じネイ省のID名の重複を避けるということでしょうか。
　いえ、IDは必ず一意でなければならないのに、"msg"なんてありきたりな名前をつけるのは
　重複する可能性が高いため不適切なID名だと思っています。
　concrete5的には、formのid "miniSurveyView"+bID のように bID を加えたID名にする
　のがベターかなと思います。

＞　ありがとうございます、ほぼOKなのですが、ボタンを配置する最下行のtrにtdがひとつになっているのと、
＞　不要なbrタグがはいっています。

ボタンの行はカラムが１列がいいと思って、colspan=2にしてtdを一つにしました。教えていただいたようにすると、ボタンが右に寄りますが、それがいいという意味でしょうか。

brはとります。

＞　メッセージを囲むdivのIDは"msg2"→"msg"に変更して欲しいです。
＞　そうでないと、id="msg2"へのcssスタイルをテーマに追加する必要が発生します。

評判の悪い、msg ですが、元のソースがmsgだったのでそのままにしています。
変更すると、formとの互換性に問題が出るかと思っていてそのままにしています。

msg2 のことはわかりました。エラーは<div class="error">で見た目が変えられるんですね。msg2, msg3 もmsg にします。


直接関係ありませんが、このさい教えてほしいですが、一口でいえばclassとidはどういう基準で使い分けるんですか？

>ボタンの行はカラムが１列がいいと思って、colspan=2にしてtdを一つにしました。
>教えていただいたようにすると、ボタンが右に寄りますが、それがいいという意味でしょうか。

どちらがよいとかではなく、最初の送信フォームのボタン配置がそうなっているので
統一するならという程度の理由です。

>評判の悪い、msg ですが、元のソースがmsgだったのでそのままにしています。
>変更すると、formとの互換性に問題が出るかと思っていてそのままにしています。

はい、　標準フォームとの互換性のために、そのままにするほうがよいと思います。

>msg2 のことはわかりました。エラーは<div class="error">で見た目が変えられるんですね。

はい、ちなみに私はcssで、クラスがerrorなdivは赤く強調した表示に指定しています。

>直接関係ありませんが、このさい教えてほしいですが、一口でいえばclassとidはどういう基準で使い分けるんですか？

まず、idとクラスの違いは、先に述べたとおりidはページ内で一意でなければなりません。
そのため、idはページ内に必ず一度しか現れない要素に指定します。
例）ヘッダー、フッター、サイドバーなど．．．
複数表れる要素にidを指定する場合は、重複しないシリアル番号を付加したid名にします。
例）msg0001, msg0002...

で、具体的にどのような違い（効果）があるかというと
1.スタイルシートでの優先順位(重み付け)が違い、idでの指定が最優先です。
　局所的にスタイルを変更したいような場合には、idを使うことがよくあります。
2.idを指定することで、javascriptなどで要素を一発で取り出し可能です。
　値の読み書きや、表示のオンオフをしたい要素には、よくidを指定します。
3.idはページ内の位置指定にも使えます。<a href="#header">ページ先頭へ</a>

このような効果が欲しい場合にはidを使います。