I'm trying to shape up my login page form as per django. I'm facing an extra >" characters at the end of my entry fields.
There is the image error. See image below.
You might need to pay attention to right up corner of the input fields. Is there any idea, where is this "> came from ? Thanks for your time!
<form method="POST"> {% csrf_token%}
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email Adress" for="{{form.username}}">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password" for="{{form.password}}">
<span class="show">SHOW</span>
</div>
<div class="pass">
<a href="#">Forgot Password?</a>
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
There is the full code
{% load static %}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Transparent Login Form UI</title> -->
<link href="{% static 'css/login.css' %}" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Welcome to Norga</header>
<form method="POST"> {% csrf_token%}
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email Adress" for="{{form.username}}">
<!-- {{form.username}} -->
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password" for="{{form.password}}">
<!-- {{form.password}} -->
<span class="show">SHOW</span>
</div>
<div class="pass">
<a href="#">Forgot Password?</a>
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">
Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">
Don't have account?
<a href="{% url 'account_createview' %}">Signup Now</a>
</div>
<br>
<div class="signup">
Email verification
<a href="{% url 'resend_email_verification' %}">Send Again</a>
</div>
</div>
</div>
<script>
const pass_field = document.querySelector('.pass-key');
const showBtn = document.querySelector('.show');
showBtn.addEventListener('click', function(){
if(pass_field.type === "password"){
pass_field.type = "text";
showBtn.textContent = "HIDE";
showBtn.style.color = "#3498db";
}else{
pass_field.type = "password";
showBtn.textContent = "SHOW";
showBtn.style.color = "#222";
}
});
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
