[已解决]html登陆界面优化

tengke · 发表于 2023-6-16 18:18:39

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
      <link rel="stylesheet" href="{% static 'css/index.css' %}">
<script src="{% static 'js/jquery.js' %}"></script>
</head>
<body>
<script>

$(document).ready(function () {
      var whei = $(window).width()
      $("html").css({ fontSize: whei / 24 });
      $(window).resize(function () {
         var whei = $(window).width();
         $("html").css({ fontSize: whei / 24 })
      });
});
</script>
<div class="main">

<div class="header">
      <div class="header-center fl">
         <div class="header-title">
            登录界面
         </div>
         <div class="header-img"></div>
      </div>
      <div class="header-bottom fl"></div>

</div>
<div class="content">
      <div class="content-left">
         
      </div>
      <div class="content-right">
<form  action=""  method="post">
      {% csrf_token %}
         <div class="right-infp">
            <div class="right-infp-name">
                     {{ form.username }}
            </div>
            <div class="right-infp-name">
               {{ form.password }}
                  <span>{{ form.password.errors.0 }}</span>
            </div>
            <div class="right-infp-name">
               {{ form.yzm }}
                  <span>{{ form.yzm.errors.0 }}</span>
            </div>
                  <img id="captcha_img" src="/yzm" alt="captcha"  width="130" height="30">
      <a href="" id="refresh_captcha">换一张看不清</a>
</div>
            <div class="right-infp-btn">
                  <input type="submit" value="登陆" class="btn btn-primary">
            </div>
         </div>
</form>
      </div>
</div>

</div>

</body>
</html>

——————————————————————————————————————————————

前台显示界面为
E[9TV2AV)BM34EM1[){79[Y.png

可以看到报错内容在input框里面我想让报错界面显示到红框里面要怎么操作呢

最佳答案

月排行榜 / 总排行榜

歌者文明清理员

2023-6-16 20:11:02

可以将报错信息直接插入到输入框中的value属性中，这样可以实现用户再次操作时方便查看和修改报错信息。以下是示例代码：

```html

<div class="right-infp-name">
  <input type="text" name="{{ form.password.name }}" value="{{ form.password.value }}" placeholder="{{ form.password.label }}">
  <span>{{ form.password.errors.0 }}</span>
</div>

```

需要注意的是，这里的{{ form.password.value }}需要在对应视图函数中传递form对象才能使用。另外，如果要实现在报错信息不为空时自动聚焦到对应输入框中，可以在页面加载完成时加上相应的JavaScript代码实现。

跳转到最佳答案楼层

歌者文明清理员 · 发表于 2023-6-16 20:11:02

可以将报错信息直接插入到输入框中的value属性中，这样可以实现用户再次操作时方便查看和修改报错信息。以下是示例代码：

```html

<div class="right-infp-name">
  <input type="text" name="{{ form.password.name }}" value="{{ form.password.value }}" placeholder="{{ form.password.label }}">
  <span>{{ form.password.errors.0 }}</span>
</div>

```

需要注意的是，这里的{{ form.password.value }}需要在对应视图函数中传递form对象才能使用。另外，如果要实现在报错信息不为空时自动聚焦到对应输入框中，可以在页面加载完成时加上相应的JavaScript代码实现。

tengke · 发表于 2023-6-19 13:50:49

歌者文明清理员发表于 2023-6-16 20:11
可以将报错信息直接插入到输入框中的value属性中，这样可以实现用户再次操作时方便查看和修改报错信息。以 ...

不行的

tengke · 发表于 2023-6-19 13:54:18

<div class="right-infp-name">
{{ form.password }}
</div>
<span>{{ form.password.errors.0 }}</span>

改成这样了显示不算太好

账号		自动登录	找回密码
密码			立即注册