Simple html form in Django

Question

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.

index.html without 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.html with id="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>

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

Answer 1

try this, see what happens

<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>