• 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"}
                )
    

      

  • 相关阅读:
    如何戒断
    sql update 语句
    golang 使用 context 进行并发控制(转)
    fmt.Printf() 如果 format 里结尾没有 \n,输出的字符串串结尾会带有一个 '%'
    Protobuf 和 Thrift对比(转)
    golang os.Args (转)
    博客园主题样式推荐
    json.Unmarshal() 反序列化字节流到 interface{} 对象,字段 int/int64 类型出现精度丢失
    Redis Setnx 命令(转)
    【代码片段】Qt6.2.4 QProcess 打开外部程序后关闭失败解决办法
  • 原文地址:https://www.cnblogs.com/yang-wei/p/10003686.html
Copyright © 2020-2023  润新知