简单的Django中的HTML表单

huangapple
go评论105阅读模式
英文:

Simple html form in Django

问题

Sure, here's the translated content:

请你帮助我，我不明白为什么在Django中HTML+CSS不按预期工作。

我使用一个简单的表单来上传两个文件，但它看起来非常难看。

index.html 没有 id="upload_container"

  1. <div class="page_thirdblock thirdblock">
  2.  <div class="thirdblock__container _container">
  3.   <form method="POST" enctype="multipart/form-data" class="upload1"> 
  4.     {% csrf_token %}
  5.     <input type="file" name="upload_file">
  6.     <input type="hidden" name="form_type" value="form_1">
  7.     <button type="submit">上传文件 1</button>
  8.   </form>
  9.   <form method="POST" enctype="multipart/form-data" class="upload2">
  10.     {% csrf_token %}
  11.     <input type="file" name="upload_file">
  12.     <input type="hidden" name="form_type" value="form_2">
  13.     <button type="submit">上传文件 2</button>
  14.    </form>
  15.  </div>
  16. </div>

index.html 使用 id="upload_container"

  1. <div class="page_thirdblock thirdblock">
  2.  <div class="thirdblock__container _container">
  3.   <form method="POST" enctype="multipart/form-data" class="upload1" id="upload_container"> 
  4.     {% csrf_token %}
  5.     <input type="file" name="upload_file">
  6.     <input type="hidden" name="form_type" value="form_1">
  7.     <button type="submit">上传文件 1</button>
  8.   </form>
  9.   <form method="POST" enctype="multipart/form-data" class="upload2" id="upload_container">
  10.     {% csrf_token %}
  11.     <input type="file" name="upload_file">
  12.     <input type="hidden" name="form_type" value="form_2">
  13.     <button type="submit">上传文件 2</button>
  14.   </form>
  15.  </div>
  16. </div>

我该如何修复它？我的意思是如何使用CSS样式来获取“浏览...”按钮。

英文:

Could you please help me, I don't understand why html+css don't work as expected in Django.

I use a simple form to upload two files, but it looks really ugly.

简单的Django中的HTML表单

index.html without id="upload_container"

  1. <div class="page_thirdblock thirdblock">
  2.  <div class="thirdblock__container _container">
  3.   <form method="POST" enctype="multipart/form-data" class="upload1"> 
  4.     {% csrf_token %}
  5.     <input type="file" name="upload_file">
  6.     <input type="hidden" name="form_type" value="form_1">
  7.     <button type="submit">Upload File 1</button>
  8.   </form>
  9.   <form method="POST" enctype="multipart/form-data" class="upload2">
  10.     {% csrf_token %}
  11.     <input type="file" name="upload_file">
  12.     <input type="hidden" name="form_type" value="form_2">
  13.     <button type="submit">Upload File 2</button>
  14.    </form>
  15.  </div>
  16. </div>

简单的Django中的HTML表单

index.html with id="upload_container"

  1. <div class="page_thirdblock thirdblock">
  2.  <div class="thirdblock__container _container">
  3.   <form method="POST" enctype="multipart/form-data" class="upload1" id="upload_container"> 
  4.     {% csrf_token %}
  5.     <input type="file" name="upload_file">
  6.     <input type="hidden" name="form_type" value="form_1">
  7.     <button type="submit">Upload File 1</button>
  8.   </form>
  9.   <form method="POST" enctype="multipart/form-data" class="upload2" id="upload_container">
  10.     {% csrf_token %}
  11.     <input type="file" name="upload_file">
  12.     <input type="hidden" name="form_type" value="form_2">
  13.     <button type="submit">Upload File 2</button>
  14.   </form>
  15.  </div>
  16. </div>

How I can fix it? I mean get Browse... button, but with css style.

答案1

得分: 1

尝试这个，看看会发生什么：

  1. <div class="page_thirdblock thirdblock">
  2.   <div class="thirdblock__container _container">
  3.     <form method="POST" enctype="multipart/form-data" class="upload1" id="upload_container">
  4.       {% csrf_token %}
  5.       <label for="file1" class="file-upload-label">
  6.         <input type="file" name="upload_file" id="file1" style="display:none;">
  7.         上传文件1
  8.       </label>
  9.       <input type="hidden" name="form_type" value="form_1">
  10.       <button type="submit">上传</button>
  11.     </form>
  12.     <form method="POST" enctype="multipart/form-data" class="upload2">
  13.       {% csrf_token %}
  14.       <label for="file2" class="file-upload-label">
  15.         <input type="file" name="upload_file" id="file2" style="display:none;">
  16.         上传文件2
  17.       </label>
  18.       <input type="hidden" name="form_type" value="form_2">
  19.       <button type="submit">上传</button>
  20.     </form>
  21.   </div>
  22. </div>
英文:

try this, see what happens

  1. &lt;div class=&quot;page_thirdblock thirdblock&quot;&gt;
  2.   &lt;div class=&quot;thirdblock__container _container&quot;&gt;
  3.     &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot; class=&quot;upload1&quot; id=&quot;upload_container&quot;&gt;
  4.       {% csrf_token %}
  5.       &lt;label for=&quot;file1&quot; class=&quot;file-upload-label&quot;&gt;
  6.         &lt;input type=&quot;file&quot; name=&quot;upload_file&quot; id=&quot;file1&quot; style=&quot;display:none;&quot;&gt;
  7.         Upload File 1
  8.       &lt;/label&gt;
  9.       &lt;input type=&quot;hidden&quot; name=&quot;form_type&quot; value=&quot;form_1&quot;&gt;
  10.       &lt;button type=&quot;submit&quot;&gt;Upload&lt;/button&gt;
  11.     &lt;/form&gt;
  12.     &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot; class=&quot;upload2&quot;&gt;
  13.       {% csrf_token %}
  14.       &lt;label for=&quot;file2&quot; class=&quot;file-upload-label&quot;&gt;
  15.         &lt;input type=&quot;file&quot; name=&quot;upload_file&quot; id=&quot;file2&quot; style=&quot;display:none;&quot;&gt;
  16.         Upload File 2
  17.       &lt;/label&gt;
  18.       &lt;input type=&quot;hidden&quot; name=&quot;form_type&quot; value=&quot;form_2&quot;&gt;
  19.       &lt;button type=&quot;submit&quot;&gt;Upload&lt;/button&gt;
  20.     &lt;/form&gt;
  21.   &lt;/div&gt;
  22. &lt;/div&gt;

huangapple
  • 本文由 发表于 2023年6月29日 23:40:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76582609.html
  • css
  • django
  • forms
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定