Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Simple html form in Django

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.

Without id from css

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>

With id from css

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.

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading