ユーザーが対話したい大陸のグループを選択できるようにするために使用している小さなフォームがあります。私のフォームはこのように定義されています
search_form = form.Form(
form.Textbox('search_country', description='Country', placeholder='Country to search'),
form.Checkbox('search_continent', value='Africa'),
form.Checkbox('search_continent', value='Antarctica'),
form.Checkbox('search_continent', value='Asia'),
form.Checkbox('search_continent', value='Australia'),
form.Checkbox('search_continent', value='Europe'),
form.Checkbox('search_continent', value='North America'),
form.Checkbox('search_continent', value='South America'),
)
チェック ボックス スライダーを作成するために Twitter Bootstrap スイッチを使用しているため、このチュートリアルを使用して要素を個別にレンダリングします(以下の期待される出力)。
これは次のように行われます。
sidebarsearch_form = search_form()
countrySearch = sidebarsearch_form.search_country.render()
continentSearch = sidebarsearch_form.search_continent.render()
formhtml = unicode(render.searchform(searchcountry=countrySearch, searchcontinent=continentSearch))
私のテンプレートは次のようになります
$def with (searchcountry,searchcontinent,form='')
<form method="GET" id="search-form">
<fieldset class="fieldset-grp">
<label>Country</label>
<div class="form-search">
<div class="input-append">
$:searchcountry[0]
</div>
</div>
<label>Continent</label>
<div class="make-switch span11" data-on="success" data-text-label="Africa" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
<div class="make-switch span11" data-on="success" data-text-label="Antarctica" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
<div class="make-switch span11" data-on="success" data-text-label="Asia" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
<div class="make-switch span11" data-on="success" data-text-label="Australia" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
<div class="make-switch span11" data-on="success" data-text-label="Europe" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
<div class="make-switch span11" data-on="success" data-text-label="North America" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
<div class="make-switch span11" data-on="success" data-text-label="South America" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
$:searchcontinent
</div>
</fieldset>
</form>
出力は期待どおりに見えます
ただし、これによって生成される HTML は、私が期待するものではありません。
私のチェックボックスはすべてこのように見えます
<div class="make-switch span11" data-on="success" data-text-label="Africa" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" id="search_continent_Africa" value="Africa" name="search_continent"/>
</div>
<div class="make-switch span11" data-on="success" data-text-label="Antarctica" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" id="search_continent_Africa" value="Africa" name="search_continent"/>
</div>
<div class="make-switch span11" data-on="success" data-text-label="Asia" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" id="search_continent_Africa" value="Africa" name="search_continent"/>
</div>
<div class="make-switch span11" data-on="success" data-text-label="Australia" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
<input type="checkbox" id="search_continent_Africa" value="Africa" name="search_continent"/>
</div>
idそれぞれのおよびvalue属性がそれぞれ および に設定されているsearch_continent_Africaことに注意してくださいAfrica。
スクリーンショットの値が正しいのは、ブートストラップswitchプラグインが を使用しdata-text-labelて値を表示するためです。ただし、バックエンドでこのデータを使用できるように、チェックボックスにも正しい値を設定したいと考えています。
質問 このチェック ボックス グループの HTML を正しくレンダリングするには、フォーム宣言またはテンプレートで何を変更する必要がありますか?