英文:
Simple html form in Django
问题
Sure, here's the translated content:
请你帮助我，我不明白为什么在Django中HTML+CSS不按预期工作。
我使用一个简单的表单来上传两个文件，但它看起来非常难看。
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">上传文件 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">上传文件 2</button>
</form>
</div>
</div>
index.html 使用 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">上传文件 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">上传文件 2</button>
</form>
</div>
</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.
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.
答案1
得分: 1
尝试这个，看看会发生什么：
<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;">
上传文件1
</label>
<input type="hidden" name="form_type" value="form_1">
<button type="submit">上传</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;">
上传文件2
</label>
<input type="hidden" name="form_type" value="form_2">
<button type="submit">上传</button>
</form>
</div>
</div>
英文:
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论