[英]After creating login and registration page HTML and CSS how to take user input and save to data base?
I'm currently making a website and have created both the HTML and CSS for both the registration and login Pages - I'm wanting to use Django to save the information, I'm just a bit confused on how to take the user input (using my html inputs) and then transferring them to the Django data base.我目前正在制作一个网站,并为注册和登录页面创建了 HTML 和 CSS - 我想使用 Django 来保存信息,我只是对如何获取用户输入有点困惑(使用我的 html 输入),然后将它们传输到 Django 数据库。 I'm very new to web development as you can tell - I'm just trying to take it one step at a time.
正如您所知,我对 Web 开发非常陌生 - 我只是尝试一步一步地进行。
/* This is the style sheet for the Registration Page only */ body { background-color: rgba(255,0,0,0.65); } h2 { color: white; font-family: optima; font-size: 300%; font-weight: 500; font-variant: small-caps; line-height: 200px; height: 200px; z-index: 0; margin-top: -50px; } h3 { color: white; font-family: Helvetica; font-size: 250%; font-weight: 400; font-variant: small-caps; margin-top: 50px; } #rectangle{ top: 20px; display: inline-block; width:450px; height:550px; background:rgba(43, 43, 43, 1); transform: translate(-50%,-50%); border-radius: 15px; position: absolute; z-index:-5; top: 550px; } img { opacity: 0.8; display: block; margin-left: auto; margin-right: auto; background-repeat: no-repeat; } div { text-align: center; padding: 0; } label{ color:white; font-family:Helvetica ; display: block; text-align: center; padding-bottom: 10px; } select{ font-family:Helvetica ; background-color: lightgrey; text-align: center; margin: 0 auto; display: block; padding: 50; } span { color:white; font-family:Helvetica ; display: block; text-align: center; padding-top: 20px; padding-bottom: 5px; } p { font-size: 10px; color:lightgrey; font-family:Helvetica ; display: block; text-align: center; } input[type=text]:focus{ font-family:Helvetica ; background-color: lightgrey; } input[type=text]{ font-family:Helvetica ; display: block; margin: 0 auto; text-align: center; } input[type=password]{ font-family:Helvetica ; display: block; margin: 0 auto; text-align: center; } input[type=password]:focus{ font-family:Helvetica ; background-color: lightgrey; } input[type=Vpassword]{ font-family:Helvetica ; display: block; margin: 0 auto; text-align: center; } input[type=checkbox]{ display: block; margin: auto; } input[type=button]{ font-family:Helvetica ; display: block; margin: 0 auto; margin-top: 50px; }
<!DOCTYPE html> <html> <head> <!-- Tab title for the window and importing stylesheet --> <title>SEAS Course Planner</title> <link rel="stylesheet" href="registrationstyle.css"/> </head> <body> <!-- WKU image file, specify width in center/top of page --> <img src="output-onlinepngtools.png" width="200" height="100"> <div> <!-- Headers for webpage and then login title --> <h2>SEAS COURSE PLANNER</h2> <h3>Create Account</h3> <!-- Background Rectangle --> <div id="rectangle"></div> </div> <form> <!-- Drop down menu to select what account type --> <label for="usertype">Account Type:</label> <select name="usertype" id="usertype"> <option value="Student">Student</option> <option value="Admin">Admin</option> </select> <!-- textboxes for username password, and password verification --> <div> <span>Create a New User Name:</span> <!-- Side note to enter in Student ID if Student--> <p> <em>(If student, Use Student ID Number)</em> </p> </div> <input type="text" id="username" name="username" placeholder="New Username"><br> <span>Create a Password:</span> <input type="password" id="myInput" name="password" placeholder="New Password"><br> <input type="password" id="myInput2" name="Verify Password" placeholder="Verify Password"><br> <!-- checkbox for user to check if they would like to see their password in the textbox --> <span>Show Passwords:</span> <label for="showpassword" style="word-wrap:break-word"> <input id="showpassword" type="checkbox" onclick="showPassword();showVPassword()" </label> <!-- two buttons (not yet connected to corresponding webpages) for login and create account --> <input type="button" value="Create Account"><br> </form> <!-- javascript to hide password AND verification password unless checkbox is checked --> <script> function showPassword() { var x = document.getElementById("myInput"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } function showVPassword() { var x = document.getElementById("myInput2"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } } </script> </script> </body> </html>
使用 Django 身份验证系统https://docs.djangoproject.com/en/3.1/topics/auth/default/或者您可以做一个脚手架,它将生成创建表单所需的所有内容并保存到数据库中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.