我有一个小表单,用于允许用户选择他们希望与之交互的一组大陆。我的表单定义如下
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'),
)
我使用此tutorial分别渲染元素,因为我使用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?
答案 0 :(得分:0)
要在id
上区分checkbox
字段上的定义,请添加属性ID:
form.Checkbox('search_continent', value='South America', id="Africa")