如何使用django-crispy-forms创建引导文件浏览按钮

Here is my Django forms.py script, using django-crispy-forms

这是我的Django表单。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'))

I can create the following form:

我可以创建以下表单:

As shown there, I'd like to make the browse button with Bootstrap style. How can achieve that?

如图所示，我想使用Bootstrap样式创建browse按钮。如何做到的呢?

I'm thinking of something like this:

我在想这样的事情:

Complete HTML rendered by Django looks like this:

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>

1 个解决方案

#1

I know this is an old post but for any one interested, Crispy Forms has this in the documentation:

我知道这是一篇古老的文章，但对于任何感兴趣的人来说，酥脆的表单都包含在文档中:

 FieldWithButtons: You can create an input connected with buttons:

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

this is in the docs for crispy forms Bootstrap Layout objects

这是在文档中，crispy表单引导布局对象。

#1