フォーム
フォーム 【j-formnew 】
フォーム全体
<div class="n j-formnew ">
■フォームのクラス名
j-formnew
<form action="" method="post" class="cc-m-form cc-m-form-layout-0">
■formHTMLに割り当てられたクラス名
cc-m-form
cc-m-form-layout-0
<div class="cc-m-form-loading"></div>
※おそらく管理メニュー用に用意されたローディングスタート位置のタグ
<div class="cc-m-form-view-sortable">
～ この中に追加されたフォームデータが入る ～
<div class="cc-m-form-view-element cc-m-form-submit">
■送信ボタンのクラス名
cc-m-form-view-element 共通
cc-m-form-submit 送信ボタン専用
<label></label>
<div class="cc-m-form-view-input-wrapper">
送信ボタン用ラッパー
<input type="submit" value="送信" data-action="formButton"/>
</div>
</div>
<p class="cc-m-form-note">
送信前のメッセージのクラス名
cc-m-form-note
<strong>メモ:</strong>
<span class="j-m-required">*</span> は入力必須項目です
</p>
メモを変更したいのであれば
１）この部分を消して、送信ボタン側のラッパー内に、記述する。
２）javasucriptにて、この中を書き換えるしかなさそう。
</form>
JAVASCRIPT
<script id="cc-m-reg-12263254092">
// <![CDATA[
window.regModule("module_formnew", {
"selector":"#cc-m-form-12263254092",
"withinCms":false,
"templates":[],
"extraParams":
{
/* テキスト */
"text":{"width":{"type":"int","range":{"min":10,"max":100},"deflt":50}},
/* メール */
"email":{"width":{"type":"int","range":{"min":10,"max":100},"deflt":50}},
/* 日付 */
"calendar":{"width":{"type":"int","range":{"min":10,"max":100},"deflt":50}},
/* テキストエリア */
"textarea":{
"rows":{
"type":"int",
"range":{
"min":2,
"max":20
},"deflt":6
},
"width":{
"type":"int",
"range":{
"min":10,
"max":100
},"deflt":100
}
},
/* 数値 */
"number":{
"minimum":{
"type":"int",
"deflt":0
},
"maximum":{
"type":"int",
"deflt":100
}
},
/* たぶんセレクトボックスのことだと思う。。 */
"select":{ /* 複数選択の有無 初期値はなし */
"multiple":{"type":"bool","deflt":0},
"options":{"type":"list","deflt":["選択肢１","選択肢2"]}
},
/* ラジオボタン */
"radio":{"adjustment":{"type":"bool","deflt":"horizontal"},
"options":{
"type":"list","deflt":["選択肢１","選択肢2"]}},
"check":[], /*初期値はチェックを入れない */
"checkgroup":{"adjustment":{"type":"bool","deflt":"horizontal"},
"options":{"type":"list","deflt":["選択肢１","選択肢2"]}},"subheading":[],
"submit":{"buttontext":{"type":"text","deflt":"送信"}}
},
■フォームの部品のそれぞれの構造について
"structure":[
{"type":"text","label":"名前","params":{"width":"50"},
"rules":{"required":"この項目 \"{label}\"は入力が必須です。"}
},
{
"type":"email",
"label":"メールアドレス",
"params":{"width":"50"},
"rules":{"required":"1"}
},
{
"type":"calendar",
"label":"日付",
"params":{"width":"50"},
"rules":{"required":"1"}
},
{
"type":"number",
"label":"数字",
"params":{"minimum":"0","maximum":"100"},
"rules":{"required":"1"}
},
{
"type":"select",
"label":"ドロップダウンリスト",
"params":{"multiple":"0","options":["リスト１","リスト２"]},
"rules":{"required":"1"}
},
{
"type":"radio",
"label":"ラジオボタン",
"params":{"adjustment":"horizontal","options":["選択肢１","選択肢2"]},
"rules":{"required":"1"}
},
{
"type":"check",
"label":"シングルチェックボックス",
"params":[],
"rules":{"required":"1"}
},
{
"type":"checkgroup",
"label":"複数チェックボックス",
"params":{"adjustment":"horizontal","options":["選択肢１","選択肢2"]},
"rules":{"required":"1"}
},
{
"type":"subheading",
"label":"カテゴリータイトル",
"params":[],
"rules":[]
},
{
"type":"textarea",
"label":"メッセージ",
"params":{"rows":"6","width":"100"},
"rules":{"required":"この項目 \"{label}\" は入力が必須です。"}
}
], //構造について終了
"moduleIdObfuscated":"mb4c540bdb3900099",
"websiteIdObfuscated":"scbb64fe79673531b",
"ruleMessages":{"required":"この項目 \"{label}\" は入力が必須です。",
"email":"有効なメールアドレスを入力してください"
},
"deflt":{
"type":"text",
"label":"新しい項目",
"params":{"width":50},
"rules":{"required":"この項目 \"{label}\" は入力が必須です。"}
},
"defltByType":{
"text":{"width":50},
"email":{"width":50},
"calendar":{"width":50},
"textarea":{"rows":6,"width":100},
"number":{"minimum":0,"maximum":100},
"select":{"multiple":0,"options":["選択肢１","選択肢2"]},
"radio":{"adjustment":"horizontal","options":["選択肢１","選択肢2"]},
"check":[],
"checkgroup":{"adjustment":"horizontal","options":["選択肢１","選択肢2"]},
"subheading":[],
"submit":{"buttontext":"送信"}
},
"elementsWithNoInput":["subheading","submit"],
"buttontext":"送信",
/* ラベル全体 */
"labels":{
"text":"テキストエリア",
"email":"メールアドレス",
"calendar":"日付",
"textarea":"メッセージエリア",
"number":"数字",
"select":"ドロップダウンリスト",
"radio":"ラジオボタン",
"check":"シングルチェックボックス",
"checkgroup":"複数チェックボックス",
"subheading":"カテゴリータイトル"
},
"id":01234567890 /* このフォームのID */
}
);
// ]]>
</script>
</div>
</div>
</div>
</div>
テキスト
<div class="cc-m-form-view-element cc-m-form-text cc-m-required">
cc-m-form-view-element 共通
cc-m-required 共通
<label><div>名前</div></label>
<div class="cc-m-form-view-input-wrapper">
<input type="text" value="" style="width: 50%;"/>
※テキストフォームにはクラス名は当てていない
</div>
</div>
メールアドレス
<div class="cc-m-form-view-element cc-m-form-email cc-m-required">
<label><div>メールアドレス</div></label>
<div class="cc-m-form-view-input-wrapper"> 共通
<input type="email" autocorrect="off" autocapitalize="off" value="" style="width: 50%;" />
※フォームには、クラス名はあたっていない。
■メールフォーム属性
type="email" emailを指定
autocorrect="off" autocorrectをオンにしたら候補が出てくるのだろうか？
autocapitalize="off" 文字の頭文字を大文字に変換しない
value="" テキスト欄は空
style="width: 50%;" 幅指定（ここでは50%)
</div>
</div>
日付
<div class="cc-m-form-view-element cc-m-form-calendar cc-m-required">
<label><div>日付</div></label>
<div class="cc-m-form-view-input-wrapper">
<input type="text" value="" style="width: 50%;" />
※日付は、タイプ属性がtextだった。
</div>
</div>
数値
<div class="cc-m-form-view-element cc-m-form-number cc-m-required">
<label><div>数字</div></label>
<div class="cc-m-form-view-input-wrapper">
<label class="cc-m-ui-numeric">
<div class="cc-m-input-wrapper">
<div class="cc-m-input-numeric cc-spinner">
<div class="cc-spinner-input-wrapper">
<input type="text" autocomplete="off" name="number" value="0" data-min-value="0" data-max-value="100" class="cc-spinner-input"/>
</div>
<div class="cc-spinner-control">
<a data-action="arrow" data-params="up" class="cc-spinner-plus" href="javascript:;" tabindex="-1"><span>+</span></a>
<a data-action="arrow" data-params="down" class="cc-spinner-minus" href="javascript:;" tabindex="-1"><span>-</span></a>
</div>
</div>
</div>
</label>
</div>
</div>
ドロップダウンリスト
<div class="cc-m-form-view-element cc-m-form-select cc-m-required">
<label><div>ドロップダウンリスト</div></label>
<div class="cc-m-form-view-input-wrapper">
<select class="cc-m-form-element-input">
<option value="リスト１">リスト１</option>
<option value="リスト２">リスト２</option>
</select>
</div>
</div>
ラジオボタン
<div class="cc-m-form-view-element cc-m-form-radio cc-m-required">
<label><div>ラジオボタン</div></label>
<div class="cc-m-form-view-input-wrapper">
<div class="cc-m-form-element-input cc-m-form-checkable-horizontal">
<div>
<label>
<input type="radio" value="選択肢１"/><span>選択肢１</span>
</label>
</div>
<div>
<label>
<input type="radio" value="選択肢２"/><span>選択肢２</span>
</label>
</div>
</div>
</div>
</div>
シングルチェックボックス
<div class="cc-m-form-view-element cc-m-form-check cc-m-required">
<label><div>シングルチェックボックス</div></label>
<div class="cc-m-form-view-input-wrapper">
<input type="checkbox" value="1" />
</div>
</div>
複数チェックボックス
<div class="cc-m-form-view-element cc-m-form-checkgroup cc-m-required">
<label><div>複数チェックボックス</div></label>
<div class="cc-m-form-view-input-wrapper">
<div class="cc-m-form-element-input cc-m-form-checkable-horizontal">
<div>
<label>
<input type="checkbox" value="選択肢１" accept="" /><span>選択肢１</span>
</label>
</div>
<div>
<label>
<input type="checkbox" value="選択肢２" accept="" /><span>選択肢２</span>
</label>
</div>
</div>
</div>
</div>
カテゴリタイトル
<div class="cc-m-form-view-element cc-m-form-subheading">
<label><div>カテゴリータイトル</div></label>
<div class="cc-m-form-view-input-wrapper"></div>
</div>
メッセージ
<div class="cc-m-form-view-element cc-m-form-textarea cc-m-required">
<label><div>メッセージ</div></label>
<div class="cc-m-form-view-input-wrapper">
<textarea rows="6" style="width: 100%;"></textarea>
</div>
</div>