0

我有一个小表格,我正在使用它来允许用户选择他们希望与之交互的一组大陆。我的表格是这样定义的

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>  

请注意,每个的idvalue属性分别设置为search_continent_AfricaAfrica

屏幕截图具有正确值的原因是引导switch插件使用data-text-label来显示值。但是,我希望我的复选框也具有正确的值,以便我可以在后端使用这些数据。

问题 我需要在表单声明或模板中修改哪些内容才能正确呈现此复选框组的 HTML?

4

1 回答 1

0

要区分字段添加属性 id 的定义idcheckbox

form.Checkbox('search_continent', value='South America', id="Africa")
于 2013-09-06T04:13:29.763 回答