day114-djaong-Form组件-保留用户输入的信息,引入了bootstrap
from django.shortcuts import render,HttpResponse,redirect from django.forms import Form,fields,widgets class LoginForm(Form): username = fields.CharField( min_length = 6, max_length = 16, required = True, #html插件,增加标签属性class='form-control',类名form-control是复制bootstrap, #这样才有bootstrap的样式 widget=widgets.TextInput(attrs={'class':'form-control'}), error_messages={ 'min_length':'至少6位', 'max_length':'至多16位', 'required':'不能为空' } ) password = fields.CharField( min_length=6, max_length=16, required=True, widget=widgets.TextInput(attrs={'class': 'form-control'}), error_messages={ 'min_length': '至少6位', 'max_length': '至多16位', 'required': '不能为空' } ) def login(request): if request.method == 'GET': #obj.username在html里面生成了<input type="text" name="username">,它没有value obj = LoginForm() return render(request,'login.html',{'obj':obj}) else: #request.POST有用户信息,给上面标签生成了value, #<input type="text" name="username" value=xx>,value当做默认值返回, #所以就保留了输入的信息 obj = LoginForm(request.POST) result = obj.is_valid() if result: print(obj.cleaned_data) return redirect('http://www.sogo.com') else: return render(request,'login.html',{'obj':obj})
<body> {#<form method="POST" action="/login" novalidate>#} {# {% csrf_token %}#} {# <p>用户名:#} {# {{ obj.username }}{{ obj.errors.username.0 }}#} {# </p>#} {# <p>密码:#} {# {{ obj.password }}{{ obj.errors.password.0 }}#} {# </p>#} {# <p>#} {# <input type="submit" value="提交">#} {# </p>#} {#</form>#} <div style="width:500px;margin:10% auto"> <!--bootstrap代码,记得写上method和action,novalidate就是不需要浏览器帮我们做验证(测试的时候用)--> <form class="form-horizontal" method="POST" action="/login" novalidate> {% csrf_token %} <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <!--obj.username生成了<input type="text" name="username">--> {{ obj.username }} {{ obj.errors.username.0 }} {# bootstrap原代码 <input type="email" class="form-control" id="inputEmail3" placeholder="Email">#} </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> {{ obj.password }}{{ obj.errors.password.0 }} {# bootstrap原代码 <input type="password" class="form-control" id="inputPassword3" placeholder="Password">#} </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">提交</button> </div> </div> </form> </div> </body>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】凌霞软件回馈社区,携手博客园推出1Panel与Halo联合会员
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步