如何使用 django-crispy-forms 制作 Bootstrap 文件浏览按钮答案

【问题标题】：How to make Bootstrap file browse button using django-crispy-forms如何使用 django-crispy-forms 制作 Bootstrap 文件浏览按钮
【发布时间】：2015-12-27 21:37:39
【问题描述】：

这是我的 Django forms.py 脚本，使用 django-crispy-forms

#!/usr/bin/env python
from django import forms
from .models import Method1
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit, Layout

class Method1Form(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        """ Use for wrapping bootstrap
        This is crispy stuff.
        """
        super(Method1Form, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'id-method1Form'
        self.helper.form_class =  'form-horizontal'
        self.helper.label_class = 'col-lg-2'
        self.helper.field_class = 'col-lg-8'
        self.helper.form_method = 'post'
        self.fields['inputfile_param'].label = "Input File"
        self.fields['species_param'].label = "Species"
        self.fields['norm_mode_param'].label = "Normalization"
        self.fields['logscale_param'].label = "Log Scale"
        self.helper.layout = Layout(
                'inputfile_param',
                'species_param',
                'norm_mode_param',
                'logscale_param',
          )
        self.helper.add_input(Submit('submit', 'Submit'))

我可以创建以下表单：

如图所示，我想用 Bootstrap 样式制作浏览按钮。怎样才能做到这一点？

我在想这样的事情：

由 Django 渲染的完整 HTML 如下所示：

/* Stuff for django-crispy */
.asteriskField {
        display: none;
}


.form-control {
    font-size:18px;
    font-family:  "Helvetica Neue",HelveticaNeue;
}

.form-horizontal {
    padding-left: 120px;
    padding-right: 130px;
    font-size:20px;
    font-family:  "Helvetica Neue",HelveticaNeue;
}

<!DOCTYPE html>
<html>
        <head>
       <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
       <meta charset="utf-8">
       </head>


<body>
   
    <!--- DISPLAY THE FORM -->
    

<form  id="id-method1Form" class="form-horizontal" method="post"  enctype="multipart/form-data"> <input type='hidden' name='csrfmiddlewaretoken' value='JdUjVaRwOkOxbQmoeSaSHTaDNTlwjs5U' /> <div id="div_id_inputfile_param" class="form-group"> <label for="id_inputfile_param" class="control-label col-lg-2 requiredField">
                Input File<span class="asteriskField">*</span> </label> <div class="controls col-lg-8"> <input class="clearablefileinput" id="id_inputfile_param" name="inputfile_param" type="file" /> </div> </div> <div id="div_id_species_param" class="form-group"> <label for="id_species_param" class="control-label col-lg-2 requiredField">
                Species<span class="asteriskField">*</span> </label> <div class="controls col-lg-8"> <select class="select form-control" id="id_species_param" name="species_param">
<option value="mouse" selected="selected">Mouse</option>
<option value="human">Human</option>
</select> </div> </div> <div id="div_id_norm_mode_param" class="form-group"> <label for="id_norm_mode_param" class="control-label col-lg-2 requiredField">
                Normalization<span class="asteriskField">*</span> </label> <div class="controls col-lg-8"> <select class="select form-control" id="id_norm_mode_param" name="norm_mode_param">
<option value="genecount_norm" selected="selected">Gene Count</option>
<option value="totalscore_norm">Total Score</option>
</select> </div> </div> <div class="form-group"> <div class="controls col-lg-offset-2 col-lg-8"> <div id="div_id_logscale_param" class="checkbox"> <label for="id_logscale_param" class=""> <input class="checkboxinput" id="id_logscale_param" name="logscale_param" type="checkbox" />
                    Log Scale
                    


    




    



                </label> </div> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit"
    name="submit"
    value="Submit"
    
        class="btn btn-primary"
        id="submit-id-submit"
    
    
    /> </div> </div> </form>

    <!--- END FORM DISPLAY-->

    
</body>


</html>

【问题讨论】：

stackoverflow.com/questions/11235206/…
有用的链接，但是内置到crispy-forms中的方法会更容易......

标签： python html django twitter-bootstrap-3 django-crispy-forms

【解决方案1】：

对于那些发现这一点的人，以前的答案不起作用。 OP 要求提供文件输入字段，而不是任何类型的带有按钮的字段。看起来 Crispy 不打算解决这个问题（参见 issue）。使用FieldWithButtons 将创建一个具有相同默认按钮的输入字段，以及一个显示“Go”的清晰按钮，如下所示：Go Browse button

唯一以脆皮为中心的方法是创建一个浏览按钮模板并在创建字段时简单地调用template=<your_template>.html。我从 BaseInput 模板中提取了一些信息来制作它并且它可以工作。

file_input.html

<label for="{% if input.id %}{{ input.id }}{% else %}{{ input.input_type }}-id-{{ input.name|slugify }}{% endif %}" class="btn btn-secondary">
    {% if field.field.required %}<span class="asteriskField">*</span>{% endif %}
    Browse
    <input type="file"
           name="{% if input.name|wordcount > 1 %}{{ input.name|slugify }}{% else %}{{ input.name }}{% endif %}"
           class="{{ input.field_classes }}"
           id="{% if input.id %}{{ input.id }}{% else %}{{ input.input_type }}-id-{{ input.name|slugify }}{% endif %}"
           hidden
           >
</label>

forms.py

class ProfileUpdateForm(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ['image']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.layout = Layout(
            # Fieldset('', *self.fields),
            Fieldset('', Button('image', "Browse", css_class="clearablefileinput form-control-file", template="file_input.html", css_id="id_image")),
            FormActions(
                Submit('save', 'Update Profile'),
            )
        )

views.py

def profile(request):
    p_form = ProfileUpdateForm(request.POST, instance=request.user.profile, files=request.FILES)
    #...etc...

结果： Bootstrappy browse button

【讨论】：

【解决方案2】：

我知道这是一篇旧帖子，但对于任何感兴趣的人来说，Crispy Forms 在文档中都有这个：

 FieldWithButtons: You can create an input connected with buttons:

 FieldWithButtons('field_name', StrictButton("Go!"))

这是在文档中的脆皮表格Bootstrap Layout objects

【讨论】：