как стилизовать forms в python django(css, html)

[shkuin]

подскажите пожалуйста, как я могу стилизовать данные компоненты на первом скрине (на примере кнопки "обзор"), последующие скрины идут в таком порядке: html, forms, models


И как еще сделать так, чтобы не было видно поля 'currently'(на первом скрине), так как оно всегда выводится автоматически с вызовом form.profile_pic или form.as_ul

 

[stud_55]

подскажите пожалуйста, как я могу стилизовать данные компоненты на первом скрине (на примере кнопки "обзор"), последующие скрины идут в таком порядке: html, forms, models
И как еще сделать так, чтобы не было видно поля 'currently'(на первом скрине), так как оно всегда выводится автоматически с вызовом form.profile_pic или form.as_ul

Вот так можно например:

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Name:</label>
        <input type="text" name="email" class="form-control" id="id_name">
    </div>
    <div class="form-group">
        <label for="id_email">Email:</label>
        <input type="text" name="email" class="form-control" id="id_email">
    </div>
    <div class="form-group">
        <label for="id_profile_pic" class='btn btn-dark'>Change</label>
        <input type="file" name="profile_pic" id="id_profile_pic" style='display:none'>
    </div>
    
    <button type="submit" class="btn btn-dark">Update</button>
</form>

В данном примере input делаем невидимым, а выбор файла происходит по клику на label, которую можно стилизовать. Если с ImageField будет некорректно выводить можете поменять в моделях тип поля у profile_pic c ImageField на FileField.

 

[shkuin]

Вот так можно например:

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_name">Name:</label>
        <input type="text" name="email" class="form-control" id="id_name">
    </div>
    <div class="form-group">
        <label for="id_email">Email:</label>
        <input type="text" name="email" class="form-control" id="id_email">
    </div>
    <div class="form-group">
        <label for="id_profile_pic" class='btn btn-dark'>Change</label>
        <input type="file" name="profile_pic" id="id_profile_pic" style='display:none'>
    </div>
   
    <button type="submit" class="btn btn-dark">Update</button>
</form>

В данном примере input делаем невидимым, а выбор файла происходит по клику на label, которую можно стилизовать. Если с ImageField будет некорректно выводить можете поменять в моделях тип поля у profile_pic c ImageField на FileField.

Спасибо большое, все выглядит отлично, но есть проблема, информация не обновляется, все вводится, после нажатия на kнопку update все удаляется кроме profile_pic(Она меняется), но при переходе уже на другую страницу сайта, все становится как прежде(картинка, имя)

 

[stud_55]

Видимо во вью что-то нужно поменять чтобы сохранялось в базу корректно.