PHP development user login module HTML login page
First use HTML+CSS code to write a simple submission form
<!DOCTYPE html>
<html>
<head>
<title>用户登录页面</title>
<meta charset="UTF-8"/>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{
width:400px;
list-style:none;
margin:50px auto;
}
li{
padding:12px;
position:relative;
}
label{
width:80px;
display:inline-block;
float:left;
line-height:30px;
}
input[type='text'],input[type='password']{
height:30px;
}
img{
margin-left:10px;
}
input[type="submit"]{
margin-left:80px;
padding:5px 10px;
}
</style>
</head>
<body>
<form action="logins.php" method="post">
<ul>
<li>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入登录账号"/>
</li>
<li>
<label>密码：</label>
<input type="password" name="password" placeholder="请输入密码" />
</li>
<li>
<label>验证码：</label>
<input type="text" name="code" size="4" style="float:left"/>
</li>
<li>
<input type="submit" value="登录" />
</li>
</ul>
</form>
</body>Secondly, in order to display the verification code module inside, you need to add JavaScript statements and introduce an external verification code PHP file:
<body>
<li>
<label>验证码：</label>
<input type="text" name="code" size="4" style="float:left"/>
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</li>
</body>Note:
captcha.php is the external verification code file, and the verification code can be changed through the JavaScript onclick event.
The following is the complete login page login.html file code:
<!DOCTYPE html>
<html>
<head>
<title>用户登录页面</title>
<meta charset="UTF-8"/>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{
width:400px;
list-style:none;
margin:50px auto;
}
li{
padding:12px;
position:relative;
}
label{
width:80px;
display:inline-block;
float:left;
line-height:30px;
}
input[type='text'],input[type='password']{
height:30px;
}
img{
margin-left:10px;
}
input[type="submit"]{
margin-left:80px;
padding:5px 10px;
}
</style>
</head>
<body>
<form action="logins.php" method="post">
<ul>
<li>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入登录账号"/>
</li>
<li>
<label>密码：</label>
<input type="password" name="password" placeholder="请输入密码" />
</li>
<li>
<label>验证码：</label>
<input type="text" name="code" size="4" style="float:left"/>
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</li>
<li>
<input type="submit" value="登录" />
</li>
</ul>
</form>
</body>
</html>Display effect:
new file
<!DOCTYPE html>
<html>
<head>
<title>用户登录页面</title>
<meta charset="UTF-8"/>
<style type="text/css">
*{margin:0px;padding:0px;}
ul{
width:400px;
list-style:none;
margin:50px auto;
}
li{
padding:12px;
position:relative;
}
label{
width:80px;
display:inline-block;
float:left;
line-height:30px;
}
input[type='text'],input[type='password']{
height:30px;
}
img{
margin-left:10px;
}
input[type="submit"]{
margin-left:80px;
padding:5px 10px;
}
</style>
</head>
<body>
<form action="logins.php" method="post">
<ul>
<li>
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入登录账号"/>
</li>
<li>
<label>密码：</label>
<input type="password" name="password" placeholder="请输入密码" />
</li>
<li>
<label>验证码：</label>
<input type="text" name="code" size="4" style="float:left"/>
<a href="javascript:;" onclick="document.getElementById('captcha_img').src='captcha.php?r='+Math.random()">
<img id="captcha_img" border='1' src='captcha.php?r=echo rand(); ?>' style="width:100px; height:30px" />
</a>
</li>
<li>
<input type="submit" value="登录" />
</li>
</ul>
</form>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)