• Django基础之form表单的补充进阶


    1. 应用Bootstrap样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
      <title>login</title>
    </head>
    <body>
    <div class="container">
      <div class="row">
        <form action="/login2/" method="post" novalidate class="form-horizontal">
          {% csrf_token %}
          <div class="form-group">
            <label for="{{ form_obj.username.id_for_label }}"
                   class="col-md-2 control-label">{{ form_obj.username.label }}</label>
            <div class="col-md-10">
              {{ form_obj.username }}
              <span class="help-block">{{ form_obj.username.errors.0 }}</span>
            </div>
          </div>
          <div class="form-group">
            <label for="{{ form_obj.pwd.id_for_label }}" class="col-md-2 control-label">{{ form_obj.pwd.label }}</label>
            <div class="col-md-10">
              {{ form_obj.pwd }}
              <span class="help-block">{{ form_obj.pwd.errors.0 }}</span>
            </div>
          </div>
          <div class="form-group">
          <label class="col-md-2 control-label">{{ form_obj.gender.label }}</label>
            <div class="col-md-10">
              <div class="radio">
                {% for radio in form_obj.gender %}
                  <label for="{{ radio.id_for_label }}">
                    {{ radio.tag }}{{ radio.choice_label }}
                  </label>
                {% endfor %}
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
              <button type="submit" class="btn btn-default">注册</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    </body>
    </html>

    2. 批量添加样式

    可通过重写form类的init方法来实现:

    class LoginForm(forms.Form):
        username = forms.CharField(
            min_length=8,
            label="用户名",
            initial="yang",
            error_messages={
                "required": "不能为空",
                "invalid": "格式错误",
                "min_length": "用户名最短8位"
            }
        )
        ...
        
        def __init__(self, *args, **kwargs):
            super(LoginForm, self).__init__(*args, **kwargs)
            for field in iter(self.fields):
                self.fields[field].widget.attrs.update(
                {"class": "form-control"}
                )
    

      

  • 相关阅读:
    java:线上问题排查常用手段
    去fastjson笔记
    如何让java中的注释代码执行?
    spring中aop不生效的几种解决办法
    mysql事务隔离级别/脏读/不可重复读/幻读详解
    业务系统-全球化多时区的解决思路
    mysql虚拟列(Generated Columns)及JSON字段类型的使用
    freeswitch笔记(7)-放音控制
    JVM问题典型案例定位学习
    freeswitch笔记(6)-会议功能简介
  • 原文地址:https://www.cnblogs.com/yang-wei/p/10003686.html
Copyright © 2020-2023  润新知