Django中的简单html表单

798qvoo8  于 2023-07-01  发布在  Go
关注(0)|答案(1)|浏览(105)

你能帮帮我吗,我不明白为什么html+css在Django中不能正常工作。
我用一个简单的表单上传了两个文件,但是看起来真的很丑。

index.html不带id="upload_container"

<div class="page_thirdblock thirdblock">
 <div class="thirdblock__container _container">
  <form method="POST" enctype="multipart/form-data" class="upload1"> 
    {% csrf_token %}
    <input type="file" name="upload_file">
    <input type="hidden" name="form_type" value="form_1">
    <button type="submit">Upload File 1</button>
  </form>
  <form method="POST" enctype="multipart/form-data" class="upload2">
    {% csrf_token %}
    <input type="file" name="upload_file">
    <input type="hidden" name="form_type" value="form_2">
    <button type="submit">Upload File 2</button>
   </form>
 </div>
</div>

index.htmlid="upload_container"

<div class="page_thirdblock thirdblock">
 <div class="thirdblock__container _container">
  <form method="POST" enctype="multipart/form-data" class="upload1" id="upload_container"> 
    {% csrf_token %}
    <input type="file" name="upload_file">
    <input type="hidden" name="form_type" value="form_1">
    <button type="submit">Upload File 1</button>
  </form>
  <form method="POST" enctype="multipart/form-data" class="upload2" id="upload_container">
    {% csrf_token %}
    <input type="file" name="upload_file">
    <input type="hidden" name="form_type" value="form_2">
    <button type="submit">Upload File 2</button>
  </form>
 </div>
</div>

我该怎么弥补?我的意思是得到Browse...按钮,但与css风格。

hm2xizp9

hm2xizp91#

试试这个,看看会发生什么

<div class="page_thirdblock thirdblock">
  <div class="thirdblock__container _container">
    <form method="POST" enctype="multipart/form-data" class="upload1" id="upload_container">
      {% csrf_token %}
      <label for="file1" class="file-upload-label">
        <input type="file" name="upload_file" id="file1" style="display:none;">
        Upload File 1
      </label>
      <input type="hidden" name="form_type" value="form_1">
      <button type="submit">Upload</button>
    </form>
    <form method="POST" enctype="multipart/form-data" class="upload2">
      {% csrf_token %}
      <label for="file2" class="file-upload-label">
        <input type="file" name="upload_file" id="file2" style="display:none;">
        Upload File 2
      </label>
      <input type="hidden" name="form_type" value="form_2">
      <button type="submit">Upload</button>
    </form>
  </div>
</div>

相关问题